A wishlist button allows customers to save products they are interested in for later.
The Add to Wishlist button is enabled by default on your store’s product pages. You have the option to adjust the location of the wishlist button according to your liking through a series of easy steps outlined below.
Case 01: Auto Inject #
We show the Add to Wishlist button on the product details page by default with the following setting:
- Automatic
Case 02: Manual placement using theme customizer – by adding a block #
If somehow your theme doesn’t show the ” Add to wishlist” button automatically or if you want to change the position of the auto-injected button, then we will recommend you to use this method. In this method, you can use the Theme customiser and add our Add to wishlist button on any Product templates at any position you want. Please follow the below steps to achieve this.
Step 1: From your Dashboard, choose Manual instead of Automatch. See screenshot below
Step 2: Click on the Configure Button, which will show after choosing the Manual option in Step #1, which will open Theme Customiser
Step 3: Add the “Add to Wishlist” Button to the Product Details Page
- In the Theme Editor, navigate to the Product Details Page.
- Select any section or layer where you want to add the button.
- Click Add Block.
- Simply drag the block to your desired spot on the page, ensuring it seamlessly integrates with your design aesthetic.
- Click Save to apply the changes.
- The Wishlist button will now be visible on your live theme.
Case 03: Through Custom code – This feature is only available in the Basic Plan #
By using custom code, you can strategically place the “Add to Wishlist” button wherever you desire, whether on the home page, collection page, or other locations.
Step 1: Log in to your Shopify Admin.
Step 2: Navigate to Online Store > Themes > Edit Code.
Step 3: Search for “product.json” in the specified area to find the files linked to your product template. Identify the named section in your product template, which is “main-product” for this theme.
Step 4: Simply add the code below at the desired location to display your button with slight modifications.
Note*- Depending on your theme, the data-productID may vary. Adjust the code accordingly to ensure compatibility. If your theme’s data-productID is different, replace it accordingly. As in our case, data-productID is the product.id
So we have to put the code as:
Example for the Icon:
<div class="wf-wishlist" product-id="{{ product.id }}" product-handle="{{ product.handle }}" ></div>
Example for the Button:
<div class="wf-wishlist-button" product-id="{{ product.id }}" product-handle="{{ product.handle }}" ></div>
Congratulations! Your wishlist button is now positioned exactly where you want it to be.
To easily add the wishlist button to your product page design, follow these steps using a block. For more detailed instructions on how to use blocks to place a wishlist button, please watch this short tutorial:
