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. This article details on how you can enable the “Add to Wishlist” button to your Collection pages:

Step 1: Navigate to your theme and click  Actions >  Edit code

Step 2: Find the file that renders your product tile

Note: usually the collections-template.liquid will contain the product tile code as an include

Eg: {% include ‘product-card-grid’%}

The above ‘product-card-grid’ is one such example of a file that can render your collections product tile based on your theme/ dynamic section. The file name may vary.

Note: Searching for include ‘product-‘ inside the collections-template.liquid usually yields the file name that contains your collections product tile code on the majority of themes.

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

Step 3: Add the wishlist button code

After identifying the file from Step 2, open the file and paste the below button code where required.

Dynamic Wishlist Button Code:

 <!-- Swym Wishlist Plus EPI Button-->
  <button data-with-epi="true" class="swym-button swym-add-to-wishlist-view-product product_{{product.id}}" data-swaction="addToWishlist" data-product-id="{{product.id | json}}" data-variant-id="{{product.variants[0].id}}" data-product-url="{{ shop.url }}{{ product.url }}"></button>
  <!-- Swym Wishlist Plus EPI Button-->

It’s best suggested to append the above code below the price in your product tile.



The next section is applicable only on collection pages which have infinite scroll / dynamic loading. In such cases, the following additional steps need to be followed. 

Note: This is an advanced feature and it is recommended to be handled by a developer with knowledge of Shopify Theme Editor and programming languages, such as Javascript, HTML, CSS, and Liquid templating as required.

Step 4: Add a custom event to your javaScript file that renders the collections / dynamic sections

We need to add a custom event to the load of the collection page / dynamic section, that is triggered when a page load is complete / when all the product tiles are loaded.

To trigger a custom event, add the below code to your success callback that loads/fetches your products and loads your collections page.

    document.dispatchEvent(new CustomEvent("swym:collections-loaded"));

Step 5: Create a swym-custom file and include the initialization code

Create a new file called swym-custom in the Snippets folder.

Add the below code to the newly created file.

Initialization code

<script defer>
  function swymCallbackFn(swat){
    // your API calls go here
    document.addEventListener("swym:collections-loaded", function(){
      swat.initializeActionButtons("<<Collections Grid PARENT Selector >>");
    })
  }
  if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(swymCallbackFn);

</script>

The above code may change according to your implementation of the collection page/search page or any dynamic section. We have added the basic logic that works for most cases.

The below-colored sections may be changed according to your dynamic section implementation.

Note: The above initializeActionButtons function only works on the parent CSS Selector of the product tiles.

Step 6: Include swym-custom.liquid file in your theme.liquid

 {%include 'swym-custom'%}

We suggest that the above code be included right below the swymSnippet include.

This should now enable the button on dynamic sections / dynamic collections and load the button with swym events.

If you still have any questions, create a support ticket or write to us on support@swymcorp.com.

Let's discuss your needs!

Let's discuss your needs!

Let's discuss your needs!