d
Topic
Posts:
3
10 days ago

Displaying color variants as individual products on custom collection page

I'm having some difficulty in creating a shoe store for a client.

FIrst off, they needed a "shop all" page to display all products on a page, but each product needed to be in it's own collection. For example, we have 2 collections currently - Low Tops and Hi Tops. So the first section will show Low Tops, then list every product, then a second section Hi Tops, then display all products in the Hi Tops collection.

I was able to do this, but now they want the ability to show each color variant as an individual product. For example, let's say we have a shoe called Shoe One that comes in two colors 'white' and 'black'. This Shop All page should display the product Shoe One as 2 products, one for the white variant and one for the black variant.

Here's an example of another shopify store that is doing this: https://www.koio.co/collections/collection-men

Here is the original code I wrote to pull in the collections and display them as individual products:

<div class="full-width-desktop-padding" id="Collection">
    <div class="section-header text-center">
      <h2>Shop All Collections</h2>
    </div>
    {% for collection in collections %}
    <div class="collection-wrapper">
      <div class="section-header text-center">
        <h1 class="collection-title">{{ collection.title }}</h1>
      </div>
      <ul class="grid grid--uniform grid--view-items">
        {% for product in collection.products %}
        <li class="grid__item grid__item--collection-template small--one-half medium-up--one-quarter">
          {%- assign max_height = 300 -%}
          {% include 'product-variant-card-grid', max_height: max_height %}
        </li>
        {% endfor %}
      </ul>
      <div class="grid__item medium-up--eight-twelfths medium-up--push-one-sixth"><hr /></div>
      <div class="clearfix"></div>
    </div>
    {% endfor %}
  </div>

I've tried multiple ways of editing that block of code above to run an if/else statement inside to check if a product has more than one of the variant option 'Color': if only one color variant, display product as normal, if more than one color variant, display the product with the color variants as individual products and also display the variant image as the featured image.

This is the latest code I've tried, but after a whole day of attempts, I still can't get this working.

<div class="full-width-desktop-padding" id="Collection">
    <div class="section-header text-center">
      <h2>Shop All Collections</h2>
    </div>
    {% for collection in collections %}
      <div class="collection-wrapper">
        <div class="section-header text-center">
          <h1 class="collection-title">{{ collection.title }}</h1>
        </div>
        <ul class="grid grid--uniform grid--view-items">   
          {% for product in collection.products %}
          	{% capture colour_variant %}
            {% for variant in product.variants %}
            {% for option in variant.options %}
            {% if product.options[forloop.index0] == 'Color' %}somestring,{% endif %}
            {% endfor %}
            {% endfor %}
          {% endcapture %}

          {% assign colour_variant_split = colour_variant | split: 'somestring,' | uniq %}
          {% assign colour_count = colour_variant_split.size | minus:1 %}

          {% if colour_count == 1 %}
              <li class="grid__item grid__item--collection-template small--one-half medium-up--one-quarter">
                {{ colour_count }}
                {%- assign max_height = 300 -%}
                {% include 'product-card-grid', max_height: max_height %}
              </li>	
            {% else %}
              {% for variant in product.variants %} 
                {% assign featured = variant %}
                  <li class="grid__item grid__item--collection-template small--one-half medium-up--one-quarter">
                    {{ colour_count }}
                    {%- assign max_height = 300 -%}
                    {% include 'product-variant-card-grid', max_height: max_height %}
                  </li>
              {% endfor %}
            {% endif %}
          {% endfor %}
        </ul>
        <div class="grid__item medium-up--eight-twelfths medium-up--push-one-sixth"><hr /></div>
        <div class="clearfix"></div>
      </div>
    {% endfor %}
  </div>

If it helps, all products have the first variant option as size, and second variant option as color.

Any help getting this working is greatly appreciated!!

i
Replies
Posts:
2392
8 days ago
g
1
upvotes

Kevin, I'm usually using code similar to this: https://dylanjh.com/blogs/15-show-all-colors-of-a-product-as-separate-products-on-the-collection-page

The idea is to basically for each product loop over variants, get variant color and output this variant if color not in the list of colors for this product (and then add this color to the list), so no color gets output twice.

{% for product in collection.products %}
{% for option in product.options %}
   {% if option == 'Color' %}
   {% assign index = forloop.index0 %}
   {% assign colorlist = '' %}
   {% assign color = '' %}
   {% for variant in product.variants %}
   {% capture color %}
   {{ variant.options[index] }}
   {% endcapture %}

     {% unless colorlist contains color %}
        <-- INSERT PRODUCT LOOP -->
        {% capture tempList %}
      {{colorlist | append: color | append: " " }}
      {% endcapture %}
      {% assign colorlist = tempList %}
      {% endunless %}
      {% endfor %}
    {% endif %}
  {% endfor %}
{% endfor %}

The idea is to basically for each product variant get its color and output this variant if color not in the list of colors for this product (adding this color to the list), so no color gets output twice.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Posts:
3
8 days ago

Wow thanks so much Tim for linking that code!

Got it working perfectly first try!