The Color Swatch option in MultiVariants lets customers choose product customization options from clickable color swatches. You can allow customers to select one or multiple colors, choose each swatch color with the color picker or a HEX code, add optional prices, set a default selection, and display one shared set of swatches or separate swatches for each variant.
Before You Start: Make sure the product is included in the ruleset where you want to add the Color Swatch option. The option will appear on products that the ruleset applies to.
If you are new to Product Options, first see how to set up Product Options in MultiVariants.
How to Set Up a Custom Color Swatch Option
Follow these steps to create and configure a Color Swatch option.
Step#1 Open Product Options
>> Go to the MultiVariants dashboard, open an existing ruleset or create a new one, open the Product Options tab, and click + Add option.
Step#2 Select the Color Swatch Option
>> Select Color Swatch from the available option types and click Add option.
Step#3 Choose Single or Multiple Selection
Choose how customers can select the color swatches:
Single choice swatch — allows customers to select only one color swatch at a time.
Multiple choice swatch — allows customers to select multiple color swatches from the available choices.
Step#4 Configure the Color Swatch Settings
>> Configure the fields based on how you want the Color Swatch option to appear and behave on the storefront.
Option title — enter the heading customers will see above the color swatches, such as “Strap color.”
Short description — add an optional short description to explain what customers should choose.
Help text — add optional instructions or supporting information below the color swatches.
Required — set to Yes if customers must select at least one color swatch before adding the product to the cart.
Display on each variant — leave this unchecked to show one shared set of color swatches above the bulk-order section. Check it to display a separate set of color swatches under each variant row so customers can make different selections for individual variants.
Step#5 Add Your Color Swatch Choices
>> Add the color choices customers will see on the storefront. Each row contains the following settings:
Swatch Title — enter the name customers will see for the color, such as “Red” or “Forest Green.” The title can contain up to 100 characters.
Color — click the color square to choose the swatch color using the color picker, or enter a HEX color code for a specific color.
Price — enter an optional additional charge for this color choice. Leave it blank if selecting the color should not add an extra charge.
Default — select the color swatch you want pre-selected when the product page loads.
Click + Add attribute to add another color choice.
Example: For a strap color option, you could add Black, Brown, and Red swatches, set Brown as the default, and add an extra price only to the Red option if needed.
Step#6 Save the Color Swatch Option
>> Click Save in the top save bar after reviewing your Color Swatch settings.
Step#7 Test the Color Swatch Option on Your Storefront
Open a product page where the ruleset applies and test the Color Swatch option. Confirm that the correct colors appear, single or multiple selection works as expected, the default choice is pre-selected, optional add-on prices are applied correctly, and required selections are enforced.
Manage Color Swatch Placement and Styling
Add Another Product Option
>> Click + Add more options if you want to add another Product Option to the same ruleset.
Choose the Color Swatch Placement
Placement — determines whether the Color Swatch option appears above or below the MultiVariants listing on the product page.
>> Click the gear icon at the top of the Product Options tab, select Above MultiVariants listing or Below MultiVariants listing, and click Save changes.
Customize the Color Swatch Style
>> Click the gear icon at the top-right of the Color Swatch option card to customize the default background color, active background color, default and active border colors, and color swatch size. Click Customize to apply the changes.
Common Issues
The Color Swatch option is not showing on the product page
Make sure the product is included in the ruleset where you created the Color Swatch option and that the ruleset is active.
Customers can select more than one color
Check the swatch selection type. Choose Single choice swatch if customers should be able to select only one color.
Customers can add the product without selecting a color
Set Required to Yes if customers must select at least one color swatch before adding the product to the cart.
The wrong color is selected when the page loads
Check the Default setting and confirm that the color you want customers to see first is selected as the default swatch.
The color swatches are too large or too small
Open the Color Swatch customization settings and adjust the color swatch size until it fits your storefront design.
Need Help?
If the Color Swatch option does not appear on the storefront, selections or prices are not working as expected, or you need help configuring the swatches, contact the MultiVariants support team.
You can always reach us via
💬 Live Chat: in MultiVariants app
📧 Email: support@multivariants.com
📅 Live Meeting: https://calendly.com/efolisupport