Wishlist Plus customizations cheatsheet

One of the most common support asks that we get for our Wishlist Plus app from Shopify stores is the ability to customize the app to suit their website’s theme, layout, color scheme etc. For store owners, the website uniquely represents their brand’s identity, and wanting to customize features on the website that reflect that identity is critical to delivering a seamless experience for users. That’s why we’ve made it a key priority for us at Swym to ensure that our Wishlist Plus app is not only very easy to install on your store, but also that it allows for extensive customization based on your specific needs. You can use our Swym Dashboard (access via your Shopify Admin console -> Apps -> Wishlist Plus) for basic customization, but here’s a quick cheat sheet on how to make simple code changes on your store, for some more advanced customization:

I want to enable Wishlist Plus for Collections

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. 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, please email support@swymcorp.com, 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_{{product.id}}" data-swaction="addToWishlist" data-product-id="{{product.id | json}}"></button>
        Suggestion : We recommend appending this section after the “<span>{{product.title}}</span>”

I want to enable Wishlist Plus on Quick View

Quite a number of stores have Quick View enabled to make shopping easier for customers. It is simple to enable “Add to Wishlist” functionality for Quick View as well.

      1. Identify the Quick View rendering in your store. Based on your theme and the quick view app that you have installed, it varies. Some of the files that we have seen the quick view code to be on is
        • snippets/sca-quick-view-template.liquid
        • snippets/quick-view.liquid
        • templates/product.quick.liquid
      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_{{product.id}}" data-swaction="addToWishlist" data-product-id="{{product.id | json}}"></button>
        Suggestion : We recommend appending this section after the “<span>{{product.title}}</span>”

I have a Custom button and I want to connect the “Add to Wishlist” action to that button

You might decide to include your own custom “Add to Wishlist” button on your site, instead of the default button because it blends better with your site’s theme. In order to do that, please follow the steps below:

      1. Include the following in your liquid file{% include 'swym-product-view', product: product %}
      2. To your button add data-swaction="addToWishlist" data-product-id="{{product.id | json}}"
      3. To your button, add an extra class “product_{{product.id}}”
      4. Additionally, to style the button when product is added to wishlist, add css for a .swym-added class for your button

Note: This blog helps you to integrate Wishlist capabilities in your store. You might need to fine tune it a bit to make it blend well with your theme.


Shoppers can pick-up where they left off with their shopping activity, regardless of the device they are on

Plans come with a 14-day free trial. GET APP NOW

Recent Posts

Leave a Comment