Overview
If your store uses variant items, you may wish to display these variant items on the catalog search, category, attribute and catalog page alongside the products they belong to.
Add Merge Codes to the Layout Area
Make sure you have the proper merge codes and layout area onto your page for them to be visible.
This example is for catalog search page, other pages like category, catalog and attribute page will be similar.
Navigate to Themes > Edit Theme > Pages > Catalog Search > HTML Editor
Scroll down until you find the following tag:
<ac:layoutarea id="ProductList">
...
</ac:layoutarea>
Inside of this tag is where you'll paste the following code. Place it where you would like your variant options to appear. Feel free to remove merges you may not want:
$$VARIANTS$$
<ac:layoutarea id="Variant">
$$VARIANTGROUPNAME$$ $$VARIANTGROUPHEADER$$
$$VARIANTGROUPCONTROLS$$
<ac:visibilityarea id="VariantGroupSwatches">
$$VARIANTGROUPSWATCHES$$
</ac:visibilityarea>
$$VARIANTGROUPFOOTER$$
</ac:layoutarea>Enable 'Show Variants And Personalizations' Setting
Navigate to Advanced Settings and enable the 'Show Variants And Personalizations' setting. You can also enable 'Show Variant Swatches' if you would like swatches to appear.
