How do I place the wishlist button with CSS selectors?

Wishlist Hero places its buttons automatically on most themes. When a theme is customized and automatic placement misses, CSS selectors let you position the button and the collection icon exactly. This guide covers the browser workflow for finding a selector and the four places selectors plug into the app. Everything here is update safe: it lives in app settings and app owned blocks, not edited theme files.

When to use selectors

Try automatic placement first: it works out of the box on unmodified Online Store 2.0 themes and many vintage themes. Reach for selectors when:

• The button renders in the wrong container or is missing on customized markup
• A quick view or filter app redraws product cards
• You want the button in a non standard spot, such as inside a buy box row you built

For the full install picture, start with Install guide.

Find a selector with your browser

1. Open a product page (or collection page, for the card icon) in your browser.
2. Right click the element you want the button near and choose Inspect.
3. In the developer tools panel, hover the elements around your target: the page highlights each one. Pick the outermost element that repeats once per product and looks right as an anchor, often a block that wraps the whole card or the buy box row.
4. Right click the highlighted element in the panel and copy its selector:

Prefer a stable, readable selector. Auto generated paths such as #shopify-section-template--123 > div > div:nth-child(2)  work but break when the theme changes; a class on a stable container survives better.

Where selectors plug into Wishlist Hero

Set the Theme styling preset in the App Configuration embed first; on many customized themes the preset alone fixes positioning without selectors. See Theme presets.

Place the button on your own placeholder element

For complete control, add a placeholder element in the theme and let the app attach the button to it.

Step 1: add the placeholder. On an Online Store 2.0 theme, add a Custom Liquid block in the product section with:

<div class="wlh-buy-box-anchor"></div>

On a vintage theme, open Online Store > Themes > Edit code, find the section that renders the product page (commonly main-product.liquid ), and paste the same div where the button should appear, for example above the add to cart form.

Step 2: bind the button. Either mark the element for auto binding with the app’s custom button class and data-wlh-*  attributes, or bind it from code with the SDK:

document.addEventListener("wishlist-hero-wishlist-sdk-ready", () => {
  window.WishListHero_SDK.InitializeAddToWishListButton({
    ButtonClassElement: ".wlh-buy-box-anchor",
    ProductId: "1234567890123",
    ProductVariantId: "1234567890456",
    ProductLink: "/products/classic-leather-jacket",
    ProductTitle: "Classic Leather Jacket",
    ProductPrice: 189.99,
    ProductImage: "https://cdn.shopify.com/…jpg",
  });
});

The SDK method reference is in JavaScript SDK reference; the surrounding pattern for custom UIs is in Build a custom wishlist UI. With dynamic product pages, read the product data from the page’s product JSON rather than hardcoding it.

Update safety

Selectors entered in the app’s fields live with the app, so Shopify theme updates never delete them. What does change is the theme markup the selectors point at:

• After a theme update or redesign, re-run your selector checks; a renamed class needs an updated selector, not new code
• App owned customizations such as Additional HTML and block settings carry over untouched, per Custom CSS and JS
• Confirm the loop with Verify your installation after any theme surgery

Troubleshooting