What does the App Configuration embed do?
App Configuration is the main Wishlist Hero app embed. It loads the app’s script, styles, and settings on every page, and it holds the options for custom class names, extra HTML, button placement, and the login URL. Keep it enabled: the app doesn’t run without it.
What the embed loads
The embed renders on every page and does the following:
- Loads the app script (
bundle2.js), its styles, and its translation strings - Publishes the store configuration to the page as
window.WishListHero_setting - Publishes the current product’s JSON, so the script can read variants and prices
- Identifies logged-in customers to Klaviyo when onsite tracking is on: Klaviyo onsite tracking
- Watches for wishlist buttons that theme scripts re-render on collection and search pages, and re-binds them
Settings reference
| Setting | Setting ID | Type | Default |
|---|---|---|---|
| Theme styling preset | customThemeName |
Select | Auto Detected / default |
| Product: add to wishlist button | additionalWLButtonCssClasses |
Text | Empty |
| Header: Wishlist items count bubble | additionalWLCartBubbleCssClasses |
Text | Empty |
| Additional HTML | extraHTMLToAppend |
HTML | Empty |
| Disable automatic product button placement | disableAutomaticButtonAddition |
Checkbox | Off |
| Enable custom login URL | enableCustomLoginUrl |
Checkbox | Off |
| Custom Login URL | customLoginUrl |
Text | /account/login |
Theme styling preset
The app detects your published theme and applies matching built-in styling. Pick a preset only when detection gets it wrong: the chosen preset then overrides the detected name everywhere the app loads its styles. The Wishlist Header Icon block has its own preset and ignores this one. See Theme presets.
Product: add to wishlist button
Class names you enter here are added to the wishlist button container on product pages. The embed splits the value on spaces and publishes it as window.wishlisthero_buttonProdPageClasses for the app script to apply. Use it to reuse your theme’s utility classes, for spacing or hide-on-mobile behavior. You’ll need Cascading Style Sheets (CSS) knowledge to pick useful classes.
Header: Wishlist items count bubble
Class names added to the header bubble that shows how many items the wishlist holds. The value is published as window.wishlisthero_cartDotClasses . The bubble appears only on themes that support it. This pairs with the Wishlist Header Icon block.
Additional HTML
Raw HTML rendered at the end of the embed, so it appears on every page after the app’s assets. Add <script> or <link> tags here for integration code that must load app-wide, such as listeners for the app’s JavaScript events. See Custom CSS and JavaScript.
Disable automatic product button placement
When off, the app inserts the wishlist button on product pages at a spot it detects. When on, the app stops inserting it, and the button appears only where you place the Add To Wishlist button block. The block sets the disableAutomaticButtonAddition flag in both window.WishListHero_setting and window.WishListHero_block_settings . Use it together with that block to control placement on themes where automatic detection picks a bad spot.
Enable custom login URL
Turns on the Custom Login URL field below and sets the enableCustomLoginUrl flag in the app configuration. Enable it when your store doesn’t use the standard login flow, for example when you run legacy customer accounts.
Custom Login URL
The page the app opens when a shopper must sign in, for example before opening a shared wishlist. The field only shows when Enable custom login URL is on, and it defaults to /account/login , the legacy customer accounts path. Change it only when your store uses a different login URL.
Related pages
