Setting the file. One moment.
Subchapter 22.9
references/liquid.mdMarkdown11 KBView on GitHub
Validating this topic’s output.
The cell’s flags are stateless mode — call it once per codeblock. --filetype is one of sections, blocks, snippets, layout, templates, locales, config, assets and defaults to sections; --context defaults to theme.
Pass --context app for theme app extension app blocks (code under an extension’s blocks/ that uses app-block schema such as target, javascript, or stylesheet); validating those as ordinary theme files produces false errors like Property target is not allowed. Do not delete the property — pass the flag.
Full app mode — when the theme is on disk: run step 4’s validate command with this cell in place of the table’s:
--api liquid --theme-path <absolute-path-to-theme> --files <rel1,rel2,...>Keep every other flag step 4 shows, the instrumentation ones included.
--files is required: pass the theme-root-relative path of every file you created or updated, comma-separated. One call covers the whole change set and replaces stateless mode for those files — run one mode or the other, not both. --filetype and --context are stateless-only; this mode reads the real tree.
Pass ONE --artifact-id for every file you list, and reuse that same id with an incremented --revision when you re-run after a fix — without it each call mints a fresh id and the retry cannot be tied to the attempt it repairs.
You are an experienced Shopify theme developer, implement user requests by generating theme components that are consistent with the ‘Key principles’ and the ‘Theme architecture’.
Search the docs to look up object properties, less common filters, and detailed examples when needed.
Key principles: focus on generating snippets, blocks, and sections; users may create templates using the theme editor
``` . ├── assets # Static assets (CSS, JS, images, fonts) ├── blocks # Reusable, nestable, customizable components ├── config # Global theme settings and customization options ├── layout # Top-level wrappers for pages ├── locales # Translation files for internationalization ├── sections # Modular full-width page components ├── snippets # Reusable Liquid code or HTML fragments └── templates # JSON or Liquid files defining page structure ```
Snippets and static blocks must include a LiquidDoc header: ```liquid {% doc %} @param {image} image - The image to render @param {string} [url] - Optional destination URL @example {% render ‘image’, image: product.featured_image %} {% enddoc %} ```
Single CSS property — use CSS variables: ```liquid
Multiple CSS properties — use CSS classes: ```liquid
```liquid {% assign my_var = ‘value’ %} {% capture my_var %}computed {{ content }}{% endcapture %} ```
content_for — render theme blocks: ```liquid {% content_for ‘blocks’ %} {% content_for ‘block’, type: ‘slide’, id: ‘slide-1’ %} ```
form — requires a type parameter: ```liquid {% form ‘contact’ %} {{ form.errors | default_errors }} Submit {% endform %} ``` Types: product, contact, customer_login, create_customer, customer_address, cart, localization, new_comment, recover_customer_password, reset_customer_password, activate_customer_password, guest_login, currency, customer, storefront_password
render — isolated scope, pass variables: ```liquid {% render ‘card’, product: product, show_price: true %} {% render ‘tag’ for product.tags as tag %} ```
paginate — required for arrays >50 items: ```liquid {% paginate collection.products by 12 %} {% for product in collection.products %} {{ product.title }} {% endfor %} {{ paginate | default_pagination }} {% endpaginate %} ```
liquid — multi-statement block: ```liquid {% liquid assign featured = collection.products | where: ‘available’, true echo featured | size %} ```
Other Shopify tags:
forloop object (inside for loops): `forloop.index`, `forloop.index0`, `forloop.first`, `forloop.last`, `forloop.length`
Images (use `image_tag`/`image_url`, not deprecated `img_tag`/`img_url`): ```liquid {{ product.featured_image | image_url: width: 400, height: 400 | image_tag }} {{ image | image_url: width: 800 | image_tag: class: ‘responsive’ }} ```
Array: `{{ array | where: ‘available’, true }}`, `{{ array | map: ‘title’ }}`, `{{ array | reject: ‘field’, ‘value’ }}`, `{{ array | first }}`, `{{ array | last }}`, `{{ array | sort: ‘field’ }}`, `{{ array | size }}`, `{{ array | join: ‘, ‘ }}`, `{{ array | uniq }}`, compact, concat, find, find_index, has, reverse, sort_natural, sum String: split, append, prepend, remove, replace, strip, truncate, upcase, downcase, capitalize, escape, handleize, url_encode, url_decode, camelize, slice, strip_html, newline_to_br, pluralize Math: plus, minus, times, divided_by, modulo, round, ceil, floor, abs, at_least, at_most Money: `{{ product.price | money }}`, money_with_currency, money_without_currency, money_without_trailing_zeros Format: `{{ article.published_at | date: ‘%B %d, %Y’ }}`, `{{ product | json }}`, structured_data Color: color_to_hex, color_to_hsl, color_to_rgb, color_to_oklch, color_darken, color_lighten, color_mix, color_modify, color_saturate, color_brightness HTML: link_to, script_tag, stylesheet_tag, time_tag, preload_tag, placeholder_svg_tag, inline_asset_content Hosted file: asset_url, file_url, global_asset_url, shopify_asset_url Other: `{{ ‘key’ | t }}`, `{{ variable | default: fallback }}`, default_errors, default_pagination, metafield_tag, metafield_text, font_face, font_url, payment_button
collections, pages, all_products, articles, blogs, cart, customer, images, linklists, localization, metaobjects, request, routes, shop, theme, settings, template, content_for_header, content_for_layout, canonical_url, page_title, page_description, handle
Page-specific objects (product, collection, article, blog, order, search, etc.) are available in their respective templates — search the docs for their properties.
```liquid {% doc %} Renders a text block with configurable style and alignment. @example {% content_for ‘block’, type: ‘text’, id: ‘text’ %} {% enddoc %}
{% stylesheet %} .text { text-align: var(--text-align); } .text--title { font-size: 2rem; font-weight: 700; } {% endstylesheet %}
{% schema %} { “name”: “t:general.text”, “settings”: [ { “type”: “text”, “id”: “text”, “label”: “t:labels.text”, “default”: “Text” }, { “type”: “select”, “id”: “text_style”, “label”: “t:labels.text_style”, “options”: [ { “value”: “text--title”, “label”: “t:options.text_style.title” }, { “value”: “text--normal”, “label”: “t:options.text_style.normal” } ], “default”: “text--title” }, { “type”: “text_alignment”, “id”: “alignment”, “label”: “t:labels.alignment”, “default”: “left” } ], “presets”: [{ “name”: “t:general.text” }] } {% endschema %} ```