Custom button placement and CSS

When you need this

The Wishlist Button theme block covers most stores: you drag it into your product template and position it around Add to cart. But a theme block can only go where your theme offers an app block slot, and many custom and premium themes offer very few.

If the spot you want is not available, or the button belongs somewhere the theme editor cannot reach (a custom section, a quick view, a bundle widget, a collection tile), place it yourself with one line of Liquid.

You need the app embed enabled for this to work, since that is what loads our script. It is the same toggle from the installation guide.

Add the button anywhere

Paste this wherever you want the button to appear, in any section, snippet or template:

<div data-slw-button data-handle="{{ product.handle }}"></div>

That is the whole integration. Our script finds the element and mounts a real wishlist button inside it, wired to the same wishlist as everything else: the header count updates, the drawer stays in sync, and the save is recorded against the shopper exactly as it would be from the theme block.

On a product page you can leave the handle out entirely and we use the product being viewed:

<div data-slw-button></div>

Inside a loop over products, pass each product's handle:

{% for product in collection.products %}
  <div data-slw-button data-handle="{{ product.handle }}"></div>
{% endfor %}

Options

Everything is optional except the handle. Add attributes to change the button:

A compact heart to sit beside Add to cart:

<div data-slw-button data-style="icon" data-handle="{{ product.handle }}"></div>

Set how it looks, in the app

Open Settings and choose the Wishlist button tab. Style (button or icon only), icon, both labels, every colour, size, padding, border and corner radius are there, the same controls the theme block offers, with no theme editing.

One thing worth knowing: the snippet does not inherit the settings from the Wishlist Button theme block. Shopify stores those with that specific block inside your theme, and nothing outside the block can read them. That is a platform limit, not a choice. So the app settings are the source of truth for snippet placements, and the theme block keeps its own.

Order of precedence, narrowest wins:

built-in defaults  <  Settings > Wishlist button  <  data- attributes  <  Custom CSS

So set the look once in Settings, override it for one placement with a data- attribute, and reach for CSS only when you want something the settings do not cover.

Custom CSS

Open Settings in the app and choose the Custom CSS tab. Anything you write there loads on your storefront after our own stylesheet, so it overrides our styles without needing !important.

Keeping it here rather than in your theme matters for one practical reason: a theme update, or switching themes, cannot wipe it. It follows your store, not your template.

The button is built from CSS variables, so most restyling is a few lines:

.slw-cta {
  --slw-cta-bg: #7a5c3e;
  --slw-cta-fg: #ffffff;
  --slw-cta-radius: 999px;
  --slw-cta-pad-y: 14px;
  --slw-cta-pad-x: 28px;
}
.slw-cta.is-added {
  --slw-cta-bg-added: #f3ece4;
  --slw-cta-fg-added: #7a5c3e;
}

Available variables: --slw-cta-bg, --slw-cta-fg, --slw-cta-border, the same three with -added for the saved state, plus --slw-cta-radius, --slw-cta-pad-y, --slw-cta-pad-x, --slw-cta-size, --slw-cta-weight, --slw-cta-gap and --slw-cta-border-width.

The button inherits your theme's font family on purpose, so it reads as part of your store rather than part of our app.

Classes you can target

The same Custom CSS box styles every part of the wishlist, not just the button:

Every class we render starts with slw-, so you can always tell our elements from your theme's in the browser inspector.

If the button does not appear

Three things to check, in order.

Is the app embed on? Nothing mounts without it. Theme editor, App embeds, Simpll Wishlist, toggled on and saved.

Is there a handle? Open your browser console. If the handle is missing and you are not on a product page, we log a warning naming the element rather than mounting a button that cannot work.

Is the element actually in the page? Inspect it. Once mounted, the marker gains data-slw-mounted="1" and contains a button.slw-cta. If the marker is not in the HTML at all, the Liquid was placed in a section that is not rendering on that template.

Still stuck? Email support@getsimpll.com with your store URL and where you pasted the snippet, and we will look at the actual page.