How does Wishlist Hero install on my theme?
Wishlist Hero installs itself on your theme in two layers: an app embed that loads the app, and theme blocks or snippets that place the buttons. This guide explains each layer, what happens automatically, and what to check when a button needs manual placement.
What installs automatically
When you install the app, Wishlist Hero:
- Creates your store and starts your trial
- Installs the wishlist snippets on your current theme
- Registers the theme blocks you add manually in the theme editor
You still need to switch on the app embed once per theme.
Layer 1: the App Configuration embed
The App Configuration app embed is required. It publishes your settings to the storefront and loads the wishlist script.
- Go to Online Store > Themes and click Customize on the theme you are setting up.
- Click the App embeds icon in the sidebar.
- Switch on Wishlist Hero > App Configuration and click Save.
The embed has settings of its own:
| Setting | What it does |
|---|---|
| Theme styling preset | Pick your theme so the app applies known positioning defaults for it |
| Product button CSS classes | Extra selectors that help the app find product cards on customized themes |
| Header count bubble CSS classes | Selectors that place the items count bubble on your header icon |
| Additional HTML | Custom HTML injected on every page, useful for small customizations |
| Disable automatic product button placement | Stops the app from adding buttons on its own so you control placement |
| Custom login URL | Point the login popup at a custom login page instead of the Shopify default |
Layer 2: theme blocks
Wishlist Hero ships four theme blocks you add where you want them:
| Block | Where it goes | Purpose |
|---|---|---|
| Add To Wishlist Button | Product sections | A manually placed wishlist button with full style controls |
| Wishlist Header Icon | Header section | The header icon with items count and custom color and size |
| Collections Icon | Product grid sections | The wishlist icon on product cards in collections and search |
| Custom Colors and Fonts | Anywhere | Theme level overrides for button colors and wishlist text styles |
Each block is enabled per theme. If you publish a new theme later, repeat the embed and block setup on it. See Installing on multiple themes.
Automatic versus manual button placement
By default, the app detects product pages on your theme and injects the button next to the add to cart form. Most themes need nothing else.
Use manual placement when your theme is customized or the button lands in the wrong spot:
- In the App Configuration embed settings, tick Disable automatic product button placement.
- In a product section of the theme editor, click Add app and choose Add To Wishlist Button.
- Position and style it with the block controls, then Save.
For full control with code, the JavaScript SDK can attach the button to any element. See the JS SDK documentation linked from the app’s REST API settings page.
Vintage (1.0) themes
On older themes without app blocks, Wishlist Hero installs liquid snippets and places the button by theme specific rules. The installer covers many popular themes; if yours is not covered, support can wire it for you. See Installing on vintage themes for details and limits.
After installing
- Confirm the button works with the checks in Verify your installation
- If the button is missing or misplaced, work through Wishlist button missing: causes and fixes