Showing varations separately on collection page

Excursionist
24 0 23

Good Day,

I would like to ask for some help with regards to this code.

https://ecommerce.shopify.com/c/ecommerce-design/t/show-variants-as-separate-products-on-collection-...

I've been trying to replicate it but to no avail.

I am using minimal theme.

 

Thank you in advance

0 Likes
Shopify Expert
2676 65 665

Hi Gabriel,

the theme has changed significantly since that thread. The current Minimal makes it pretty easy to do this by modifying this code in collection-template.liquid Section

    {% for product in collection.products %}
      {% assign featured = product %}
      <div class="grid__item {{grid_item_width}}">
        {% include 'product-grid-item' %}
      </div>
    {% else %}

 to be like this:

    {% for product in collection.products %}
       {% if product.variants.size < 2%}
          {% assign featured = product %}
          <div class="grid__item {{grid_item_width}}">
            {% include 'product-grid-item' %}
          </div>
      {% else %}
        {% for variant in product.variants %} 
          {% assign featured = variant %}
          <div class="grid__item {{grid_item_width}}">
            {% include 'product-grid-item' %}
          </div>
        {% endfor %}
       {% endif %}
    {% else %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
Excursionist
24 0 23

Thank you! I'll try it out in a bit and let you know. 

Now I know why the code doesn't make sense to me (probably due to me being a newbie on liquid code as well)

0 Likes
Shopify Expert
9807 92 1560

This code can push you closer to hitting Liquid memory limits if you show many products on a collection page, that also have many (many) variants. If you start hitting the limits you'll need to change how many variants you show or opt to show fewer products per page.

There will be some quirks in this approach.

You're going to see different numbers of "products" per paginated page - unless each of your products contain the same amount. It will be a little weird seeing 107 on one page, then 45, 62, etc. Not a deal breaker, more just a visual oddity.

The code won't be correct as is. product.title and variant.title will yield very different results and I doubt you want to show just the variant title. You'll need make changes to how the grid item snippet works with a variant so the title shown makes sense.

Also, the variant doesn't have a featured_image like the product does so the code will need to be adapted for that.

Likely some other little quirks too, but you get the idea.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Expert
2676 65 665

Jason, while you're right that product.title != variant.title, the code actually works (and I actually tested it before recommending (as I usually do if at all possible)), so it looks like calling variant.featured_image is equal to variant.image, though the docs do not suggest this possibility. (example -- last 4 are variants of the same product).

Your other points regarding the number of products/variants per page are valid but I doubt it is possible to do better in liquid only.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Excursionist
24 0 23

Thanks Tim!

It worked like a charm. Fixed my problem (sort of).

I am now trying to modify the code to exclude my other collections. I think utilising tags would be the best solution?

something like this might work? I just have to figure out where to add it.

{% for tag in collection.all_tags %}
    {% unless tag contains 'noshow-' %}
        

 

@Jason

Yeah, I did notice that. Fortunately for me, I don't have lots of items, with lots of variants, on each collection. It doesn't even go past the first page.

0 Likes
Shopify Expert
2676 65 665

If you're looking to have this for some collections and keep the old behaviour for others, you may be better off creating an alternative template and assigning it to those selected collections.

Collections do not have their own tags -- it's just a list of all tags which products in this collection have, so probably not the best choice here. They, however, can have metfields, but not sure if it's the best case for them.

You may assign special tag to products and if this tag is present, show its variants as separate items on collection list -- this may work better. If you exlpain a bit more what you're trying to achieve we can probably suggest a better solution.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Excursionist
24 0 23

My apologies Tim,

I got a bit excited typing there. 

What I meant to say was: exclude my other items' in the same and other collection from getting shown individually.

Example would be:

I have 4 products in "Best" Collection(Product A, B, C & D, respectively and all with variations within). My plan would be to add tags to Product C & D, so that their variants won't show separately on the collection page. Basically, What you would see when you open the "Best" Collection is: Product A & all its variants, Products B & all its variants, Product C (1 main product only) and Product D(1 main product only).

I hope I made sense.

0 Likes
Excursionist
24 0 23

You may assign special tag to products and if this tag is present, show its variants as separate items on collection list -- this may work better. If you exlpain a bit more what you're trying to achieve we can probably suggest a better solution.

Or this works as well. LOL!  

0 Likes
Shopify Expert
2676 65 665

Then it's the job for tags. In my code this line

    {% if product.variants.size < 2%}

can be modified to be like this

    {% if product.variants.size < 2 or product.tags contains "do_not_show_variants" %}

Then you assign "do_not_show_variants" tag to the products you want to be shown as products only.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like