Use a Custom Handlebars Template to Display List Items

This document is included as a courtesy to aide developers in customizations related to Wishl. You should be familiar with HTML and liquid to implement the changes listed below.

First install a custom page ( see instructions here).

Go to Online Store > Themes in your admin. Hover over the "..." button in the theme you chose above and click Edit HTML/CSS in the pulldown.

You should see a  page.wishl-wishlist.liquid template under the Templates folder. Click on it.

In the template, after {{ page.content }}, you'll see this line:

{% include 'wishl-wishlist' %}

You'll find the default Handlebars list item template code below. Copy and paste all that code at end of the page.wishl-wishlist.liquid template and the app will use it to render each list item. You can make the modifications you wish, of course. See  documentation for Handlebars templating language.

<script id="wishl-item-template" type="text/x-handlebars-template">
{%- comment -%}
  Handlebars syntax conflicts with liquid,
  so wrap Handlebars template in a liquid raw tag.
{%- endcomment -%}
{% raw %}
<div id="{{divId}}" class="grid-item wishl-product-list-item" data-item="{{itemId}}">
    <div class="grid">
        <div class="grid-item wishl-product-image large--one-quarter medium--one-third">
            <a href="{{product.url}}?variant={{variant.id}}" title="{{product.title}}"><img src="{{featuredImage}}" alt="{{product.title}}" /></a>
        </div>
        <div class="grid-item wishl-product-info large--one-half medium--one-third">
            <p class="h6 wishl-product-title"><a href="{{product.url}}?variant={{variant.id}}" title="{{product.title}}">{{{product.title}}}</a></p>
            {{#if variantOptions}}
            <ul>
                {{#each variantOptions}}
                <li><span class="variant-option-key">{{this.name}}:</span> {{this.value}}</li>
                {{/each}}
            </ul>
            {{else if variantTitle}}<span class="variant-title">{{variantTitle}}</span>
            {{/if}}
            {{#if item.properties}}
            <ul>
                {{#each item.properties}}
                <li><span class="property-key">{{@key}}:</span> {{this}}</li>
                {{/each}}
            </ul>
            {{/if}}
            {{#if priceDropped}}
              <div class="wishl-price-drop">{{{priceDropped}}}</div>
            {{/if}}
        </div>
        <div class="grid-item wishl-item-actions large--one-quarter medium--one-third">
            <div class="wishl-item-price {{priceClass}}">{{{variantPrice}}} <del>{{{comparePrice}}}</del></div>
            <form action="/cart/add" method="post">
            {{#if showAddToCart}}
                <input type="submit" class="btn wishl-btn add-to-cart" name="add" value="{{showAddToCart}}" />
                <input type="hidden" name="id" value="{{variant.id}}" />
                {{#each item.properties}}
                <input type="hidden" name="properties[{{@key}}]" value="{{this}}" />
                {{/each}}
            {{else if showSoldOut}}
                <input type="submit" class="btn wishl-btn add-to-cart disabled" name="add" value="{{showSoldOut}}" disabled="disabled" />
            {{/if}}
            </form>
            <div>
                {{#if canMoveItem}}
                <a href="#" class="wishl-move-item" data-list-action="move" data-item="{{itemId}}">{{lang.move}}</a>
                {{/if}}
                {{#if deleteLabel}}
                <a href="#" class="wishl-del" data-item="{{itemId}}" data-item-title="{{product.title}}">{{deleteLabel}}</a>
                {{/if}}
            </div>
        </div>
    </div>
</div>
{% endraw %}
</script>

A few things to keep in mind:

  • Outer div tag must have id="{{divId}}" data-item="{{itemId}}" attributes
  • Delete/remove link can be changed to a button or whatever, but the tag must have a class of "wishl-del" and keep data-item and data-item-title attributes.
  • {{dateAdded}} and {{timeAdded}} are available for each item in the list. Both are formatted by the browser according to its own language/locale settings (i.e., a US browser will show a different format than a UK or Japan browser)
  • Most of the Shopify attributes for the product and variant, such as {{ product.vendor }} or {{ variant.sku }}, are available. See a product .js file for a full list.
  • When you use a custom handlebars template, the app's wishl-default.css stylesheet is still loaded. You can override its styles with stronger rules in your own stylesheet.

Back to the app, go to Preferences change the url to match that page, e.g. /pages/favorites-wishlist — Note: you can hold off on this step until you've tested and adjusted the custom template before making it live for your shoppers.

Still need help? Contact Us Contact Us