Compatibility: Compatible with Dawn 2.5 to Dawn 6.02 and any Shopify 2..0 FREE themes.
Due to the recent update in Dawn theme, Dawn version 7.0 will have far different code.
You have only a few products but each product has multiple variants? Showcase your product in a collection but its variant. Show variants on collection pages as separate products.
We will displaying variants as products in collection pages with a secondary image on hover. The variant only allows one image currently right? We can add more image using metafield.
This will show all variants in the product. If you want to use color only, please see this code instead.
Note: If your product does not have a variant image, it will display as one product. So make sure you assign an image to your variants.
I used the following variant metafield below.
We have to add metafield to our variant. Then set up our metafield in our product variant. Please see the video for more information.
What you are buying:
- A collection of instead products, it will show ALL product variants
- This still works with filter but number of products is based on products and not variants
- You will need to provide featured images to the variants
- Use metafield variant image to provide hover image
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.
1. Go to Admin store > Online Store > Themes > Actions > Edit code.
2. Go to Section folder, and click "add a new section", name it "variant-collection."
3. 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. (Follow the video on how). 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 "variant-collection".
4. Next, we need to create a variant card. Open the Snippet folder, and click "Add a new snippet." Name it "variant-card."
That is it (",)