Search Knowledge Base by Keyword

Add to Wishlist Button Placement

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). 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 is 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.

Let's discuss your needs!

Let's discuss your needs!

Let's discuss your needs!