Learning Shopify Liquid

Shopify Liquid Guide

‍

This week I’ve published a short post on learning Shopify Liquid. This templating language is used to make customisation of the Shopify experience easy for developers.

As I recently went through the Shopify Plus Partners certification process I decided to get under the skin of Liquid and make some mods to my Shopify Plus sandbox store.

I like to share stuff, and I’ve created a real quick list of useful code to get you started, some of which I used in my sandbox to improve user experience and functionality.

Below is my quick guide to getting started with Shopify Liquid.

‍

Shopify Liquid Helpers

Know which template is rendering a page

p style=“background: #f1c40f; padding: 1em; font-weight: bold;”>Current template: {{ template }}.liquid

For each example‍

‍{% for image in product.images %}
{% endfor %}
‍

Liquid logic example‍

{% if product.available %} ‍

Price: £99.99‍

{% else %}
‍

Sorry - Sold Out

Delimiters explained

The double curly brace delimiters  {{ }}  denote output, and the curly brace percentage delimiters  {% %}  denote logic.
‍

Escaping whitespace - use %- -%

{% endif %}

{%- assign my_variable = “coffee” -%}

{{ my_variable }}
‍

Adding a stylesheet - first at to assets library

{{ ‘style.css’ | asset_url | stylesheet_tag }}
‍

Will render the actual asset URL automatically, works for various assets.

Create and select alternate templates

Modify template view using URL’s

http://store.myshopify.com/products/blue-t-

shirt?view=special

Loads: product.special.liquid

Specify image sizes

{{ product.featured_image | img_url: ‘450x450’ }}
‍

Above only works if an image is square…

Or width only (RIP)

{{ product.featured_image | img_url: ‘450x’ }}

Or height only (RIP)

{{ product.featured_image | img_url: ‘x450’ }}
‍

To make non square images square use the crop function

{{ product.featured_image | img_url: ‘450x450’, crop: ‘center’ }}
‍

Image formatting for progressive loading

{{ product.featured_image | img_url: ‘450x450’, crop: ‘center’, scale: 2, format: ‘pjpg’ }}
‍

Placing imagery from assets folder

{{ ‘logo.png’ | asset_url | img_tag: ‘Logo’ }}
‍

Append classes to images (From assets)

{{ ‘logo.png’ | asset_url | img_tag: ‘Logo’,

‘cssclass1 cssclass2’ }}
‍

Remove img-tag to add class ID’s

"logo"
‍

You can also link the the Liquid Cheat Sheet here or download the official learning liquid manual here. Hopefully you find the above useful as well as the resource link and guide. If you have a Shopify project you are working on and get stuck, give us a shout to see if we can help.

‍