Compatibility: Dawn version 2.5 above and any Shopify 2.0 FREE themes
When setting up an e-commerce store, it's important to provide your customers with a clear and comprehensive product page that showcases all available variants. However, sometimes a single product may have multiple variants that differ in color, design, or other features. You can easily separate each variant by its specific feature by using the code below.
If you do not want to separate the variants by color or any specific feature, you can use the product variant collection for all variants.
To implement the secondary image, we can modify your store's liquid code to include the secondary image in the product's HTML markup. This can be done using a conditional statement that checks whether the variant has a secondary image defined in its metafield. If it does, the code will generate an HTML element that displays the image on hover.
We use the following variant metafield below to show a secondary variant image.
Additionally, you can check out our demo store, which showcases this feature in action. To access our demo store, please use the password 'made4uo'.
What you are buying:
- A collection of instead products, it will show product variants with color or type (depending on which option you want to show)
- Will show the first second variant option, e.g. S for size option
- You will need to provide featured images to the variants
- Use metafield variant image to provide hover image
- Assign which option you want to separate using the theme editor
- Hide all variant title or show color title only
- Option to hide the "out of stock" variants, not products
- Filters works with products only therefore it will not filter by variant
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, create a section, name it collection-variant-color.
3. Replace the default code with the code below
4. If you want to assign this collection template as a default, then follow the video.
If not, we need to create a new collection template. Open and copy the code in the "collection.json" under the Template folder. Then paste the code to the newly created template.
Inside the newly created template, find this code "main-collection-product-grid" and replace with the name "collection-variant color".
5. We need to make a code snippet. Go to Snippet folder, create a new snippet, name it variant-card.
6. Paste the code below to the newly created snippet. Make sure to SAVE.
7. Please make sure to customize the theme. We provided more options to suit your needs.
That is it (",)