Add Wishlist Button to Your Collections Page

Wishlist Plus is enabled by default on your product pages, but it’s generally a good idea to add the button to your Collections pages as well – especially for shoppers on a mobile device, that’s a really low-friction way for them to bookmark their favorite products. Here is how you can enable an “Add to Wishlist” button on your Collection pages:

1. You will first need to add a new snippet called swym-product-view to your theme liquid files. This is very easily done and is outlined in this article here.

2. Once you have added the swym-product-view snippet, find the right file from which your product card gets displayed in the collection. Depending on your theme, it will be one of these files

  • snippets/product-listing.liquid
  • snippets/products-grid.liquid
  • snippets/product-grid-item.liquid
  • snippets/product-card.liquid
  • snippets/product-listing-item.liquid
  • snippets/product-loop.liquid
  • snippets/product-item.liquid
  • snippets/product-thumbnail.liquid
  • snippets/product-card-grid.liquid
  • snippets/product-block.liquid
  • snippets/product-listing-slider.liquid
  • snippets/product-thumbnail.liquid
  • snippets/product-item.liquid
  • snippets/product-loop-grid.liquid
  • snippets/snippet-product-item.liquid

Note: If you don’t find any of these files, email and we will help you find the right file for your theme.

2. Copy-paste the following snippet in the place where you want to show the button in your code

{% include 'swym-product-view', product: product %}<button class="swym-button swym-add-to-wishlist-view-product product_{{}}" data-swaction="addToWishlist" data-product-id="{{ | json}}"></button>

Suggestion : We recommend appending this section after “<span>{{product.title}}</span>”.

Let's discuss your needs!

Let's discuss your needs!

Let's discuss your needs!