Listify

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.

Code snippet

<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>

Attributes

AttributeRequiredDescription
data-registry-add-buttonYesMarker attribute — tells Listify to mount the button here
data-listify-product-handleYesThe product handle (e.g. blue-t-shirt)
data-listify-product-idYesThe Shopify product ID (numeric)
data-listify-variant-idYesThe currently selected variant ID

Placement tip

Place this 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.

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

AttributeRequiredDescription
data-wishlist-buttonYesMarker attribute — tells Listify to mount here
data-listify-product-handleYesThe product handle
data-listify-product-idYesThe Shopify product ID
data-colorNoHeart icon color (default: #ff0000)
data-button-textNoText for button mode (e.g. "Add to Wishlist"). Omit for icon mode
data-added-button-textNoText shown after adding (e.g. "Added to Wishlist")
data-bg-colorNoButton background color
data-text-colorNoButton text color
data-radiusNoButton border radius (e.g. 8px)

Listify intercepts clicks on any <a> tag whose href contains a recognized hash. You can place registry links anywhere — navigation menus, banners, footers, or custom sections. No special attributes needed, just a standard link with the right hash.

Available hashes

HashAction
#gift-registryToggle the registry modal (open/close)
#gift-registry--createOpen the registry creation form
#gift-registry--searchOpen registry search
#gift-registry--manageOpen registry management
#wishlistToggle the wishlist modal

Simple example

<a href="#gift-registry">Open Gift Registry</a>

Add multiple links to your store's navigation to give customers easy access to all registry features:

<a href="#gift-registry">Gift Registry</a>
<a href="#gift-registry--create">Create Registry</a>
<a href="#gift-registry--search">Search Registries</a>
<a href="#gift-registry--manage">Manage Registry</a>
<a href="#wishlist">My Wishlist</a>

These can be added via Shopify Admin > Navigation, or directly in your theme's Liquid templates.

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