Wishlist button is displayed only on first product on Collection pages

This issue happens when the code meant for individual product pages is used on collection pages. Please ensure that you have used the below code for wishlist button on collection pages

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

‚Äč
In some cases the code inserted for wishlist button on product pages automatically gets shared by collection pages. For such a scenario, you can wrap the code in a conditional statement like the following, to ensure that incorrect code doesn’t show up on collection pages. Later you can add the above code separately for collection pages.

{% if template contains 'product' %}

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

{% endif %}

Leave a Reply

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