Swatches on the shop page
Showing colours on the shop page tells customers a product comes in their colour before they click into it. These settings are at C4D Manager › Variation Swatches › Listing Page and need the free C4D Plugin Manager plugin.
Turning it on
Set Show On Listing Page to on and save. Products with a Color or Image attribute now show a row of swatches below their name in the shop, category pages and related products.
Only Color and Image attributes appear on the shop page. Sizes and other text attributes are left for the product page, where there’s room for them.
When a customer hovers over or taps a swatch, the product’s thumbnail changes to the first photo you added for that option in the Swatch Images box.
Listing page settings
| Setting | What it does |
|---|---|
| Flip Thumbnail | When a customer hovers over a product, show its second gallery photo. A quick way to show the back of a garment or the product in use. |
| Swatch Algin | Align the swatches left, centre or right under the product, to match your theme’s product titles. |
| Display Image instead of Color | For colour attributes, show the option’s first photo instead of a colour dot. |
| Display View More | When a product has many colours, show only the first few and a link to the rest. |
| View More Number | How many swatches to show before the “view more” link. |
| View More Text | The link text, for example “+ more colours”. |
| Color/Image Box Dimensions | Width and height of each swatch on the shop page. |
| Color/Image Box Margin | Space between swatches. |
Tooltips
The Tooltip group sets the label that appears with the option name when a customer hovers over a swatch: its background colour, text colour, font size and padding.
Enable on Mobile shows tooltips on phones too. Phones have no hover, so the tooltip appears on tap. Leave it off if a tap should go straight to the product.
Themes that load products with Ajax
Some themes and filter plugins load more products without reloading the page, with “load more” buttons, infinite scroll or Ajax filters. The plugin needs to add swatches to those new products too. It does this by default when a request goes to admin-ajax.php, set under C4D Manager › Variation Swatches › Support Plugins.
If swatches are missing on products that appear after filtering or scrolling, see Troubleshooting.
Keeping the shop page tidy
- Five or six swatches is plenty. Beyond that, use Display View More so product cards stay the same height.
- Match swatch size to your product images. On a grid of four products per row, 18 to 22 px swatches usually look right.
- Check on a phone. Swatches that are too small are hard to tap. 24 px is a good minimum on mobile.