shopify-liquid_skill

Overview

This skill is a concise guide for using the Liquid template language inside Shopify Theme App Extensions and Themes. It focuses on practical patterns for App Blocks, App Embed Blocks, theme edits, and passing Liquid data to JavaScript. Use it to implement dynamic storefront features without breaking core theme code.

How this skill works

It explains Liquid's core primitives: output ({{ }}), tags ({% %}) for logic, and filters to transform values. The skill covers Theme App Extension patterns (schema, block.settings), common global objects (product, cart, customer, shop), useful filters (money, asset_url, json), and recommended ways to surface Liquid data to client-side JavaScript. It also outlines App Proxy behavior and when Shopify parses Liquid returned from a proxy.

When to use it

• Building or configuring App Blocks and App Embed Blocks for themes
• Adding dynamic storefront content like product snippets or cart widgets
• Passing server-rendered data to client-side scripts safely
• Creating Theme Editor settings using the schema block
• Implementing app proxies that return Liquid-parsed responses

Best practices

• Define settings in a {% schema %} block and read values with block.settings.id to keep editor controls consistent
• Prefer data attributes for passing Liquid to JavaScript (data-*), avoid embedding large JSON on window objects
• Use filters like money, asset_url, and json to format values for display or consumption by scripts
• Scope App Blocks to avoid editing legacy theme templates directly—use target in schema to attach blocks safely
• Check for objects (e.g., {% if customer %}) before accessing properties to prevent errors in templates

Example use cases

• Create a Star Rating App Block with editable color using schema and block.settings.star_color
• Add a global chat or analytics script as an App Embed Block targeting body with a javascript file
• Render product metadata into a DOM element via data attributes for a quick client-side widget
• Return Liquid from an App Proxy with Content-Type: application/liquid so Shopify renders it within the storefront layout
• Use product | json to pass product data into a lightweight front-end picker component