NOTE: Variant swatches now show up regardless if you have a product number or not. However, if you are using auto-association for photos/swatches, product number is required.
There are several ways to display the swatches on your product page.
- Enable Show Swatch setting on the Product details page in your theme.
- or Add the merge code to the Product Details HTML layout.
- or Add the merge code to the Variant Group's Header or Footer HTML.
Enable Show Swatch Next to Variant Option
This is the simplest way to enable swatches for your variants.
Go to your Theme > Pages >Product Details. If the Settings page doesn't open by default click on Basic Settings. The setting to turn on is called "Show Swatch Next to Variant Option"\
NOTE: This method only shows swatches on DropDown and RadioButtonList type variant groups. An Item Number must also be set on the item.
Alternate Method #1: Add the merge code to the Product Details HTML layout.
To add the merge code to the layout go to Your active theme. Then go to Pages > Product Details > HTML Editor.
The most common place to insert the swatches is right below the Variants themselves.
The merge code takes the following parameters: groupname, maxcol, width.
For Example:
The group name comes from what the exact name of the Variant Group is.
NOTE: This will work on all Variant Group types, but will only be clickable on the DropDown type.
Then use exactly what is shown in the Variant Group Name column.
Variant Swatch Color Picker
You can now pick a color swatch to use in your products in the product editor.
Catalog > Products > Edit Product > Options/Variants
After selecting the colors , you will now see them under the dropdown selector.
You can also use this field in exporting and importing of product variants. It will be called SwatchThumbColor.
