Add to Wishlist Button Placement

Video Tutorial

The ‘Add to Wishlist’ button gets attached below/next to the Add to Cart button on your product details page. This is based on the availability of space in your page layout or on the HTML code of your theme.

This is a default setting, but you can customize the wishlist button placement according to your preferences in just 2 simple steps. All you need to do is create an empty div sector by placing an HTML code in your liquid files.

Step 1: Go to the Shopify Admin Console -> Online Store -> Themes -> Edit Code.

Step 2: Find the template/snippet file which renders your product page (eg: product-template.liquid or main-product.liquid). Find the code to the position of your preference and add the copied code right below it. In this example, we are placing the button next to the Price element.

HTML code to be copy-pasted:

<!-- Swym button on product pages -->
        <div class="swym-wishlist-button-bar"></div>
<!-- Swym button on product pages -->

You can use this code and place it wherever you think is the right fit according to the theme of your website. Once the button is attached, you can use CSS to style/align the button as required.

Note: Our button codes are dynamically rendered and are not available on the product template. Alternatively, you can choose to create a custom button and wire our app to the custom button using our Javascript APIs. This way you will have complete control over the position and style of the button.

• What Chrome extension is used in the video to search inside the liquid files?
  We use a Chrome extension called Shopify Theme Search (Fast) to search within Liquid files. However, there are several other options available that you can consider. Please note that this tool is not an official recommendation; it is simply one we have found to be easy and convenient to use.
  
  
• Can we place multiple Wishlist buttons on the Product Page using the button bar code?
  No, we can only reposition the default Wishlist icon using the above HTML code. However, if you wish to add another button to the page, you can do it via the custom button approach.