What to do when every variant is displayed as separate item on Collection Page?

On Collection pages, usually the first variant is displayed for each product. Therefore each item has a unique product-id on collection pages. However few custom themes display each variant as a separate item on collection pages. In such cases, there are multiple items corresponding to each product-id.

In such cases, the code for collection pages needs to be modified slightly. You need to replace the liquid variable product.variants.first.id with variant.id. 

Below is the original code:

<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></span>

For collection pages, the above code gets modified to:

<span class="smartwishlist" data-product="{{ product.id }}" data-variant="{{ variant.id }}"></span>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.