Embeds
Turning on the embeds
All five embeds are enabled in the same place: the App Embeds panel in your theme editor.
- Go to Online Store → Themes → Customize in your Shopify admin.
- Click the App embeds icon in the left sidebar (it looks like a puzzle piece).
- Find the Stashlist embeds and toggle on the ones you want. Click Save.
Wishlist PDP Inject
Injects a heart icon onto your product pages. Customers click it to save or unsave the current product. Toggle this on in App Embeds. No block placement needed.
By default the button is appended to the product form's button row. If your theme uses a non-standard layout you can override the target by setting a custom Button container selector in the Stashlist Settings embed.
Wishlist Collection
Overlays a heart icon on each product card in your collection grids. Customers can save products without leaving the collection page. Toggle on in App Embeds.
Selector configuration
Some embeds (PDP button, Collection badge) let you specify a CSS selector so Stashlist knows exactly which element in your theme to target. The default selectors work with most themes out of the box, but you can change them if your theme uses different class names.
How to find the right selector
- Open your storefront in Chrome and navigate to the page you want to target (e.g. a product page or a collection page).
- Right-click the element you want to target (for example, the Add to Cart button) and select Inspect.
- In the DevTools panel, look at the element's
classattribute. A class likeproduct-form__buttonsbecomes the selector.product-form__buttons(note the leading dot). - To verify, press Cmd+F (Mac) or Ctrl+F (Windows) inside DevTools and paste your selector. DevTools will highlight all matching elements, so you can confirm it picks the right one.
- Paste the selector into the relevant field in Stashlist Settings → Quick Setup in the theme editor and save.
PDP button selector
Controls where the wishlist button is inserted on the product page. Stashlist appends the button inside the target element. Aim for the container that wraps your Add to Cart button, not the button itself.
| Theme | Selector |
|---|---|
| Dawn / most default themes | .product-form__buttons |
| Tinker v4+ | .product-form-buttons |
| Debut | .product-form__controls |
| Custom / unknown | Inspect the Add to Cart button and use its parent container's class |
Collection badge selector
Controls which element is used as the positioning anchor for the heart badge on each product card. The target should be the product card wrapper: the element that has position: relative or can contain an absolutely-positioned child.
| Theme | Selector |
|---|---|
| Dawn | .card__media |
| Tinker v4+ | .product-card__image |
| Debut | .grid-product__image-wrap |
| Custom / unknown | Inspect a product card image and use the nearest wrapper with a defined size |
Wishlist Cart
Adds a "Save for later" action to cart line items, letting customers move products from their cart to their wishlist instead of removing them. Toggle on in App Embeds.
Wishlist Header
Adds a floating wishlist icon link to your header so customers can access their wishlist from any page. Toggle on in App Embeds.
Wishlist Page
The wishlist page shows customers all their saved items with add to cart, remove, and share actions. Unlike the embeds above, this is added as a block on a Shopify page rather than an app embed.
See the Wishlist Page guide for full setup instructions, layout options, card actions, sharing, multiple lists, and more.
Customer Account Wishlist
Stashlist can add a Wishlist page directly inside Shopify's customer account portal (the new customer accounts experience), so logged-in customers can view their saved items without leaving their account.
Step 1: Add the menu link
- In your Shopify admin, go to Content → Menus.
- Open the Customer account navigation menu (or whichever menu your customer accounts theme uses) and click Add menu item.
- Set the Label to Wishlist (or any name you prefer).
- For the Link, search for Stashlist and select Stashlist Wishlist under Apps.
- Click the checkmark to confirm, then click Save.
Step 2: Add the page in the theme editor
- In your Shopify admin, go to Online Store → Themes → Customize and switch the page context to Customer accounts.
- In the left sidebar under Navigation, you'll see a Missing page warning for the Stashlist Wishlist link you just added. Click Add page.
- Click Save.
Once set up, logged-in customers will see a Wishlist link in their account navigation. The page shows all their saved items with product images, titles, and prices.
/account experience. Guest wishlists are only visible on the storefront wishlist page, not in the customer account portal.
Drawer Account & Orders
When your wishlist is set to Drawer mode (Wishlist access → Mode, in the Stashlist Settings embed), customers can view their sign-in status, edit their profile, and see recent orders without ever leaving the drawer.
Account section
Turn this on under Wishlist access → Account section in the Stashlist Settings embed. Choose how customers reach it:
| Option | Behaviour |
|---|---|
| Footer tab | Adds an Account tab to the drawer's footer navigation, alongside Wishlist and Lists. |
| Header icon | Replaces the drawer's close button with an account icon; the drawer still closes via the overlay or Escape. |
Logged-in customers see their sign-in status with links to their account and sign out, plus an Edit link to update their first name, last name, and email marketing consent inline, no page reload. Guests see a login prompt.
Orders tab
Turn this on under Wishlist access → Enable orders tab in the Stashlist Settings embed. Adds a fourth footer tab showing the customer's last 5 orders: status, total, and product thumbnails. Tapping an order opens Shopify's order status page.