Shopify Liquid Cheatsheet

when choosing a theme.

• whats the product to cart UX like? - you may not be able to change this, so ensure this part is good.
• block types are important. subcollections, collections, products, this are all specific to content and are not interchangable

SHopify conditional

{% if product.type == "Candle" %}
//do the thing
{% endif %}

Add SCSS to Shopify

Even though shopify is not supporting Sass Natively anymore. It’s good to have all the power of sass such as nested styles in your project. Otherwise css becomes a mess. Use this simple node package js file config to output your sass generated css then add stylesheet to head see below

Add custom Stylesheet to head .. edit theme.liquid

  {{ 'custom.css' | asset_url | stylesheet_tag }}

You may need to run shopify logout then ensure you are logged into the correct account

Add custom css to section

<link rel="stylesheet" href="{{ 'test2.css' | asset_url }}" />

Create custom template

Keep your default templates untouched by creating a custom templates instead.

1. Go to customiser
2. Go to edit code
3. Go to add new template
4. Choose the template type you want to create a new version of

Global sections

Sections are global by default when they are added to templates.

Include a section from the “sections” folder in the theme root

  {% section 'header' %}

also you can include snippets which are less dynamic the sections

  {%include 'menu' %}

Schema

schema is like custom fields