Text swatches let shoppers choose from a set of predefined options displayed as clickable buttons. Unlike regular swatches, these don’t use images or colors, they use text; and unlike dropdowns, all options are visible at once, making selection quicker and more intuitive. They’re great for short text choices like sizes, initials, or style names.
You can configure how the text swatch behaves, and decide how that input will be used to personalize.
In this article:
Settings you can configure on a Text swatch
When you select Text swatch as the option type, you’ll be able to configure how the selector behaves and appears in your store.
To configure these, expand the option in your Option Set and scroll through the available settings.
Text swatches come with a wide range of settings. Click any item below to jump directly to it:
🛠 Basic Settings
⚙️ Advanced Settings
Label
Text that appears above the text swatch selector on your product page (e.g., “Choose number of pets”)
Required
Make this field mandatory by enabling this toggle. If it's required, shoppers won't be able to complete their purchase without selecting it. An * next to the option label will indicate it is required on the storefront.
Help Text
Add a short description below the swatches to guide your shoppers.
Variable Name (Advanced)
Assign a hidden variable to this option (not visible to shoppers). This allows you to pre-fill it via a URL, useful for marketing campaigns or sharing pre-configured links.
Custom CSS Class (Advanced)
Add a custom class name to target and style this option through CSS in your store’s developer settings.
Hide Option (Advanced)
Hides the option completely from shoppers. This is useful when you want to control personalization behavior in the background without shopper input.
How Text Swatches Can Be Used to Personalize
Text swatches let shoppers make a visual choice — but what that selection does depends on the function you assign to the option.
You can learn more about functions and how they work here.
To assign a function to a Text swatch, expand the Function tab of your option and choose how it should interact with your template.
Text swatches can power a variety of personalization types by assigning functions to them. Here are the functions that work with swatches, click on each one to learn how they can personalize your product:
Text
Changes the content of a text element in your template, with the pre-defined value on the text swatch. Perfect for lists of pre-defined short options like initials, months, numbers, and more.
Text Fill and Outline Color
Updates the fill color or the outline color of a text element that has different color options.
Font Type
Changes the font of a text element that has different font options.
Dynamic Image / Dynamic Vector
Changes a preset image or vector in your design based on the selection (e.g., switching hairstyles, clothes, etc.). While this works with Text Swatches, it’s not the most intuitive option for shoppers, since there’s no visual preview — consider using image-based swatches instead when showing visual differences matters.
Image Color / Dynamic Vector Color
Changes the color of an Image upload if it is set to Single Color mode and has color options, or of a Dynamic Vector in Single Color mode with different color options.
Map Style
Changes the visual style for a map element — like street, vintage, or dark. Each swatch represents one of Customily’s predefined map styles, and the selected style updates the map’s appearance automatically. This works with Text Swatches, but since the selection isn’t visual, it may be harder for shoppers to understand the differences at a glance.
Star Map Style
Changes the visual style for a star map element — like dark blue, black, or golden. Each swatch represents one of Customily’s predefined star map styles, and the selected style updates the map’s appearance automatically. While functional with Text Swatches, we recommend a visual selector (like swatches) for a clearer shopping experience.
Change Template
Loads a completely different template when the shopper selects a specific value (useful for switching product styles or sizes).
Add Shopify Product
Adds an extra Shopify product when a certain value is selected (ideal for upsells or bundles).
Learn how to charge extra for your personalization →
Layout Visibility
Switches between different layouts in your design based on the shopper’s selection.
Layouts allow you to create multiple design variations within the same template—like offering options for 1, 2, 3, or 5 kids on a product. This function is only available if your template includes layouts.
Learn more about working with layouts →
How to configure Text Swatch Values
Text swatches rely on values for shoppers to choose from. Each value represents a selectable option that will trigger a different result in your design.
To add values:
Expand the Values section of your swatch option.
Click “Add Swatch Value.”
-
Expand the value to configure it, you can:
Set a name: This will be shown as a tooltip when shoppers hover over the swatch, and it will appear in the order details (cart and order summary) as the selected value.
Mark as selected (optional): This will be the pre-selected value when the product loads.
-
Link the value to a design option.
Just like functions need to be linked to a design element, values must be linked to the corresponding option in your template (like a specific font, image, or color). The function defines what will change, and this tells Customily how it should change — like which font to apply, what text to show, or which image to load.Depending on the function the text swatch has, the value you will have to assign.
Text → Enter the exact text that should appear in the design (this can be different from the visible label shoppers see).
Color / Font / Image / Vector → Link to the corresponding numbered option in your template (e.g., Font Option 1, Color Option 2).
Change Template → Enter the ID of the alternate template.
Add Shopify Product → Select the appropiate Shopify product.
Layout Visibility → Enter the layout ID that you want to show.
If you don’t manually assign these options, Customily will auto-number the values (1, 2, 3…), which may not match your design setup and could cause incorrect personalization.
Repeat this process to add as many values as you need.