Answer
You can add the Add to Wishlist Button app block to the Product information section of your product template in the Shopify Theme Editor.
No code editing is required. Since the button is added as an app block, you can place it anywhere on the product page, including directly below the Add to Cart button.
What You'll Accomplish
This setup adds a wishlist button below the Add to Cart button on your product pages.
The button text automatically changes between states, such as Add to Wishlist and Added to Wishlist. You can also customize the button text, icon, colors, size, border, and other appearance settings directly in the Theme Editor.
Setup Instructions
❗ Make sure the Basic Favorites app is enabled before you begin.
Step 1: Open the Product Template in the Theme Editor
From your Shopify admin, navigate as follows:
- Go to Online Store > Themes.
- Click Customize for the theme you want to edit.
- Open the Products template from the template selector at the top.
- Select the product template you want to edit.
When the product page editor opens, select the Product information section from the left sidebar.
Step 2: Click "Add block"
In the Product information section, click Add block.
When the list of available blocks appears, switch to the Apps tab.
Step 3: Add the "Add to Wishlist Button" Block
Select Add to Wishlist Button from the list of app blocks.
Choose the block labeled comasopify-favorite-app.
Step 4: Move It Below the Add to Cart Button
In the block list on the left, drag the Add to Wishlist Button block below the Buy buttons block.
Step 5: Save Your Changes
Click Save in the upper-right corner.
After saving, open a product page on your storefront and confirm that the wishlist button appears below the Add to Cart button.
Customize the Button Appearance
Select the Add to Wishlist Button block in the Theme Editor to customize the following settings:
- Default button text
- Added-to-wishlist button text
- Icon style (Heart / Star)
- Icon outline color
- Filled icon color
- Icon size
- Text size
- Button background color
- Button height
- Maximum button width
- Text color
- Border color
- Border width
- Corner radius
You can adjust the text color, border color, button height, corner radius, and other appearance settings to match your storefront design.
Result
Once the setup is complete, the wishlist button will appear below the Add to Cart button on your product pages.
