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

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

Custom CSS

Colours, radius and margins are set through the --lx-* variables inside the snippet. For anything else, use the single <style data-listify-overrides> block in theme.liquid described in Custom CSS. Don't put that block inside a product snippet: it is global, and a copy per card is processed once per card.

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.

Cart Line Item Properties

Every gift Listify adds to the cart carries line item properties identifying where it came from. Read them in Liquid to customise your own cart drawer, for example to show a "Gift for the Smith Wedding" badge on registry lines.

You do not have to enable anything. Listify writes these on every add to cart.

On registry lines

On wishlist lines

Cart attributes

These are set on the cart rather than a line, and arrive on the order as note attributes.

Properties from your own product form, such as engraving or personalization fields, are not carried onto these lines by default. If you need them to come through with registry gifts, contact support.

Reading them in your theme

{% if item.properties['_listify_registry_id'] %}
  <p>Gift for {{ item.properties['🎁 Gift Registry'] }}</p>
{% endif %}

Shopify hides properties whose name begins with an underscore from its own cart and checkout rendering. They remain fully readable in Liquid and in the AJAX cart JSON. The emoji-named ones are deliberately visible so that both you and the shopper can see which registry a gift belongs to.

Using your own cart drawer instead of the Listify cart bar

Two settings under Settings > Store > Cart & checkout control this:

1. Under How gifts reach the cart, choose Use my theme's cart. This is the default, and it is required: the alternative puts gifts in a separate cart that Listify manages, which your drawer cannot see.
2. Under The Listify cart bar, choose Hide the cart bar and use my theme's cart.

Hiding the bar has no effect while gifts use a separate Listify cart, since the bar is then the only way to reach checkout.

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