Shopify Liquid Skill
Liquid is the template language used by Shopify to load dynamic content on storefronts.
- Core Syntax Output: {{ ... }} - Prints content to the page. Tags: {% ... %} - Logic (if, for, assign). Filters: {{ value | filter }} - Modifies output.
- Theme App Extensions (App Blocks)
Modern apps inject code into themes using App Blocks, avoiding direct legacy code edits.
schema Tag
Defines settings available in the Theme Editor.
{% schema %} { "name": "Star Rating", "target": "section", "settings": [ { "type": "color", "id": "star_color", "label": "Star Color", "default": "#ff0000" } ] }
Accessing Settings
Use block.settings.id to access values defined in schema.
App Embed Blocks
Scripts that run globally (e.g., analytics, chat bubbles).
{% schema %} { "name": "Chat Bubble", "target": "body", "javascript": "chat.js", "settings": [] }
- 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 }}
- 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)
- Using with JavaScript
Pass Liquid data to JavaScript using data attributes or global variables.
Pattern: Data Attributes (Preferred)
Pattern: Global Object (Legacy)
- App Proxies
When the request comes from an App Proxy, liquid renders the response before sending it to the layout.
If you return Content-Type: application/liquid, Shopify will parse the Liquid in your response.