Integration Guides

These guides show how to manually add Listify components to your theme's Liquid templates. This is useful when the Shopify theme editor blocks don't fit your layout, or when you need to place buttons and links in custom locations.

Important — Registry block required: The main Registry theme app extension block must be active on your storefront. Enabling only the Wishlist Button or Registry Add Button blocks without the main Registry block will not work — all core Listify scripts are loaded from the Registry block.

Registry Button

Listify automatically detects data-registry-add-button elements on the page using a MutationObserver. When found, it mounts an "Add to Registry" button inside the element. No JavaScript required from your side — just add the HTML.

You can choose between two styles:

Button style (default) — A full-width button carrying the registry label. Best on product pages.
Icon style — A compact round gift icon that expands on hover to reveal its label. Best in product cards. Add data-style="icon" to enable it.

Button style

<div data-registry-add-button
     data-listify-product-handle="{{ product.handle }}"
     data-listify-product-id="{{ product.id }}"
     data-listify-variant-id="{{ product.selected_or_first_available_variant.id }}">
</div>

Icon style

<style>
  [data-style-id="{{ product.id }}-listify-icon"] { display: inline-flex; }
</style>
<div data-style-id="{{ product.id }}-listify-icon"
     data-registry-add-button
     data-style="icon"
     data-listify-product-handle="{{ product.handle }}"
     data-listify-product-id="{{ product.id }}"
     data-listify-variant-id="{{ product.selected_or_first_available_variant.id }}">
</div>

The display: inline-flex rule is what makes the pill expand in the right direction, so don't omit it. It shrinks the container to fit its contents, which means the expansion follows wherever you placed it: in normal page flow the label slides out to the right, while inside a container pinned to the right edge (position: absolute; right: 0, text-align: right, or justify-content: flex-end) it slides out to the left and stays within the card.

Once a product is on the shopper's registry the pill stays permanently expanded, so the "already added" state is readable without hovering.

Attributes

Attribute	Required	Description
`data-registry-add-button`	Yes	Marker attribute — tells Listify to mount the button here
`data-listify-product-handle`	Yes	The product handle (e.g. `blue-t-shirt`)
`data-listify-product-id`	Yes	The Shopify product ID (numeric)
`data-listify-variant-id`	Yes	The currently selected variant ID
`data-style`	No	`icon` for the compact round button. Omit (or use `button`) for the default full-width button

Placement tip

Place the button-style snippet inside the product form (<form> element with action="/cart/add"), directly before or after the "Add to Cart" button. This ensures the registry button is visible alongside the purchase controls.

The icon-style snippet belongs in your product-card template instead, alongside whatever corner control the card already has. On a card, pass the card's own product variable rather than product — for example card_product — or the button will read the wrong product.

Wishlist Button

Listify detects data-wishlist-button elements and mounts a wishlist button. You can choose between two styles:

Icon style (default) — Renders a heart icon that toggles when clicked. Great for product cards or next to product titles.
Button style — Renders a full button with customizable text and colors. Add data-button-text to enable this mode.

Icon style (heart)

<div data-wishlist-button
     data-listify-product-handle="{{ product.handle }}"
     data-listify-product-id="{{ product.id }}">
</div>

Optionally add data-color="#ff0000" to change the heart color.

Button style

<div data-wishlist-button
     data-listify-product-handle="{{ product.handle }}"
     data-listify-product-id="{{ product.id }}"
     data-button-text="Add to Wishlist"
     data-added-button-text="Added to Wishlist"
     data-bg-color="#000000"
     data-text-color="#ffffff"
     data-radius="8px">
</div>

Attributes

Attribute	Required	Description
`data-wishlist-button`	Yes	Marker attribute — tells Listify to mount here
`data-listify-product-handle`	Yes	The product handle
`data-listify-product-id`	Yes	The Shopify product ID
`data-color`	No	Heart icon color (default: `#ff0000`)
`data-button-text`	No	Text for button mode (e.g. "Add to Wishlist"). Omit for icon mode
`data-added-button-text`	No	Text shown after adding (e.g. "Added to Wishlist")
`data-bg-color`	No	Button background color
`data-text-color`	No	Button text color
`data-radius`	No	Button border radius (e.g. `8px`)

Registry Links

Listify intercepts clicks on any <a> tag whose href contains a recognized hash, such as #gift-registry or #gift-registry--create. You can place these links anywhere: navigation menus, banners, footers, or custom sections.

The full list of hashes, navigation setup steps, and the ?listify-action= URL parameters for emails and campaigns now live on their own page: Storefront Links.

Live examples

Check out these stores using Listify integrations:

Kids Living — Baby & kids store using registry buttons, wishlist, and navigation links
Pup List — Pet store using registry and wishlist features