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!
Hey! Great video; it worked, but I have one problem. I have two photos per product, and it's showing a black photo for a white product t-shirt in the extra photo.
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!
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?
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
Great tutorial. After splitting the variants into different displayed products, is there a way of only adding one variant to the collection page instead of all the variants? E.g. I want to separate jewellery product variants by colour i.e. silver and gold and then add the separated variants to separate collection pages.
Yes it's possible I think the best way to do that is through custom code that shows only specific variants. Another way could be through using the collection filters, maybe the link changes when you filter by gold color, then you can add that link to the navigation menu, but I can't give you more information about it I never tried it on the Free themes. But you have a clue for your research :-)
@@amine-ammariI have tried the link method but that link expires after a while. Do you know by any chance where I edit the code that you gave to be able to do that?
Unless you know how to code telling you where isn't really helpful, you can start in the files that we edit in the tutorial If this feature is really important I highly encourage you to hire a developer
Brother, I followed your steps and the work was done. But the thing is that the team wants me to go to the previous version for some testing stuff, and I didn't backup the code that was there by default. Can you provide the default code which will make me go to the original state i.e. the variants being shown as a single product. Would be a great help!!
You can restore a file to its original version on the top left under its title or you can download a new version of the same theme and get the file from there but this may require a dev's help I suggest you hire one, I don't have the original code
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?
Super helpful! We followed the steps and were able to create separate products, but on the button that typically says "choose options," it says the following: Choose options Liquid error (snippets/card-variant line 205): Could not find asset snippets/loading-spinner.liquid
Hey! “Hey! The variant products aren’t displaying on the homepage, but if I access them through the menu, they show up. I’ve linked the ‘All Products’ collection to the homepage, but it’s not displaying there, even though it appears when accessed through the menu.”
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?
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!
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.
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.
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
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.
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
This tutorial is a life saver... however, I dont have a main collection page.. my menu is a mega menu with 1 main header then products are seperated into categories which then shows the collection. How do I get this code to work with my setup?
@@amine-ammari Thanks for getting back to me. My collects all use the same template "Default Collection" and my item variation is named "Finish" so I have followed your tutorial but changed "Color" to "Finish" unfortunately this is not working for me, do I need to do anything differently?
@@EmeraldFlooring Make sure the spelling is correct Capitalization included If you are open to pay a dev to help you You can reach out amineammari.com/contact/
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.
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, 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?
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?
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.
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
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?
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?
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.
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!
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
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
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
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.
Unfortunately, the filters (Search&Descovery) do not work correctly anymore, because they output products and not variants. Can you help me with that, thanks!
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?
super helpful. can i ask why if i go on the website collection it doesn.t show me the variant, but if i entrer the collection page from other buttons it shows the variants?
@@amine-ammari problem solved, thank you so much. Can’t wait for other videos like this!💪🏻 Can i ask if it’s possible to have the video about how to change color of the product from the collection pages pr home page and not only from the product page please? Thanks a lot
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
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
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?
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?
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
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
![How To Show Selected Variant Images [Dawn 15.1.0]](http://i.ytimg.com/vi/uDjviY12SiU/mqdefault.jpg)
![How To Show Selected Variant Images [Dawn 15.1.0]](/img/tr.png)
29/09/24 Edit: This feature now works with color filters
Thank you so much brother.
Thank you to share your good work for free!! Great job!
Brilliant, exactly what I was looking for. Thanks.
i was searching for this tutorial for a long time thank you .
Really appreciate your work, man! Thanks a lot ❤
amazing! saved me $60 a year on plugins
Very simple and assertive way
I just have 1 query
If I want 2 Variation ie, Color and Size, how can that be done ?
You will need to hire a dev, this code is only for one option at a time
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!
Not with this code, you will need to hire a developer for that
@@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!
Thank you sirr! this worked really well and i am using the Ride theme 13.0.1
Thank you!!
Thank you very much ! 🤩
Amazing video
Genius! straight to the point, thank you!!
Works great, thanks! Is it also possible to use multiple variants? Like color and size?
Yes it's possible but you need to write more code
Thanks! Really helpful!
Thank you for saving my day!!
Love this!
Glad it was useful for you 😄
Your AMAZING Thank You 🙏🙏🙏... It's been driving me Nuts 🤬🤯 in the past 24hours 😬... So helpful
Glad it helped! 😀
Same here 🤯
exactly what i needed. Thanks man.
Thank you very much for sharing this, very usefull. Is there any way to display the variants in a featured collection?
Yes but you will need to write code or hire a dev for it
So helpful! Thank you so much!
Anytime Enya 😄
You are the best brother !!! Thanks !!
Thanks brother
Thank you so much! Can we have multiple images (front/side/back) per each variant?
Glad it was helpful 😄
Yes, it's possible, but it's going to require some custom coding.
I have the same problem, can you help me so I can choose multiple images in the variants section?
Hey! Great video; it worked, but I have one problem. I have two photos per product, and it's showing a black photo for a white product t-shirt in the extra photo.
This code doesn't fully support the hover feature unfortunately
Hi. Thank you for this video. The suggested changes seem to not work for Spotlight theme. Please recommend on a solution
I would recommend hiring a dev or using an app
This is awesome!!! - would this work for SPOTLIGHT theme as well?
Yes
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!
This code doesn't support multilingual stores
You will need to hire a dev to add that feature or use an app
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?
No, not with this method
You will need to create each one as a separate product
Thank you so much!! Is there a way to also have the variant color selector appear on the collection page?
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
Great tutorial. After splitting the variants into different displayed products, is there a way of only adding one variant to the collection page instead of all the variants? E.g. I want to separate jewellery product variants by colour i.e. silver and gold and then add the separated variants to separate collection pages.
Yes it's possible I think the best way to do that is through custom code that shows only specific variants.
Another way could be through using the collection filters, maybe the link changes when you filter by gold color, then you can add that link to the navigation menu, but I can't give you more information about it I never tried it on the Free themes.
But you have a clue for your research :-)
@@amine-ammariI have tried the link method but that link expires after a while. Do you know by any chance where I edit the code that you gave to be able to do that?
Unless you know how to code telling you where isn't really helpful, you can start in the files that we edit in the tutorial
If this feature is really important I highly encourage you to hire a developer
Ok, thanks for your help
Brother, I followed your steps and the work was done. But the thing is that the team wants me to go to the previous version for some testing stuff, and I didn't backup the code that was there by default.
Can you provide the default code which will make me go to the original state i.e. the variants being shown as a single product.
Would be a great help!!
You can restore a file to its original version on the top left under its title
or you can download a new version of the same theme and get the file from there but this may require a dev's help I suggest you hire one, I don't have the original code
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?
Yes you can do that but you will need to hire a developer to do it
Super helpful! We followed the steps and were able to create separate products, but on the button that typically says "choose options," it says the following:
Choose options Liquid error (snippets/card-variant line 205): Could not find asset snippets/loading-spinner.liquid
Can you please install the snippet again on a new theme and try again
It worked for me collection page but when I want to display collection on my main page it still shows only one product. Do you know the solution?
This tutorial is only for the collection page , I don't have the code for the homepage
This is great! Thank you
😄👍🏼
Hey! “Hey! The variant products aren’t displaying on the homepage, but if I access them through the menu, they show up. I’ve linked the ‘All Products’ collection to the homepage, but it’s not displaying there, even though it appears when accessed through the menu.”
This only works on the collection page
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?
It's probably not caused by the code changes, please make sure the products are active products and that they are in stock
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 for the feedback and for the suggestion Nico.
I made a short on how to add an upsell to the product page, but not with a checkbox
@@amine-ammari Thanks, I'll check it out
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!
Thanks Jesus for the feedback on the video
To be honest I don't know why it's happening, maybe try to change it again
Awesome! Will this work on Focal Theme?
No only the free themes
Hello There,
Thanks for the tutorial
If i have 6 colors and i want to add just 2 colors as separate products, What change i have to make in the code?
You'll need to hire a developer to implement this logic
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?
Hi,
Glad it was useful!
Unfortunately, this will require custom coding if you want to duplicate different variant options on the same collection page.
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.
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.
Yes there is a way but I don't have the instructions for it
@@amine-ammari I would love a video about that too
you saved my life
Help! There's no card-product on the main collection grid :(
{%- liquid
assign option_chosen = "Color"
assign option_index = ''
for option in product.options
if option_chosen == option
assign option_index = forloop.index0
break
endif
endfor
-%}
{%- if option_index == '' -%}
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
{%- else -%}
{% assign displayed_values = "" %}
{% for variant in product.variants %}
{%- liquid
assign variant_option = variant.options[option_index]
assign valueIsDisplayed = false
for value in displayed_values
if value == variant_option
assign valueIsDisplayed = true
break
endif
endfor
-%}
{% unless valueIsDisplayed %}
{%- assign variant_option_arr = variant_option | append: ';' | split: ';' -%}
{% assign displayed_values = displayed_values | concat: variant_option_arr %}
{% assign image_url = variant.featured_image | img_url: 'medium' %}
{% render 'card-variant',
card_variant: variant,
card_product: product,
variant_option: variant_option,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
{% endunless %}
{% endfor %}
{%- endif -%}
Please make sure yo uare using a Free theme like Dawn
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
Yes you will need to remove the out of stock code from the card-variant.liquid
You will need to hire a dev if you can't code
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.
@@shanshanzk
I'm glad your issue is solved.
To answer your question, no, that's not possible to add directly the variant with this code snippet.
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
Yes
You will need to hire a dev to fix it
This tutorial is a life saver... however, I dont have a main collection page.. my menu is a mega menu with 1 main header then products are seperated into categories which then shows the collection. How do I get this code to work with my setup?
Just make sure that your collections use the same page template and it should work properly
this can work on multiple collections at the same time
@@amine-ammari Thanks for getting back to me. My collects all use the same template "Default Collection" and my item variation is named "Finish" so I have followed your tutorial but changed "Color" to "Finish" unfortunately this is not working for me, do I need to do anything differently?
@@EmeraldFlooring
Make sure the spelling is correct
Capitalization included
If you are open to pay a dev to help you
You can reach out
amineammari.com/contact/
Thanks for the video. What if I want to showcase the variant colors on the home page?
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.
@@amine-ammari it would be awesome to get this working on the home page, is it very difficult?
@@CadencePrints
If I update the video I will make sure to add this feature
Is it also possible to upload all variants as products and then link them to each other? So then you can have product urls and images per color
Yes it's possible you will need to write code for that or use a combined listing app
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.
If you want better SEO, you must create each color as a separate product in the admin panel.
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?
You must have made an error in naming the file
card-variant.liquid
Please make sure it has the correct name without misspelling
It works fine. But how about filtering? Suppose if i select "white" color, only white variants shoud show.
Unfortunately, it's not compatible with filtering.
Bro thank you so much!!!!
Happy to help 😄
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?
Hi Ivan,
Please make sure you are using a free theme like Dawn and not a premium one.
This solution only works with free themes.
Hi,
This issue is fixed now
I updated the code snippet, you need to re-install it again
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.
Does this coding change make changes to all the product pages in all the collections? Or do I have to do it for each product page? Thank you.
you've to do it only once
this is helpful thank you
What about multilingual sites. What should we write in the snipet instead of "color"
My code snippet doesn't support multilingual sites unfortunately
You will need more code edits
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
Yes, it's possible but it will need some extra code edits.
I recommend you work with a dev.
if you cant help me, i wont work with a dev just for that, but anyways thanks a lot, i might try to figure it out myself..@@amine-ammari
Thanks for the tutorial. I have a problem, it don't show the variants on the search page of my website. Can you help?
I don't offer free individual support
If you want to hire you can reach out here
amineammari.com/contact/
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?
You will need to hire a dev
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?
Yes I recommend hiring a developer for that, you can reach out to
amineammari.com/contact/
The actual Sale badge is not visible on the product after adding the code.
Yes since you will need to adjust the code for it
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.
Hi,
This issue is fixed now
I updated the code snippet, you need to re-install it again
Hey, I can't find the Main-collection-product-grid for some reason. I have tried to searched everywhere
Hi,
You are using an old version of your theme.
Please update your theme to a recent version.
I want to sync two different product's stock changes. If any of them change, the other one must change the same. How can I do it?
I don't know maybe there is an app to do it
hey, will it work for Minimog Theme, or any other theme?
No only free themes
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!
Yes it's possible but you need to write more code to make that work
@@amine-ammari okay. Do you have a tutorial for this? I´m not that fit in programming in Liquid
@@bastianmiehling1181
No I don't, you will need to hire a dev
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
I don't have the code for that
When I update the video I'll make sure to add this feature
thanks
@ 2:32 instead of searching for grid, search for "featured" and click "Featured-Collections.liquid" then do the same steps in the video.
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 only compatible with Free themes, it won't work on minimog
muito obrigado te agradeço de coração do brasil♥
Hey how can I add a select size option before adding shirt to the cart ????
You will need to hire a developer to add that feature, I don't have the code for it
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
@@amine-ammari Hi Amine, thanks for the tutorial!!! Have you been able to resolve this issue?
@@James-tb7hv
Not yet James
Can I do this for specific products only?
Yes but you will need code edits
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.
Here is a video that I found that may help you
ua-cam.com/video/AIufjwcEBMM/v-deo.htmlfeature=shared
Liquid syntax error (line 226): 'endif' is not a valid delimiter for for tags. use endfor how to fix???
Please make sure you are using an up to date version of the free themes.
Can we add different products as a variant of one another on the product page
Yes but it will require custom code edits
If you're looking to hire a dev, I'm available to help you with your project.
Unfortunately, the filters (Search&Descovery) do not work correctly anymore, because they output products and not variants. Can you help me with that, thanks!
This feature doesn't support the filter unfortunately you will need to write additional code to make it work with the filter
Thx
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?
I updated the code to fix this error, please replace the old code snippets with the new ones
Or install the new code snippets in a new theme
Is it working broadcast theme ?
No only the free themes
Great, I need it for hello theme, need help.
I don't have the code for hello theme unfortunately, you will need to hire a dev or use an app
Hello. Can I make differnet photos for collection based on website language.?
Yes search for Shopify markets
How to show size variants in collection page Below price in shopify?
you will need to write additional code
super helpful. can i ask why if i go on the website collection it doesn.t show me the variant, but if i entrer the collection page from other buttons it shows the variants?
Hi Filippo,
Glad it was useful 😄
Please make sure that both pages have the same address, it must be a different page
@@amine-ammari if not how do i change it?
@@Businessbacked Change the address of the link in your theme customizer or in your navigation settings
@@amine-ammari problem solved, thank you so much. Can’t wait for other videos like this!💪🏻
Can i ask if it’s possible to have the video about how to change color of the product from the collection pages pr home page and not only from the product page please? Thanks a lot
It's in the pipeline thanks for the suggestion
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
thank you so much for the extra help!
@@amine-ammari
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
This tutorial works only on the Free themes, please use a theme like Dawn to follow along.
Will this work with MINIMOG theme?
No for free themes only
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?
Hi Ryan,
You can either show each color or each variant but not both at the same time with this script.
It worked but I have 3 collections and it split every single one of the collections. 'm looking for only 1 of the 3 to serperate
You will need some code edits to build that
@@amine-ammari do you have a recommended video for that?
@@MishaZam300 No you'll need to hire a developer
This works except the listing with "no variant" appears on the page as well. Anyone else experiencing this?
You can simply remove the products with no variants from your collection page.
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?
If you have variants the choose option will always appear instead of add to cart
You will need to write custom code to change that
@@amine-ammari I dont know how to write any code.. I just want the button to say add to cart and put the variant shown directly into the cart
legend
Ratings are not displayed anymore?
Try to install the app again
can you teach me how to setup pixel twitter without app ?
Hi,
If a lot of people have this issue I will make a video on the topic
Thanks for the suggestion
Hi, do I need Shopify Premium for this to work?
No you just a to use a free theme
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.
They lost their images because they didn't have a variant
featured image, so please attach images to the variants in your product settings.
thank you!@@amine-ammari
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
can you make a video this for product page ?
Thanks for the suggestion I will keep it in mind
niiice one bro
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
Hi,
Thanks for your feedback. I wasn't aware of these issues.
If I update the video I will try to solve them.
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
@@gameskills8006 28th September is not the last update it's the publish date.
It doesn't show the edit date.
@@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
you are God!!
Amine, the variants does not appear in different language. You can help me?
Solved.
assign option_chosen_1 = "Color"
assign option_chosen_2 = "Cor"
assign option_index = ''
for option in product.options
if option_chosen_1 == option or option_chosen_2 == option
assign option_index = forloop.index0
break
endif
endfor