Appmate

Appmate Templates

Appmate templates are very similar to Shopify's theme files with one major difference - they are rendered on the client side (the browser) and not on Shopify's servers. You thereby do not get access to the data you can access in your regular theme templates. You should however get access to all the data you need to implement our apps. Please get in touch if you are missing anything.

Appmate templates are using the Liquid template language, which you should be familiar with if your are intending to edit them.

{% raw %}
<script id="wishlist-link" data="wishlist" type="text/x-template" app="wishlist-king">
    <a href="{{ wishlist.url }}" class="wk-link wk-{{ wishlist.state }}" title="View Wishlist">
        Wishlist <span class="wk-count">({{ wishlist.item_count }})</span>
    </a>
</script>
{% endraw %}

Appmate templates are escaped from the Shopify template environment using the raw tag. You might also notice, that they are wrapped in script tags. This is necessary to prepare the templates for client side rendering.

Including templates

Templates are reference by there id. Including them in your Shopify theme is a little bit different from including them within another appmate theme.

Inlucding a snippet in a Shopify theme file

<!-- include 'wishlist-link'-->

Use this special HTML comment to include an Appmate snippet in your theme files. Snippets where the data attribute is wishlist or cookie_advice won't get any data passed. If you want to include a snippet where the data attribute is product you must pass a product id.

<!-- include 'wishlist-button-collection' with '{{ product.id }}' -->

Inlucding a snippet in another Appmate snippet

{% raw %}
<script id="wishlist-button-collection" data="product" type="text/x-template" app="wishlist-king">
    {% if product.in_wishlist %}
        {% include 'wishlist-button-remove' with product %}
    {% else %}
        {% include 'wishlist-button-add' with product %}
    {% endif %}
</script>
{% endraw %}

To include an Appmate snippet in another Appmate snippet you use the standard Liquid syntax.