Dropdowns with swatches (also known as Dropdown Swatch) let shoppers select from a list of predefined values — just like regular dropdowns — but with the added benefit of showing a visual swatch next to each option. It’s perfect when you want to offer choices like fonts, styles, or colors and make it easier for shoppers to see what each one looks like before selecting, but still keeping it compact.
You can configure how the dropdown with swatches behaves, and decide how that input will be used to personalize.
In this article:
Settings you can configure on a Dropdown Swatch
When you select Dropdown 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 dropdown selector on your product page (e.g., “Choose a quote”)
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 selector to guide your shoppers.
Placeholder
Text that appears in the dropdown before any selection is made. This can prompt shoppers to make a choice, like Select a style.
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 Dropdown Swatches Can Be Used to Personalize
Just like regular dropdowns, Dropdowns with swatches let shoppers select from a list — but with the added benefit of visual cues for each option. 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 Dropdown, expand the Function tab of your option and choose how it should interact with your template.
Dropdowns with swatch can power a variety of personalization types by assigning functions to them. Here are the functions that work with dropdowns, 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 dropdown swatch. Perfect for lists of pre-defined options like cities, months, quotes, 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.).
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.
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 Dropdown Swatch Values
Dropdown 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 dropdown swatch option.
Click “Add Dropdown Value.”
-
Expand the value to configure it, you can:
Set a name: This is what shoppers will see in the dropdown list.
Add an Image: This is the picture that will appear to the left of the value name
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 dropdown 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.