Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 15
Due to the recent update in Dawn theme, Dawn version 7.0 will have far different code. See comment below.
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. NOTE: Make sure to edit the Namespace and key to match it 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 are the benefits in having product variants as a separated products:
- Useful for products with multiple variants (e.g., color, size) where each variant deserves individual display.
- Leverages hover functionality to show a secondary image for each variant, providing more information to customers.
What you are buying:
- A collection of instead products, it will show ALL product variants
- The filter works in filtering the product and NOT by 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.
Steps on how to add Product Variant Collection - Show Variants As Separate Products
Step #1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code
Step #1. Create a new section file
In Section folder, create a new section, name it "variant-collection", then replace the default code with the code below.
Step #3. Create / Assigning the template
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".
Step #4. Create a new Snippet file
We need to create a variant card. Open the Snippet folder, and click "Add a new snippet." Name it "variant-card." If you have Dawn version 6.0 below use the code below, if not, please use the next code.
For Dawn 6.0 below
For Dawn 7.0 and higher
Step #4. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Conclusion:
By implementing this code, you can effectively showcase all your product variants within a collection page, enhancing the browsing experience for your customers and potentially increasing sales.
Copied!
4 comments
@DHEL DOMINCIL,
At this moment, the filter does not work with this. I have not get a chance to write a specific filter for this but stay tuned.
Cool tutorial! I do have a question:
With the variants showing as individual products on the collection, will the filter(s) for a collection page filter out the specific variants as well?
As an example: If there are several different products that all have a green variant, and customer wants to see only green products, will the filter on the collection page show only those green variants fafter filter?
Hi @Binaebi,
This should work in any Shopify 2.0 FREE themes, since they share the same code, the only difference is the CSS which is not much. Can you message me in “Chat with us” to discuss what gone wrong? Thank you
This did not work with the Studio theme. It broke the collection and won’t show the filters or even the default products. Everything after the collection banner is gone.