Show variants as separate products on collection page

Highlighted
New Member
4 0 0

This is a subject treated before in other forums, but since it's individually applied to the theme design, I need help fixing my specific code. I added the code that shows the variants:

{% for variant in product.variants %}
-theme code-
{% endfor %}

But it's showing the default product image for all variants.
Page: http://to-foundation.myshopify.com/collections/bolsos-stk

This is the complete code on the collection.liquid of the templates:

<div class="grid-uniform grid-link__container">

  {% for product in collection.products %}
      {% for variant in product.variants %}  
    {% include 'product-grid-item' %}

  {% else %}

    {% if shop.products_count == 0 %}
      {% unless emptyState %}
        {{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
        {% assign emptyState = true %}
      {% endunless %}

      <div class="grid__item">
        <div class="helper-section">
          <div class="helper-note">
            <span class="helper-icon"></span>
            <h3>{{ 'home_page.onboarding.modal_title' | t }}</h3>
            <p>{{ 'home_page.onboarding.no_products_collection' | t }}</p>
            <p><a class="admin-btn-primary" href="/admin/products/new">{{ 'home_page.onboarding.add_product' | t }}</a></p>
          </div>

          <div class="grid-uniform helper-content">
            {% assign index = 1 %}
            {% for i in (1..8) %}
              {% case i %}
                {% when 7 %}
                  {% assign index = 1 %}
                {% when 8 %}
                  {% assign index = 2 %}
              {% endcase %}
              <div class="grid__item one-half post-large--one-quarter">
                <a href="/admin/products" class="grid-link">
                  <span class="grid-link__image grid-link__image--product">
                    <span class="grid-link__image-centered">
                      {% capture imageUrl %}//cdn.shopify.com/s/images/themes/product-{{ index }}.png{% endcapture %}
                      {{ imageUrl | img_tag }}
                    </span>
                  </span>
                  <p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
                  <p class="grid-link__meta">
                    <strong>$19.99</strong>
                  </p>
                </a>
              </div>
              {% assign index = index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% else %}
      <div class="grid__item">
        <p><em>{{ 'collections.general.no_matches' | t }}</em></p>
      </div>
    {% endif %}
 {% endfor %}
  {% endfor %}

</div>

I'm using the MINIMAL theme. I'm not sure if I need to change a code here or in the "product-grid-item.liquid" snippet. This is the code:

<div class="grid__item {{grid_item_width}}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ product.url | within: collection }}" class="grid-link{% if settings.collections_center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image grid-link__image--product">
      {% if on_sale and settings.collections_show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and settings.collections_show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="grid-link__image-centered">
        <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
      </span>
    </span>
    <p class="grid-link__title">{{ product.title }}</p>
    {% unless template == "index" %}
    {% if settings.collections_vendor_enable %}
      <span class="grid-link__title grid-link__vendor">{{ product.vendor }}</span>
    {% endif %}
    <p class="grid-link__meta">
      {% capture price %}{{ product.price | money }}{% endcapture %}
      {% if on_sale %}
      <s class="grid-link__sale_price">{{ product.compare_at_price | money }}</s>
      {% endif %}
      {% if product.price_varies %}{{ 'products.general.from_html' | t: price: price }}{% else %}{{ price }}{% endif %}
    </p>   
    {% endunless %}
  </a>
  <form action="/cart/add" method="post" style="text-align:center;">
  <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% else %}
    {% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}
    {% endif %}
  {% endfor %}
  </select>
  <input type="submit" value="Agregar al Carrito" />
    </form>
</div>

Any help is appreciated, thanks!

 

 

 

0 Likes
Shopify Staff
Shopify Staff
119 0 14

Hey Kyle from Shopify here!

We took a look at your code and here is what you can do to get that working;

1) Open "product-grid-item.liquid"

2) Once there insert in:

     <span class="grid-link__image-centered">
  <img src="{{ variant | img_url: 'large' }}" alt="{{ variant.image.alt | escape }}">
      </span>

Instead of the current;

     <span class="grid-link__image-centered">
        <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
      </span>

3) You will want to remove the Jquery Selector and hide the variant being assigned by inserting the following;

  <p><form action="/cart/add" method="post" 
        style="text-align:center;
               font-size: .9em;
  				font-weight: normal;
               top-margin:0px;">
   
  {% comment %} adds variant ID for add to cart button {% endcomment %}
<input type="hidden" name="id" value="{{ variant.id }}">
  <input type="submit" value="Agregar al Carrito" />
  
    </form></p>
</div>

Instead of

  <form action="/cart/add" method="post" style="text-align:center;">
  <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% else %}
    {% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}
    {% endif %}
  {% endfor %}
  </select>
  <input type="submit" value="Agregar al Carrito" />
    </form>
</div>

That should help get everything straightened out for you!

Your Guru,
Kyle

0 Likes
Highlighted
New Member
4 0 0

Thank you Kyle, this works as I wanted! You're great!!

Now I have the following problem due to this change: I have a dropdown to search by color, but now it comes up with all the variants of the product instead of just the one color variant searched for -before it just showed the product. Since it's a search by tags I guess I can't help this, do you know of other codes to search by color?

<ul class="clearfix filters"> 
    <li class="clearfix filter"> {% assign tags = 'Café, Negro, Océano, Rojo, Verde' | split: ',' %}
      <span><label>Buscar por color</label></span> 
      <span><select class="coll-filter">
         <option value="">All</option>
      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
      <option value="{{ tag | handle }}" selected>{{ tag }}</option>
      {% elsif collection.all_tags contains tag %}
      <option value="{{ tag | handle }}">{{ tag }}</option>
      {% endif %}
        {% endfor %} </select></span> 
    </li>
     </ul>

Thank you!!

0 Likes
Highlighted
New Member
4 0 0

I encountered another problem as well, before I was hiding sold out variants from the dropdown menu, but now how do I hide the sold out variant with this new code? (on collection page)

0 Likes
Highlighted
Shopify Staff
Shopify Staff
370 0 32

Hello There, Ben here - your Shopify Guru! 

  For your first post about tag filtering, because you have modified your collection listing to list out all the variants in a product. If you filter a product by a tag it will list out all the variants assiciated with that tag. You would need to add more logic to check the variant options using variant.option if it equals the tag then display the variant. You can see the documention here for variant options. 

You are complicating things by listing out the variants inside your product-grid-item.liquid. To hide the out of stock variants you would also need to add some logic to your loop through the variants using variant.inventory_quantity. Something like:

{% if variant.inventory_quantity > 0 %}
  Put the code that displays variants here
{% endif %]

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
Highlighted
New Member
4 0 0

Thank you Ben, I'll take a look at this and get back to you!

I was able to hide the sold out variants thank you!
But I'm still working on the dropdown, I couldn't make it work, I guess my knowdlegde is too basic for this, any suggestions? Is it better to have a dropdown like the one in the product page?

Thank you!

Sole

0 Likes
Highlighted
Shopify Staff
Shopify Staff
370 0 32

Hey There, 

  Having a variant selection dropdown on your collection page is redundant since you have ever variant listed as a separate product. I would advise you to not include the dropdown on the collection page. You could have the drop down on the product page though. You have made a bunch of edits though so it is hard to say where your codes at now. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

 

0 Likes
Highlighted
New Member
5 0 0

Hey I'm having the same issue/question on my site: http://www.rheosgear.com/collections/rheos-floating-sunglasses

 

I have two Floating Sunglasses product, one with three variations and the other with four variations. I'd like all seven variations to show on the collections page. Any help is appreciated It looks like this response is theme specific.

 

 - Jake

0 Likes
Highlighted
New Member
4 0 0

i am using the testament theme from underground media in the UK and i want to show the different color variants as products on the collection/all page. i am pretty novice at liquid but i really need some help. Can someone help me out please? i cannot find any help in any forum or threads.

 

thanks

0 Likes
Highlighted
New Member
5 0 0

@Brent, I found someone on Upwork.com that was able to help me with this solution, but I was not able to find any plugin or any forum to answer it otherwise. It cost me about 60USD but the solution worked great!

I'm happy to provide you his information if you'd like.

http://rheosgear.com

0 Likes