Wishlist Plus customizations cheatsheet for Shopify stores

NOTE: We are currently in the process of migrating to a new version of our platform (V3). To learn how to figure out which version you are on, click here. This article is on a feature that is currently only on the older version of our platform (V2) and will be made available soon for our V3 users.

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 worked hard to ensure that our Wishlist Plus app is not only very easy to install on your store but allows for extensive customization based on your specific needs as well. 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 an Add to Wishlist button on my 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. 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 “<span>{{product.title}}</span>”.

I want to enable an Add to Wishlist button on my Quick View page

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 “<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 once a product has been added to the wishlist (such as a grayed-out button), add CSS for a .swym-added class for your button.

Note: We’ve attempted to keep the instructions as generic as possible and validated that they work for the most common themes, but some themes have special requirements because of customizations that have been added. If this is the case with your store’s theme, please email us at support@swymcorp.com for assistance.