Display Dynamic Color and Image Swatches on your Variant Selector
Your variant selector can now dynamically show color swatches, image swatches, and variant images based on your configurations.
In this doc, we will:
Enable & customize swatches UI
Go to your Variant Selector component on your product page and click on the "Color Swatches", "Image Swatches", or "Variant Images" controls on the right panel.
Enable and customize your UI to your desired styles.
Enable & customize swatches UI
Go to your Variant Selector component on your product page and click on the "Color Swatches", "Image Swatches", or "Variant Images" controls on the right panel.
Enable and customize your UI to your desired styles.
Enable & customize swatches UI
Go to your Variant Selector component on your product page and click on the "Color Swatches", "Image Swatches", or "Variant Images" controls on the right panel.
Enable and customize your UI to your desired styles.
Define which variants should use Swatches UI
Open the Framer Commerce plugin and go to Store Settings.
Under each section, you'll see "Titles". Think of this as a list of variant titles that will always use the respective UI instead of dropdowns or buttons.
For example, if you want the Color Swatch UI to show up for your variant group that is called "Color", add this value.
You may have custom Image Swatches you want to display for a variant group called "Pattern".
Or you may have a variant group called "Style" which you want to use the actual corresponding Variant Images that you uploaded on Shopify.
Define which variants should use Swatches UI
Open the Framer Commerce plugin and go to Store Settings.
Under each section, you'll see "Titles". Think of this as a list of variant titles that will always use the respective UI instead of dropdowns or buttons.
For example, if you want the Color Swatch UI to show up for your variant group that is called "Color", add this value.
You may have custom Image Swatches you want to display for a variant group called "Pattern".
Or you may have a variant group called "Style" which you want to use the actual corresponding Variant Images that you uploaded on Shopify.
Define which variants should use Swatches UI
Open the Framer Commerce plugin and go to Store Settings.
Under each section, you'll see "Titles". Think of this as a list of variant titles that will always use the respective UI instead of dropdowns or buttons.
For example, if you want the Color Swatch UI to show up for your variant group that is called "Color", add this value.
You may have custom Image Swatches you want to display for a variant group called "Pattern".
Or you may have a variant group called "Style" which you want to use the actual corresponding Variant Images that you uploaded on Shopify.
Map your values
In the Color Swatches section under the "Values" title, you can add the names of each color as they appear in Shopify (i.e. "Red"), and then map your desired hex code (i.e. "#FF0000").
In the Image Swatches section under the "Values" title, you can add the names of each value as they appear in Shopify (i.e. "Stripes") and upload the image.
For Variant Images, these are set in the component. If they're turned on, you'll see Image 1, Image 2, Image 3, etc. variables to connect to your CMS. Make sure the Image IDs variable is also connected.
Map your values
In the Color Swatches section under the "Values" title, you can add the names of each color as they appear in Shopify (i.e. "Red"), and then map your desired hex code (i.e. "#FF0000").
In the Image Swatches section under the "Values" title, you can add the names of each value as they appear in Shopify (i.e. "Stripes") and upload the image.
For Variant Images, these are set in the component. If they're turned on, you'll see Image 1, Image 2, Image 3, etc. variables to connect to your CMS. Make sure the Image IDs variable is also connected.
Map your values
In the Color Swatches section under the "Values" title, you can add the names of each color as they appear in Shopify (i.e. "Red"), and then map your desired hex code (i.e. "#FF0000").
In the Image Swatches section under the "Values" title, you can add the names of each value as they appear in Shopify (i.e. "Stripes") and upload the image.
For Variant Images, these are set in the component. If they're turned on, you'll see Image 1, Image 2, Image 3, etc. variables to connect to your CMS. Make sure the Image IDs variable is also connected.
Save, Test & Publish
Every time you save your values in the plugin, they'll update your components directly in the canvas.
We still suggest testing on staging in your browser before going live to make sure everything's behaving as expected.
Save, Test & Publish
Every time you save your values in the plugin, they'll update your components directly in the canvas.
We still suggest testing on staging in your browser before going live to make sure everything's behaving as expected.
Save, Test & Publish
Every time you save your values in the plugin, they'll update your components directly in the canvas.
We still suggest testing on staging in your browser before going live to make sure everything's behaving as expected.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.