shopify-liquid

• Output: {{ ... }} - Prints content to the page.
• Tags: {% ... %} - Logic (if, for, assign).
• Filters: {{ value | filter }} - Modifies output.

Modern apps inject code into themes using App Blocks, avoiding direct legacy code edits.

`schema` Tag

Defines settings available in the Theme Editor.

```liquid

{% schema %}

{

"name": "Star Rating",

"target": "section",

"settings": [

{

"type": "color",

"id": "star_color",

"label": "Star Color",

"default": "#ff0000"

}

]

}

{% endschema %}

```

Accessing Settings

Use block.settings.id to access values defined in schema.

```liquid

```

App Embed Blocks

Scripts that run globally (e.g., analytics, chat bubbles).

```liquid

{% schema %}

{

"name": "Chat Bubble",

"target": "body",

"javascript": "chat.js",

"settings": []

}

{% endschema %}

```

• 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 }}

• 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)

Pass Liquid data to JavaScript using data attributes or global variables.

Pattern: Data Attributes (Preferred)

```liquid

```

Pattern: Global Object (Legacy)

```liquid

```

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.