Code involved: CSS, HTML, Liquid
Theme used in the demo: Debut
This tutorial will cover how to add the other color variations you have in a product style on the product grid. For example, say you sell a solid color T-Shirt that comes in White, Blue, Yellow, and Green. You would most likely set this up as one product with 4 color variants.
On your homepage or collection grid, the customer will only see the main image (one color). One solution is to show what other colors are available in the product grid, such as in the image below.
- In the code editor, locate the snippet to show the product card on the product grid. In the Debut theme, it is called product-card-grid.
- Below the code where the price is shown, add the following code:
The above code will only work if you named your variant option as "Color". If you named it something else, just replace the word "Color" in the above code with the word you used.
A quick and easy way to improve the customer experience on your site and to make sure you're not missing out on sales because a customer makes the assumption you don't have the color when browsing across your site.
We would love to see how you used this code, add your store in the comments. If you're having any troubles include any questions and comments as well.