Display all product variants as single products in collections

[Manali1]

Dear All,

I have a product with 2 colors (pink and blue) and use the color swatches and variants in one master product.

This works well and look nice but my problem is that I would like to display the product in the collection 2 times, 1 time with the blue, the other with the pink color. It should still have the same master product and stock but only display both variants.

Is there an "easy" way to display the product twice?

Thank you in advance.

Kindest regards,

Karsten.

[rustcity · Accepted solution]

You could simply have 2 different products.

Otherwise, you'd need some templating that makes a fake collection page out of said product variants.

Both are doable!

[rustcity · Accepted solution]

You could simply have 2 different products.

Otherwise, you'd need some templating that makes a fake collection page out of said product variants.

Both are doable!

[Manali1]

Yes ;), but I do not want to create a 2nd product as I get problems with the inventory at least when I keep the two color swatches, which I normally would like to do (using the nice functionality from shopify 2.0).

How does this fake collection page work?

Thank you in advance.

Kind regards,

Karsten.

[rustcity]

a typical template for viewing a collection renders all products within a collection.

we can fake a collection by:

1)create a collection page of one product. 

2) embed the product into the collection template. 

3) change the collection template to loop through the variants in the product ( not the products in the collection) and render each of its' variants (as a fake product). 

4) for linking to the product form/buy page -- you can simply link to the normal product template with the variant id in the link ?variant=123456789

5) remove any option field selectors for said variant in the product-form page (it would be redundant to keep them)

[Emily · Accepted solution]

Hey, @Manali1.

Thank you for reaching out! Thank you, @rustcity, for the help. 

I suggest creating a second product if you would like to have both shown on the product or collection page. Due to the color being a variant, it won't show twice. You could hire a Shopify Expert to complete this customization. Experts are trusted third-party developers who can help with complicated tasks on your website. I will provide this feedback to our team as I think it would be a great feature to have so that your customers can view your variants all on the collection pages. 

Please let me know if you have any further questions!

[made4Uo]

Hi,

Check this code that works without using an APP. It works with Dawn 2.5 and newer, also to other Shopify 2.0 Themes. I added an option to add a second variant image, using variant metafield, so the second image show when you hover.

[BAY_VAPES]

Hi,

Will this work with the Focal theme? I'm having so much trouble trying to have my variants displayed on my collections page.

[MRamzan]

For Focal theme you can follow below video:

[BAY_VAPES]

What if the variants aren't colours but flavours?

[MRamzan]

We can separate the product with any type of variants like size, color, flavours etc.

[Clarko]

Good afternoon,

Do you know to get this to work with the Prestige theme? 

Thanks,

Sam

[MRamzan]

Yes I can do it for you.

[MRamzan]

Here is the video for Prestige theme:

[Notre]

Is it possible to do so that customer will still be able to see the different colors below each picture/variant? And the same on the PDP, the customer should still be able to switch between colors. 

Thank you 🙏🏼

[veranith]

Hello MRamzan

Will your code work on the latest Prestige version (9.3.0 to date) ? 

Thanks 

Veranith

[MRamzan]

I will recommend a video to follow where you can just copy and paste the code according to the theme which you are using. Same thing I had needed in my store. There was a paid App and that was charging 30 USD each month so I was frustrated also.

Here is the playlist of videos with different themes: https://youtube.com/playlist?list=PLB3Vs7gvGQUd81oa8gQvbfOc0nt1sgN62

[Carlo_Hive365]

Have you got the code available for the Turbo 7.0 theme?

[MRamzan]

I can create it for you. Add me as a staff.

[aditiagrawal]

Hello,

I am trying to list my variants as different products on collection page in Venue Theme.

Please guide me to do the same.

[MRamzan]

I will have to check your code. If possible then please add me as staff.

[itsthea]

Hi! Do you have instructions for the CRAFT theme? 🙂 

[MRamzan]

Here is the video for Craft theme:

[PTG_Tina]

Hi - do you know if there is a way to manually sort the products so that all the variants don't show up next to each other? For example, if we have a product that has seven color variants, the variants will all show up next to each other.

Thanks so much!

[MRamzan]

Yes we can randomize the products.

Here is the code below but if you don't understand then I can help you to solve.

<script>
  // Global Variables
  var variantGrd = document.getElementById("color-variant-grid");
  var variantGrdMain = document.getElementById("product-grid");
  
  function randGrid(variantChildrenVal) {
    return [].slice.call(variantChildrenVal).sort(function () {
      return Math.round(Math.random()) - 0.5;
    });
  }
  if(variantGrd) {
    var variantChildren = variantGrd.children;
    var randomList = randGrid(variantChildren);
  
    for (var i = 0; i < randomList.length; i++) {
      variantGrd.append(randomList[i]);
    }
  }

  if(variantGrdMain) {
    var variantChildrenMain = variantGrdMain.children;
    var randomListMain = randGrid(variantChildrenMain);
  
    for (var i = 0; i < randomListMain.length; i++) {
      variantGrdMain.append(randomListMain[i]);
    }
  }

</script>

[Jasmineau99]

how to show for broadcast theme by invisible?

[Emmacole22]

Hi! Thank you so much for providing the above blog post! It was extremely helpful! 😊 I am now wondering how to change the number of products displayed on each page of the website. Before I added the above code to display all of the variant colors as separate products there were consistently 16 products on every page. But now that I am showing every variant color some pages have 30 items, some have 25, and it is no longer consistent because each product has a different number of variant colors. Is there a way to fix this so all of the variant colors are still shown as separate products but each page has a uniform number of products displayed? Hopefully my question makes sense. Thank you so much for your help. 

[MRamzan]

Hello

Yes we can put limit inside the collection code settings.

There you will find number of products to show. Let  me know if you still need any help.

Thanks

[MRamzan]

Here is the solution without App:

You can find this feature for any theme:

https://www.youtube.com/playlist?list=PLB3Vs7gvGQUd81oa8gQvbfOc0nt1sgN62

Here is an example:

[hassaan_frdev]

Hello,

Can You tell me ,how can I show the all variants as a product on collection page, I want All the variants ,not the selected one .

please help me to solve this.

[MRamzan]

Yes we can display all of them as well.

[made4Uo]

Just for future shopify store owners. Not all people know about this. but all Shopify FREE themes, like Dawn, Craft, Refresh, etc share the same codes. No need to have different codes for every FREE themes. And please beware when adding custom codes to your store, some developers uses JavaScript codes instead of liquid code that only slows your website, and lowers your SEO ranking. (",)

[MRamzan]

I never used any javascript code. It is all liquid code fully optimized. To randomize the products we need to write above line. Those helps to make the variants display randomly. Thanks.

[made4Uo]

Sorry. I never mentioned a name

[Parallel51]

Hi Sir,

Would you please also share me how to work it on Ari theme? Much appreciated!

Have a nice day!

[KabirDev]

Just dropping a quick video here. It'll guide you on showcasing every product variant and price on your Shopify collection pages.

[Jasmineau99]

is that any way to apply for invisibile - broadcast theme?

[BruceS89]

Find this code in your main-collection-product-grid.liquid file;

{%- for product in collection.products -%}

Add this code next line;

{%- for variants in product.variants -%}

Then, find the following code (a few lines below the code above);

{% 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,
skip_styles: skip_card_product_styles,
quick_add: section.settings.quick_add,
section_id: section.id
%}

And replace with;

{% render 'card-product',
card_product: variants,
card_product-title: 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,
skip_styles: skip_card_product_styles,
quick_add: section.settings.quick_add,
section_id: section.id
%}

(You will also need to add another {% endfor %} slightly further down because we added {%- for variants in product.variants -%} above.)

AND, you will need to alter the card-product.liquid file.

Find the following code;

<div class="card__content">
<div class="card__information">

and replace the whole h3.card__heading element and everything in between with the following;

<h3
class="card__heading title{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
{% if card_product.featured_media or settings.card_style == 'card' %}
id="title-{{ section_id }}-{{ card_product-title.id }}"
{% endif %}
>
<a
href="{{ card_product-title.url }}"
id="CardLink-{{ section_id }}-{{ card_product.id }}"
class="full-unstyled-link"
aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
>
{{ card_product-title.title | escape }}
</a>
</h3>

<h3
class="card__heading colour{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
{% if card_product.featured_media or settings.card_style == 'card' %}
id="title-{{ section_id }}-{{ card_product.id }}"
{% endif %}
>
<a
href="{{ card_product.url }}"
id="CardLink-{{ section_id }}-{{ card_product.id }}"
class="full-unstyled-link"
aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
>
{{ card_product.title | escape }}
</a>
</h3>

But please note this will change all your collection product lists.

[BellaCosi]

Hi Bruce - thanks for the explanation and instructions. It works well.  Do you have a recommended way to only split by one of the variant attributes so that colours are separated but not sizes for each colour?