Swatches let shoppers choose from a set of predefined options shown visually — like colors, images, or clipart. All available choices are displayed at once, making it quicker and more intuitive for shoppers to pick what they want. You can define each swatch using either a color or an image, depending on what fits your product best.
You can configure how the swatch behaves, and decide how that input will be used to personalize.
In this article:
Settings you can configure on a Swatch
When you select 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.
Click any item below to jump directly to it:
🛠 Basic Settings
⚙️ Advanced Settings
Label
Text that appears above the swatch selector on your product page (e.g., “Choose a color”)
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 Swatches Can Be Used to Personalize
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 Swatch, expand the Function tab of your option and choose how it should interact with your template.
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 based on the value selected in the swatch. While it's less common to use swatches for text input, it can work for short, predefined choices — like initials, numbers, or short words — especially when paired with a visual reference.
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.).
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.
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.
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 Swatch Values
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.
Add an Image OR Pick a color: Choose how the swatch will be displayed visually. You can upload an image (ideal for clipart, textures, or thumbnails) or set a color value (great for color selection).
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 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.