How to Enable Add to Wishlist Buttons in QuickView

Once you’ve installed Wishlist Plus, the “Add to Wishlist” button is added to your product pages by default. However, they are not added by default to QuickView. It is a good idea to add buttons to QuickView to maximize engagement.

Note: This feature does not enable a QuickView modal for your site. This will only add wishlist buttons to your existing QuickView pop-up.

How to Enable Add to Wishlist Buttons in QuickView

Step 1: Add button code to the QuickView modal (pop-up)

Open the theme file that you wish to edit in Shopify admin by clicking on Actions > Edit code.

Look for the file that renders the Quickview pop-up. In most cases this will be the Snippets/product-template.liquid file.

Note: The name of this file can vary depending on your theme. If you’re unsure about the file name, please contact your theme developer, they’ll be able to identify the file for you.

Next, add the button code to your desired position:

<!--  Swym Quickvew Code  Start→
  {% if isModal %}
    <div class="swym-button-bar swym-wishlist-button-bar">
      <div class="swym-btn-container" data-position="default">
        <button aria-label="Add to Wishlist" id="swym-quick-view" data-with-epi="true" class="swym-button swym-add-to-wishlist 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 }}"><span class="swym-wishlist-cta"></span></button> 
      </div>
    </div>              
  {% endif%}
<!--  Swym Quick View Code End  -->

Step 2: Allow the button to appear when QuickView loads

First, add a new snippet in your theme, “swym-custom”.

Next, add the following code, which renders the button to appear when the Quickview modal is opened:

<script defer>
  function swymCallbackFn(swat){
    function swymAttachEvents(){
      swat.initializeActionButtons("<<Modal Selector>>");
    }
    document.addEventListener('quickview:loaded', function(e) {
      console.log("Quickview Loaded!",e.detail.productId);
      swymAttachEvents();
    });
  }

  if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(swymCallbackFn);
</script>

Change the <<Modal Selector>> to the parent class of the modal. You can also try using “body” if that doesn’t work.

Step 3: Allow the button to detect a variant change

Note: This step can be ignored, if your store does not have variants for products, or if your QuickView does not have an option to change the variant.

In the same Snippet, “swym-custom”, add the following code to detect a variant change, right after the “document.addEventListener” function call:

document.addEventListener('variant:change', function(event) {
  var variant_id = event.detail.variant.id;
  var btn =  document.querySelector("#swym-quick-view");
  if(btn){
    btn.setAttribute("data-variant-id", variant_id);
  }
  swymAttachEvents();
});

If you’ve followed both step 2 and 3, your “swym-custom” snippet should now look like the following:

<script defer>
  function swymCallbackFn(swat){
    function swymAttachEvents(){
      swat.initializeActionButtons("<<Modal Selector>>");
    }
    document.addEventListener('quickview:loaded', function(e) {
      console.log("Quickview Loaded!",e.detail.productId);
      swymAttachEvents();
    });
    document.addEventListener('variant:change', function(event) {
      var variant_id = event.detail.variant.id;
      var btn =  document.querySelector("#swym-quick-view");
      if(btn){
        btn.setAttribute("data-variant-id", variant_id);
      }
      swymAttachEvents();
    });
  }

  if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(swymCallbackFn);
</script>

Step 4: Include the snippet in your theme file

Open the Layout/theme.liquid file and add the following line, right below {% include ‘swymSnippet’ %}:

{% include 'swym-custom' %}

It should look like this:

Save all the changes, and ensure the following:

1. the button appears when a QuickView is opened, for different products
2. the button can be clicked, and the action is working as expected
3. the button state is changed when the variant is changed, and if the action occurs for the right variant

If you run into any issues, please contact us at support@swymcorp.com.

Frequently Asked Questions

How do I change the look of the button?

You can use CSS to change the look of the button. Add the CSS to your theme’s CSS/SCSS file.

The button appears correctly but it takes me to the product page

First, check if the button’s z-index is below the product tile. Next, make sure the button code is not placed inside the <a> tag for the product.