Show variants as separate products on collection page

Highlighted
New Member
4 0 0

@Jacob - Thanks so much. If you could send me over the contact information, I will reach out to him and report back....

0 Likes
Highlighted
New Member
4 0 0

@Jacob - i figured out how to get the variant to display properly. I now just have to figure out how to hide all the size variants....

 

thanks

 

0 Likes
Highlighted
New Member
4 0 0

@Jacob - 

 

Can you send me the info please to the developer...i am stuck now and cannot seem to hide the size variant. I can get the color variant to show up, just need to hide the size variant. I need this asap for client. if you can send over the info, it would be great...

0 Likes
Highlighted
New Member
4 0 0

@Jacob

Am looking for a similar solution to list the variants on the collection page. Would appreciate if you could give me details of the developer you hired.

Thanks again

0 Likes
Highlighted
New Member
4 0 0

@ Brent,

I noticed you could hide the size variants. Can you share the developer details. Would appreciate your help

 

Thanks

0 Likes
Highlighted
New Member
2 0 0

@ jacob.

 

Do you think you could send me that devolopers info also.

 

Thank you

0 Likes
Highlighted
New Member
2 0 0

Has anyonr successfully implemented this on the testament theme?

If so could they share the code.

0 Likes
Highlighted
New Member
1 0 1

@Jacob

Can I please have their contact! I can't find anyone who can do this. I have testament theme.

1 Like
Highlighted
New Member
5 0 0
Highlighted
Shopify Partner
41 0 3

For Testament, modifiy the collection.liquid adding the 

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

such as to get this 

 {% for product in collection.products %}

           {% for variant in product.variants %}


    {% assign products-per-row = settings.products-per-row %}
    <div id="product-listing-{{ product.id }}" class="product-index {% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
      {% include 'product-listing' %}
    </div>


        {% endfor %}

    {% endfor %}

Obviously you can remove the blank lines, it is just to show better :).

Then modify the product-listing.liquid file at line 16-19 with 

<div class="prod-image">
  <a href="{{ variant.url | within: collection }}" title="{{ product.title | escape }}">
  <img src="{{ variant | img_url: 'large' }}" alt="{{ variant.image.alt | escape }}">
  </a>

If you are featuring products on the home page, you will need to modifiy the homepage-product-carousel-1, 2, 4, 5 as well.

    <div class="collection-carousel desktop-12 tablet-6 mobile-3">
      {% for product in collection.products limit: settings.homepage-product-1-limit %}
             {% for variant in product.variants %}
      <div class="lazyOwl" id="product-listing-{{ product.id }}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
           <div id="product-listing-{{ variant.id }}" class="product-index {% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half" data-alpha="{{ product.title }}" data-price="{{ product.price }}">           
        {% include 'product-listing' %}
      </div>
      </div>
     	 {% endfor %}
      {% endfor %}
    </div>  

note that you also have to add 

           <div id="product-listing-{{ variant.id }}" class="product-index {% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half" data-alpha="{{ product.title }}" data-price="{{ product.price }}">           

if you want the swatch to work on the featured products (the above code is already inserted in the exemple before.

Good luck!

SaveSave

1 Like