Add to Wishlist Button Placement

By default, the Add to Wishlist button appears automatically near the Add to Cart button on your product page. To customize where wishlist elements appear, use the Theme Editor (no code required) to match Wishlist Hero to your theme, add a small code snippet manually to place the button in a custom spot on the product page, or — if you need it — add a wishlist heart icon to your store header.

Option 1: Theme Editor — no code

Step 1:

In your Shopify admin, go to Online Store > Themes, then click Edit theme on the theme you want to edit.

— Themes page with the Customize button highlighted.

Step 2:

In the Theme Editor, click App embeds in the left sidebar. Under App Configuration, set Theme styling preset to your theme — leave it as Auto Detected / default unless your theme isn't detected correctly. Then, under the Collections Icon, set Theme Preset the same way.

Click Save when you're done.

— App embeds panel, App Configuration, with the Theme styling preset dropdown highlighted.

— App embeds panel, Collections Icon, with the Theme Preset dropdown highlighted.

Note: The Theme Editor can't move the product-page button itself — use Option 2 below for that.

Option 2: Manual code placement (Online Store 1.0 themes or custom positions)

Use this method for vintage (1.0) themes, or when you need the button in a custom spot on the product page.

Note: To avoid ending up with two buttons, first click Customize on your theme, go to App embeds, select Wishlist Hero, enable Disable automatic product button placement, then click Save.

Step 1:

Go to Online Store > Themes > Edit Code in your Shopify admin.

Search for the main-product.liquid file.

In the code editor, search for the location where you need to add the wishlist button in the file.

— Existing code editor screenshot (reuse the current article image).

Step 2:

Locate the position where you need to add the wishlist button and add the following div code:

Or use this render call:

{% render 'wishlisthero-collection-product' with product: product, buttonMode:'default', buttonClass:'wishlisthero-quick-view' %}

Tip: For more details on moving or adjusting the button, see Change the location of the Add to Wishlist button on my Product page.

Option 3: Add a Wishlist Header Icon (optional)

If you also want customers to open their wishlist from any page, add a heart icon to your store's header.

In the Theme Editor, click Add section in the left sidebar, then select Wishlist Header Icon, and click Save.

The heart icon appears in the header in the storefront preview. If it doesn't match your theme, open the section and adjust its Theme styling preset or the icon settings (custom color, size).

— Add section picker with the Wishlist Header Icon entry highlighted.

— Wishlist heart icon visible in the header in the storefront preview.