Hello and thanks for the video, unfortunately I don't have an image for each variant, is it somehow possible to edit the main-collection-product-grid code so that the main image is displayed?
It perfectly worked, however, if I'm adding another language to my online shop, the products don't show up as color variants separately. Is there any solution to adjust the code option to the selected language? Thanks in advance!
Do you know if this would help with SEO? What I mean is Google indexing each variant and show it in search results. This is a big problem of how Google is indexing Shopify products with multiple variants: it will just index the main "parent" product and it ignores individual variants.
Hello! This worked perfectly but some colors that are "Sold Out" Does not seem to show the "Sold Out" badge on the collection page. How can I add that or make it opaque? *Using Dawn Theme
Hey, this is a great solution, but it's not compatible with the new Shopify Search & Discovery App. When I use the "color' filter on the store front, all three variants of the same product show up because of the code. Is there a way to fix this?
Thank you, it worked well. But now I have all colors of an article in a row in the collection list. Is it possible to totally mix the sorting of these colors/articles so that they are randomly sorted and preferably no two colors/variants next to each other?
I am using minimog theme. And in it there was no card-product found. I tried editing even then. It was successful but there was a error showing below each product and the size of the product was fully zoomed
This is a fantastic video! Could you please explain how to display both the COLOR and SIZE variations as well as separate listings at same time? Thank you!
@@amine-ammari That was expected! :) Anyway, thank you so much even for this one option. It changed my website tremendously, as I have a lot of colors. Can’t hire anybody for now. I have to keep the budget tight when the business is launching to increase my chances of success. So I’ll keep to the Pareto Strategy: 20% effort for 80% efficiency. Thanks again!
Help please! I want to select for which product I want to show Varients. Also if there is 5 varients of the a product and I want to show only 2 varients in collection page, then how to do this?
I'm getting this error "Liquid error (snippets/card-variant line 246): product form must be given a product" under each product in the catalog how should I fix it?
Is there a way to add different name to each variant? Completely different name? Not “product”-“name(red, or something else). Just the name , because for each color i want to name the product differently
Unfortunately, the filters (Search&Descovery) do not work correctly anymore, because they output products and not variants. Can you help me with that, thanks!
Hey man great tutorial but i want the variant to show on even featured collection page or when you search it on store but it is appearing only on collection page Can you help me with that
Did this and tried to enable add to cart button but it only has choose options, How can I have an add to cart button that adds strait to cart instead of choose options?
Hello, thanks for posting this! I'm getting "snippets/card-variant.liquid' does not exist" error on row 215 on main-collection-product-grid.liquid. What would you suggest?
Thank you so much. This works great for the variants that match "Color" exactly. However, any products that have different variant titles or no variants are no longer showing up in their collections. Do you know why this is?
Now i can see the products but got an error message, that the loading-spinner missing from the snippets folder. This error meassge appears under the “Choose from the options” button. Can you help me?
Thank you!!!!! Is there a way to show them separately when adding it to the home page "featured collection"? Right now its still showing the one product.
I have a product with 2 colours and 3 sizes, how do I get it to show every size and colour? When I choose color it only shows 2 products in 1 size and when I choose size it only shows 3 sizes in 1 color. I have a product with 2 colours and 3 sizes, how do I get it to show every size and colour?
I am unable to view the photos when i preview but i can click on the item and see the photo. i tried an old them dawn and it work but my paid them kairo didn't work. Do you have any suggestions. Thank you
Hi, Thanks very much I have added your code and it has worked, however the variants are showing out of stock, it seems to be as there is no stock available in size small, is there a workaround so the stock is reported across all sizes
Do you know have to merge 3 individual listings under one parent with variation? i tried exporting files and editing but not working. Your expert advice would be greatly appreciated.
Hi, i do see the variants now on collection but beneath all the pictures on the collection pages there is a box that says: 'Choose options Liquid error (snippets/card-variant line 212): Could not find asset snippets/loading-spinner.liquid'. Am i doing something wrong? I did exactly as you said in your video. @@amine-ammari
@@user-fh9wj2pq3x This tutorial only works for the Free themes like Dawn,Sense ... It won't work on the premium themes If you are using a free theme, please go through the installation process again on a freshly installed theme
Yes it's possible but you will need extra code for that. Instead you can use the add to cart button on the collection page, there is a choose option button that appears
Hey, I keep getting "Liquid error (sections/main-collection-product-grid line 203): Could not find asset snippets/card-variant.liquid" and I am unsure why. I followed each step and it is a new unedited theme. The theme is Sense 12.0.0, a free shopify theme. Thankyou for the help in advance!
Hi Mariely, This tutorial is compatible with all the Free themes like Refresh, Craft, Sense ... But if you have a premium theme you will have to either hire a developer or install a paid app like Variator apps.shopify.com/variants-as-separate-products
Hi There i am looking to purchase the enterprise theme , it will work the same on that them? or there are other steps ? i also want to know if you have a tutorial for showing available sizes on hoover in collection Thank You
Will this work in the enterprise theme? No, this tutorial only works for the Free themes. Unless the theme has that feature built-in, you must hire a dev or pay for an App. --- Concerning the hover thing, I don't have a tutorial for that, thanks for the suggestion.
Thanks for the Code. But I have a question about it. In my shop the hover option is activated. So if you hover over the product the second image is displayed of the product. The Problem is that every variant (color) has the same second image. For Example. I have a Hoodie with the Colors Black, White, Grey and Blue. By hovering over them the image shown is the same. It is another mockup of the Grey Hoodie, because its the second picture of the product. Is there any way to have the right (for the variant) picture displayed? Thanks!
Hi! This was very helpful thank you. However, I am getting the error "Liquid error (snippets/card-variant line 246): product form must be given a product" under each product in the collection page and I am using the free theme "Refresh". Any idea how to fix this?
Hi, Can you please make another duplicate of your theme and go through the tutorial again, maybe you pasted the code in the wrong files, the code snippets work on the Refresh theme.
I have noticed that the product title now includes the color " - white" in my live store even though I did not type it into the title on the back end of the store in product title. Is this a result of the code and how can I remove the color being typed as part of the title? thanks!
Yes it's part of the code search for the text below in the card-variant.liquid file,: {{ card_variant.product.title | escape }} - {{ variant_option }} and delete the - {{ variant_option }} there are 2 or 3 of them in the file
For those who were getting this error: Liquid error (snippets/card-variant line 246): product form must be given a product There was a bug when you activated the Quick Add button feature. I updated the code snippet, you need to re-install the code snippets again (it's better to start from an unedited theme), and that should solve the issue.
Hi there, thanks for the tutorial! I just tried the latest code, however the Quick Add button is not working. The button is there, but it won't add to cart after I clicked it. Also, I am getting this error: Liquid error (snippets/card-variant line 212): could not find asset snippets/loading-spinner.liquid. It will be great if you can let me know how to fix it. Thank you.
@@shanshanzk Hi, Please download a completely UNEDITED/NEW version of a free theme then install the code snippets again. You still have code from the previous version of the code snippets on the theme that has the issue.
@@amine-ammari Thanks for your prompt reply. I tried using a new free theme, and the problem is now fixed👍🏻 But is there any way that the 'Quick Add Button' and directly add that specific variant to cart? Because now it still have that modal pop-up.
perfecto....little help is need. I have color swatches on cards. Now, if I use material as option for displaying variants as product than those swatches are gone. I have customised original product card code with following code, but not sure where to put this such that after this customisation you provided. Little help please? {% for option in card_product.options_with_values %} {% if option.name contains 'Color' %} {% for value in option.values %} {% comment %} VC START below is customisation for displaying variant image based on hovering on swatches in the colletion pages but it is working but associated java script at the end of this page is not working. Hence commented this and that - both codes as well {% endcomment %} {% for variant in card_product.variants %} {% if variant.title contains value %} {% assign variant_image_source = variant.image|image_url %} {% endif %} {% endfor %} {% endfor %} {% endif %} {% endfor %}
Hi, Concerning your problem, you could change this line and replace Color with Material {% if option.name contains 'Color' %} But I advice you to hire a developer to help you, I can't help you further without looking at the whole theme.
Awesome videos. So east to follow and working right out of the box. I just subscribed since I hope you're uploading more videos like this!!!!! Would you be able to add a video on how to add an upsell option to the product page. I'd like to offer another item at reduced costs with a checkbox on the product page and if selected, add main product and upsell item at reduced costs to the cart.
Thanks Amine. Great job and very well explained. Question please: After the change my category page changed from full width page to narrow width. Any idea why? Thanks a lot!
Hello thanks for the tutorial. After applying this code in some product variants "show second image on hover" option doesn't work anymore. When hovering the cursor all the image does is zooming in a bit. How can this issue be fixed? Thank you for your answer.
Hi, The previous version of the code snippets had this issue. I updated the code and this issue is no longer present, please go through the installation process again, and replace the old code with the new one It would be better if you could re-install the code on a new unedited theme so that you don't make a mistake while replacing the code.
@@amine-ammari Hello Amine thank you, it works great! I can see the 2nd image for each variant. However I have a question for you. For a jewelry product I have a gold and a silver variant. Since I can have only one "2nd image" the silver variant shows the same 2nd image as the gold variant, for example the model wearing the gold jewelry. How can I assign separate 2nd images for both variants so that the silver product show the model wearing silver jewelry instead of gold on hover? Thank you for your help!
@@lavendercloud09 The code doesn't have this feature unfortunately You will need to hire a dev or use an app for this. If I update the code I will keep this feature in mind
This code is only for the collection page, if you need it on the home page you will need to write additional code, you will need to hire a dev or use a premium app.
Hey mate, awesome tutorial. How can I display variants for multiple products, if the products have different types of variant options (flavour, colour) ? For example, I used this tutorial to display Flavour variants for one product, but now I want to do the same thing for my other products that have colour variants, not flavours?
ok thanks. Are you available for hire for custom coding? Also another question; how can I get my variants to show in other collections? Not just in the all products collection?@@amine-ammari
Yes I'm available You can reach out to me on the contact form on my website amineammari.com/contact/ The variants should normally be visible on the other collections as long as the collections are using the same template page.
@@amine-ammari if I want to add multiple ones to that list not just 1 “color” or “size” but many different names of variants to turn into products for many different products
the code has an issue but also working. Here is the issue I met when i added this code and worked and I activated the second image when hovering over the item, it is giving an error, when i also activated the quick ad to cart button, here is the error message:Liquid error (snippets/card-variant line 246): product form must be given a product
This issue is fixed now ✅ You need to re-install the code snippet again, I updated it Thank you so much for pointing out exactly why the code wasn't working 😄👍🏼
@@amine-ammari You are welcome. I just need to replace the new code, but the last update shows september 28th, shouldn't it show yesterday? I might be wrong here, help me out. by the way, thank you for this video, it helped a lot. my website looks like has quadrupled the products now
@@amine-ammari Hey Amine, I know this is a drag but guess what? purpose of the code just stopped working. we are not back to not having the variants separate. it is okay though. I just wanted to let you know
I followed your video and the variants did separate into separate products on the collection page, however, the other products that were in the same collection now have lost there images and it is just a colored square with the name of the product in the square.
That worked!!! Thank you for being so helpful!! I do have the option where you hover over the image and it shows a second image. So now when I have a sweater in white it changes to a different image of the white sweater when I hover. For the new variant image of the sweater in yellow, when I hover it shows the same second image in white as well. Is there any way to change the image when I hover for the yellow sweater to show a second yellow sweater image instead of the same white one?? Thanks!@@amine-ammari
@@brookeinman8618 Glad I could help. No there isn't a way with this code. You will need to hire a dev for it. If update the video I will make sure to add this feature.
Ok, thank you so much for sharing this with everyone! It was extremely helpful! I appreciate you responding to help me trouble shoot. Thanks!!! @@amine-ammari
