Displaying Variant Swatches

Follow

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 ##VARIANTPICMATRIX[]## merge code to the Product Details HTML layout.
  • or Add the ##VARIANTPICMATRIX[]## 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 ##VARIANTPICMATRIX[]## 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: ##VARIANTPICMATRIX[groupname=COLOR,maxcol=3,width=30]##

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.

Have more questions? Submit a request

Comments

  • Avatar
    Kristen Eggers

    I chose the radio buttons for my variants and have checked the appropriate boxes for the variant swatch to be shown next to the variant names but no swatches are being show. Additionally, when the option is selected, the Variant photo is not shown in the main product picture area. Is there a different setting that needs to be selected to show variant swatches for radio button style lists?