Shopify Liquid Skill

1. Core Syntax

• Output:

  {{ ... }}

  - Prints content to the page.
• Tags:

  {% ... %}

  - Logic (if, for, assign).
• Filters:

  {{ value | filter }}

  - Modifies output.

2. Theme App Extensions (App Blocks)

schema

Tag

{% schema %}
{
  "name": "Star Rating",
  "target": "section",
  "settings": [
    {
      "type": "color",
      "id": "star_color",
      "label": "Star Color",
      "default": "#ff0000"
    }
  ]
}
{% endschema %}

Accessing Settings

block.settings.id

<div style="color: {{ block.settings.star_color }}">
  ★★★★★
</div>

App Embed Blocks

{% schema %}
{
  "name": "Chat Bubble",
  "target": "body",
  "javascript": "chat.js",
  "settings": []
}
{% endschema %}

3. Common Objects

• product

  :

  • {{ product.title }}

  • {{ product.variants.first.id }}

  • {{ product.featured_image | image_url: width: 400 }}

• cart

  :

  • {{ cart.item_count }}

  • {{ cart.currency.iso_code }}

• customer

  :

  • {% if customer %}

    checks if logged in.

• shop

  :

  • {{ shop.name }}

  • {{ shop.permanent_domain }}

4. Useful Filters

• Money:

  {{ product.price | money }}

  ->

  $10.00

• Asset URL:

  {{ 'style.css' | asset_url }}

  (Reference assets in

  assets/

  folder)
• JSON:

  {{ product | json }}

  (Useful for passing data to JS)

5. Using with JavaScript

<div id="my-app" data-product-id="{{ product.id }}" data-shop="{{ shop.permanent_domain }}"></div>

<script>
  const app = document.getElementById('my-app');
  const productId = app.dataset.productId;
</script>

<script>
  window.ShopifyData = {
    product: {{ product | json }},
    cart: {{ cart | json }}
  };
</script>

6. App Proxies

liquid

• If you return

  Content-Type: application/liquid

  , Shopify will parse the Liquid in your response.