Custom page templates

The wishlist page is built from three templates. You can override any of them with your own markup from the app, without touching the theme. Where: Manage Wishlist → Wishlist Page → Custom page template

Slot	Renders	Used on
Wishlist Page (`wishlist_page`)	Page header, tabs and content region	Listing and detail views
Wishlist card (`wishlist_card`)	One row per wishlist	My wishlists, Shared with me, Shared by me
Product card (`wishlist_item`)	One row per product	Wishlist detail view

A slot without a custom template uses the built-in design. That way your store picks up future improvements to every slot you have not changed.

Where each template slot is used on the page

Workflow

Choose the fields you need

Under Default settings → Fields to fetch, tick any extra product data your templates use (SKU, vendor, tags, metafields, …). The app fetches only what you tick, which keeps the page fast.

Edit a slot

Open a slot, switch to Code, and edit. The Available variables panel lists everything in the context. Use Preview to check the listing and detail views with sample data.

Pick a market (optional)

Under Market, keep — Default — to change the template for all markets, or pick a market to give it its own version. A market with no override uses the default.

Save draft, then Publish

Save draft keeps your work private. Publish makes it live. Use Restore a previous version to roll back.

If a published template breaks your live page, open Online Store → Themes → Customize → App embeds → Wishlist Engine and tick Turn OFF custom wishlist templates on this theme. That theme then uses the built-in design until you untick it.

Syntax

Templates use EJS:

Tag	Meaning
`<%= value %>`	Output, HTML-escaped. `null` and `undefined` print nothing.
`<%- html %>`	Output raw HTML. Only use it for values you trust.
`<% code %>`	Run JavaScript (loops, conditions)
`<%# comment %>`	Comment

include is not supported.

Wishlist card

<div class="wishlist_block" data-cb-wishlist-card
     <% if (wishlist.id) { %>data-cb-wishlist-id="<%= wishlist.id %>"<% } %>>
  <h4><%= wishlist.name || t('untitledWishlist', 'Untitled') %></h4>
  <p><%= wishlist.itemCount %> <%= wishlist.itemLabel %></p>

  <% wishlist.badges.forEach(function (badge) { %>
    <span class="badge" data-badge-type="<%= badge.type %>"><%= badge.label %></span>
  <% }) %>

  <button type="button" data-cb-action="open">View</button>
</div>

Product card

<div class="my-item" data-cb-item data-cb-item-id="<%= item.id %>" data-cb-variant-id="<%= item.variantId %>">
  <a href="<%= item.productUrl %>">
    <img src="<%= helpers.imageUrl(item, 400) %>" alt="<%= item.title %>">
  </a>
  <h5><%= helpers.truncate(item.title, 60) %></h5>
  <p><%= helpers.formatPrice(item.price, item.currency) %></p>

  <% if (item.availableForSale) { %>
    <button type="button" data-cb-action="add-to-cart">Add to cart</button>
  <% } else { %>
    <span>Sold out</span>
  <% } %>
  <button type="button" data-cb-action="delete-item">Remove</button>
</div>

If a template throws an error on the storefront, only that region falls back to the built-in design. The error goes to the browser console.

Context

All variables are read-only.

string

my, shared_with_me or shared_by_me

string

listing or detail

object

{ domain, name, currency, moneyFormat }

object

{ handle, id, isPrimary, country, language }

object

{ id, firstName, lastName, fullName, isGuest }. The email is left out on purpose.

object

Widget settings for the current language

function

Returns the translated text for a key, or the fallback.

object

{ wishlistSharing, shareViaEmail }. Use it to hide features the store’s plan does not include.

object

{ role, isOwner, canEdit, canMove, canShare, canSave, canManageShare, canGoBack }. role is owner, sharer or recipient.

object

{ page, limit, totalItems, hasNextPage, nextPage }

array

[{ key, label, current, shared }]

object

Show helpers

function

Formats with the shop’s money format

function

Sized Shopify CDN image URL

function

Cuts text to n characters

function

Formats a date

array / object

Listing view and Wishlist card.

Show wishlist

string

null on the My wishlists tab

string

boolean

number

string

”item” or “items”, translated

array

First few items, for thumbnails

number

Items beyond the preview

array

[{ type, label, tone, details }]

string

object

{ name, email, isGuest }, Shared with me only

object

Shared by me only

array / object

Detail view and Product card.

Show item

string

number

string

boolean

string

number

string

When the shopper saved the item

object

Always an object, filled with the metafields you selected

Fields you tick under Fields to fetch are added too: sku, compareAtPrice, vendor, productType, tags, selectedOptions, inventoryQuantity, priceRangeMax, description, seoTitle, seoDescription, collectionTitles, collectionHandles, collectionIds, images, publishedAt, productCreatedAt, totalInventory, category, status.

Shared tabs only: { id, recipientName, recipientEmail, status, savedToWishlistName, isRevoked, isLinkShare }

object

{ text, tone }, a notice the page wants to show

Required hooks

The app finds the parts of your markup through data-cb-* attributes. Your template must include the required ones, or the page cannot work.

Wishlist Page
Wishlist card
Product card

Required: data-cb-tabs, data-cb-region="<%= view %>", data-cb-list (the direct parent of the rows)Optional: data-cb-empty, data-cb-loadmore, data-cb-page-heading, data-cb-tab="<key>", data-cb-tab-count="<key>", data-cb-detail-header, data-cb-toggle="public", data-cb-public-label, data-cb-slot="badges|item-count-badge|products"Add the class cb-shared-tab to the shared tabs so the page can hide them when sharing is off.

Required: data-cb-wishlist-card, and an element with data-cb-action="open"Optional: data-cb-wishlist-id, data-cb-wishlist-public-id, data-cb-share-id

Required: data-cb-item, data-cb-item-id, data-cb-variant-idOptional: data-cb-product-id, data-cb-price, data-cb-currency, data-cb-available, data-cb-qty (quantity input), data-cb-price-display with data-cb-base-price, data-cb-item-title, data-cb-move-select (a <select> the app fills with the shopper’s other wishlists)

Actions

Put data-cb-action on any clickable element. You do not need to write event handlers.

Action	What it does	Shown only when
`open`	Opens a wishlist	—
`back`	Back to the list	—
`create-list`	Opens “Create a new wishlist”	—
`rename`	Opens the rename dialog	`viewer.canEdit`
`delete`	Deletes the wishlist	`viewer.canEdit`
`delete-item`	Removes the product	`viewer.canEdit`
`share`	Opens the share dialog	`viewer.canShare`
`update-share`	Changes who a share is with	`viewer.canManageShare`
`stop-share`	Stops sharing	`viewer.canManageShare`
`save-to-my-wishlist`	Copies a shared wishlist to the shopper’s own wishlists	`viewer.canSave`
`add-to-cart`	Adds the product to the cart	—

When the viewer lacks the permission, the app hides the element and removes its action, so a shared viewer can never delete someone else’s items.

Custom CSS

Default settings → Custom CSS is a stylesheet that loads after the app’s own CSS. It is published with your templates.

Theme integration

Integrations

Workflow

Syntax

Context

Required hooks

Actions

Custom CSS

​Workflow

​Syntax

​Context

​Required hooks

​Actions

​Custom CSS

Workflow

Syntax

Context

Required hooks

Actions

Custom CSS