Shopify Cheatsheet

# Output (double curly braces)
{{ product.title }}
{{ cart.total_price | money }}
{{ shop.name }}

# Logic tags
{% if product.available %}
  In stock
{% elsif product.compare_at_price %}
  Sold out (was {{ product.compare_at_price | money }})
{% else %}
  Unavailable
{% endif %}

# Loops
{% for product in collection.products %}
  {{ product.title }} - {{ product.price | money }}
{% endfor %}

# Comments
{% comment %} This is hidden {% endcomment %}

# Shop
{{ shop.name }}
{{ shop.url }}
{{ shop.email }}
{{ shop.currency }}

# Product
{{ product.title }}
{{ product.price | money }}
{{ product.description }}
{{ product.featured_image | img_url: 'medium' }}
{{ product.variants.size }}
{{ product.tags | join: ', ' }}

# Collection
{{ collection.title }}
{{ collection.products_count }}
{{ collection.url }}

# Cart
{{ cart.item_count }}
{{ cart.total_price | money }}
{{ cart.items }}

# Customer
{{ customer.first_name }}
{{ customer.email }}
{{ customer.orders_count }}

# Money
{{ price | money }}              $10.00
{{ price | money_with_currency }} $10.00 USD

# String
{{ "hello" | upcase }}           HELLO
{{ "HELLO" | downcase }}         hello
{{ "hello" | capitalize }}       Hello
{{ "hello world" | truncate: 8 }} hello...
{{ "hello" | append: " world" }} hello world
{{ "hello" | replace: "l", "r" }} herro
{{ string | strip_html }}

# Image
{{ img | img_url: 'small' }}     100x100
{{ img | img_url: 'medium' }}    240x240
{{ img | img_url: 'large' }}     480x480
{{ img | img_url: '600x' }}      width 600

# URL
{{ page.url | link_to: page.title }}
{{ 'style.css' | asset_url }}
{{ 'logo.png' | shopify_asset_url }}

# Date
{{ article.created_at | date: "%B %d, %Y" }}
# → January 15, 2024

# Assign
{% assign my_var = "hello" %}
{% capture my_block %}...{% endcapture %}

# Conditionals
{% if condition %}{% endif %}
{% unless condition %}{% endunless %}
{% case variable %}
  {% when 'value' %} ...
{% endcase %}

# Loops
{% for item in array limit:5 offset:2 %}
  {{ forloop.index }}   1-based
  {{ forloop.index0 }}  0-based
  {{ forloop.first }}   true/false
  {{ forloop.last }}    true/false
{% endfor %}

# Include / Render
{% render 'snippet-name' %}
{% render 'card', product: product %}

# Section
{% section 'header' %}

# Raw (no processing)
{% raw %}{{ not processed }}{% endraw %}

theme/
├── assets/          CSS, JS, images
├── config/
│   ├── settings_data.json
│   └── settings_schema.json
├── layout/
│   └── theme.liquid    Main layout
├── locales/         Translations
├── sections/        Theme sections
├── snippets/        Reusable partials
└── templates/
    ├── index.json      Homepage
    ├── product.json    Product page
    ├── collection.json Collection page
    ├── cart.json       Cart page
    ├── page.json       Custom pages
    └── customers/      Account pages

# Sections (JSON templates, OS 2.0)
{% schema %}
{ "name": "My Section",
  "settings": [...] }
{% endschema %}

# Install
npm install -g @shopify/cli @shopify/theme

# Auth
shopify auth login --store mystore.myshopify.com

# Theme commands
shopify theme dev         Local development
shopify theme push        Push to store
shopify theme pull        Pull from store
shopify theme list        List themes
shopify theme info        Current theme info
shopify theme check       Lint theme
shopify theme package     Create .zip

# App commands
shopify app init         New app
shopify app dev          Start dev server
shopify app deploy       Deploy app

# Storefront API (public)
POST /api/2024-01/graphql.json
X-Shopify-Storefront-Access-Token: token

# Admin API (private)
GET /admin/api/2024-01/products.json
X-Shopify-Access-Token: token

# REST endpoints
/products.json
/orders.json
/customers.json
/collections.json
/inventory_levels.json

# GraphQL (preferred)
{
  products(first: 10) {
    edges {
      node { id title priceRangeV2 { ... } }
    }
  }
}

# Webhooks
orders/create, products/update,
carts/update, customers/create