How to Add an Outline Effect to Custom Text Fields in Custom Product Builder – Custom Product Builder / Quiz Support

Hello!

*click on the images to open in new tab

This guide explains how to add an outline effect to custom text fields in the Custom Product Builder app for Shopify.

There are three ways to achieve this effect:

– Adding a custom font with an outline effect

– Using two overlapping text layers

– Adding a glow effect to the text layer

1. Uploading a custom font

If you have a custom outlined font, you can upload it and use it in the app without any additional settings.

👉 Follow the instructions in this guide to upload a custom font: Fonts Management

2. Creating an overlay effect with two text layers

This method involves adding a duplicate text layer to create an outline effect.

Step 1: Prepare your text layers

If you haven’t created a text upload field yet, follow this guide first: Customization - Static Area For Monograms & Text: Multi font family / color / size selector for users. Charge per character feature. Glow effect
If you already have a text field, color picker, and text layer, proceed to the next step.

Briefly:

Create an input field option
- Click "Add First Custom Option" or "Add New Custom Option".
- Select "Input Field" → "Text Area" as the option type.
Create a custom layer
- Go to the Layers tab and click "+ Add Custom Layer".
Set up the layer
- Click on the newly created purple layer ("No Title").
- Select "Simple Text" as the layer type.
Link the input field to the layer
- Open the "Settings" tab of the layer.
- Go to "Text Settings" and scroll down to "Text Source".
- Connect the previously created input field to this layer.

Step 2: Duplicate the text layer

Copy the existing text layer and slightly adjust its position so that both layers overlap slightly.
Ensure that both text layers use the same text source (i.e., the same text field option).

Briefly:

Click "Clone This Layer" next to the already created text layer.
Select the copied layer and rename it if needed.
Drag the copied text layer slightly to create a shadow effect on the preview.

Step 3: Set up color pickers

Create a new color picker, or duplicate an existing one.
You will need two "Color Thumbnails" options—one for the primary text layer and one for the outline layer.
Assign each color picker to its corresponding text layer.

Now, customers can set different colors for the main text and its outline, creating a shadow effect!

Briefly:

Click "+ Add New Custom Option".
Select "Single Choice" → "Color Thumbnails" as the option type.
Click "Add New Choice" to add as many color choices as needed.
Set the required colors and save the option.
Copy the option by clicking the "Copy" button next to the existing one.
Open the Layers tab and navigate to the layer's settings.
Go to "Layer Colorization Settings".
Toggle on "Colorize From Color Thumbnail Custom Option".
Set the two created color pickers as the colorization sources for the two layers:
- One "Color Thumbnails" option will control the main text color.
- The other will control the outline color.

3. Using the glow effect for a blurred outline

This method adds a soft, blurred outline around the text. However, it does not allow you to attach a color picker to the outline; the outline color is set in the layer's settings.