We'd love to hear from you, fill out the form below and one of the team will get back to you within in no time at all. Maybe you prefer a more direct route? Drop us an email at info@star-digital.co.uk or if you fancy a chat give us a call on: 01908 030 999.

The basics

Tell us a bit about it:

Handy things to tell us are what you’re aiming to achieve, what you have now, and your approximate budget and timescales for the project.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
September 15, 2017

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



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


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.

Written by
Astronaut - Moon - Star DigitalAstronaut - Moon - Star Digital