Custom Builder Embed Guide
Custom Builder Embed Guide
If you’re using a page builder like Replo, Shogun, GemPages, PageFly, Zipify, or a custom HTML block, the wishlist button won’t always show up automatically. eWeb Wishlist usually detects your theme’s product cards, product page, and cart on its own — but if your builder uses custom markup the app doesn’t recognize, just paste one of the snippets below into a Custom HTML / Custom Liquid / Embed Code block wherever you want the wishlist feature to show.
- Note: No extra app installation or script is needed. As long as the eWeb Wishlist app embed is turned ON in your Theme Editor (Online Store → Themes → Customize → App embeds → eWeb Wishlist ), these snippets will work anywhere on your storefront. ), these snippets will work anywhere on your storefront.
Sections
1. Wishlist Button — Product Page
2. Wishlist Button — Collection / Product Grid Card
3. Custom-Styled Button (Advance)
4. Header Wishlist Icon (With Live Item Count)
5. Direct Link to the Full Wishlist Page
6. Cart Page — “Save for Later”
Styling Reference (CSS Classes)
Troubleshooting
01
Wishlist Button — Product Page
Paste this anywhere inside a single product page or section:
<div class="eweb-wishlist"></div>That’s it — it auto-detects the product from the page URL (/products/your-handle).
Optional — force a specific product (useful if the builder’s page isn’t a real product-detail page, e.g. a custom landing page):
<div class="eweb-wishlist" data-product-handle="your-product-handle"></div>Optional attributes:
| Attribute | Purpose | Default |
|---|---|---|
| data-product-handle | Product to wishlist (overrides auto-detection) | detected from URL |
| data-label | Button text when not wishlisted | Add to wishlist |
| data-active-label | Button text when wishlisted | Wishlisted |
02
Wishlist Button — Collection / Product Grid Card
Use the exact same snippet inside each repeating product card in your grid/collection component:
<div class="eweb-wishlist"></div>It automatically finds the product handle from the surrounding card (it looks for a nearby L /products/… link or a data-product-handle attribute on a parent element). If your builder’s card wrapper has neither, add the handle directly to the card wrapper:
<div data-product-handle="{{ product.handle }}">
<!-- ... your card content ... -->
<div class="eweb-wishlist"></div>
</div>03
Custom-Styled Button (Advanced)
If you want full control over the button’s HTML/CSS instead of the auto-generated one above, use this structure. The app only toggles the is-active class and the button’s text — everything else stays in your control via CSS:
<div class="eww-wishlist-product-block" data-wishlist-handle="your-product-handle" data-button-label="Add to Wishlist">
<button type="button" class="eww-wishlist-btn">Add to Wishlist</button>
</div>- data-wishlist-handle (required) — the product handle.
- data-button-label (optional) — custom “not wishlisted” text (defaults to “Add to wishlist”).
- The button automatically gets the class is-active and text “Wishlisted” once the shopper adds it.
04
Header Wishlist Icon (With Live Item Count)
Paste this once in your header/navbar block:
<div class="eweb-wishlist-header"></div>This renders a clickable wishlist icon with a live badge showing how many items are saved. It links to the wishlist page (or opens a popup, depending on your app’s “Open wishlist as” setting).
| Attribute | Purpose | Options |
|---|---|---|
| data-display | What to show | icon (default) / text / image |
| data-label | Text/aria-label | Wishlist |
05
Direct Link to the Full Wishlist Page
If you just want a plain text/button link (no icon, no count badge) to the wishlist page, a normal link works — no special class needed:
<a href="/apps/eweb-wishlist?action=page">View My Wishlist</a>06
Cart Page — "Save for Later"
This works automatically if your cart/cart-drawer rows use any of these common patterns — no snippet needed:
.cart-item
.cart__row
.CartItem
.cart-drawer-item
.cart-item–wrapper
data-cart-item
data-product-handle
/products/…
If your builder’s cart has completely custom markup and the button doesn’t appear, message support at info@ewebworld.com with a link to your cart page and we’ll add support for it.
CSS
Styling Reference (CSS Classes)
All buttons/icons use plain CSS classes so you can restyle them from your builder’s custom CSS panel:
| Class | Element |
|---|---|
| .eww-wishlist-btn | The button (manual embed / product block) |
| .eww-wishlist-btn.is-active | Button state once wishlisted |
| .eww-wishlist-heart | Icon glyph (floating icon version) |
| .eww-wishlist-header-link | Header wishlist link |
| .eww-wishlist-header-count | Header item-count badge |
| .eww-wishlist-toast | "Added to wishlist" toast popup |
?
Troubleshooting
Button doesn’t appear at all
Confirm the eWeb Wishlist app embed is enabled in Theme Editor → App embeds.
Button appears but clicking does nothing
Open the browser console (F12) and check for errors; this usually means the product handle wasn’t detected — add data-product-handle explicitly.
Wrong product gets wishlisted on a grid
Make sure each card (or its wrapper) has a unique data-product-handle , or a link containing /products/.
Still stuck?
info@ewebworld.com
with your page URL and we’ll help directly.
*eWeb Wishlist — info@ewebworld.in*