Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns. Use when creating or editing .liquid files for Shopify themes, working with schema, doc, stylesheet, javascript tags, or Shopify Liquid objects/filters/

Shopify Liquid Themes Theme Architecture When to use what Need Use Why Full width customizable module Section Has {% schema %} , appears in editor, renders blocks Small nestable component with editor settings Block Has {% schema %} , can nest inside sections/blocks Reusable logic, not editable by merchant Snippet No schema, rendered via {% render %} , takes params Logic shared across blocks/snippets Snippet Blocks can't {% render %} other blocks Liquid Syntax Delimiters {{ ... }} — Output (prints a value) {{ ... }} — Output with whitespace trimming {% ... %} — Logic tag (if, for, assign) — prints nothing {% ... %} — Logic tag with whitespace trimming Operators Comparison: == , != , , < , = , <= Logical: and , or , contains Critical Gotchas 1. No parentheses in conditions — use nested {% if %} instead 2. No ternary — always use {% if cond %}value{% else %}other{% endif %} 3. for loops max 50 iterations — use {% paginate %} for larger arrays 4. contains only works with strings — can't check objects in arrays 5. {% stylesheet %} / {% javascript %} don't render Liquid — no Liquid inside them 6. Snippets can't access outer scope variables — pass them as render params 7. include is deprecated — always use {% render 'snippet name' %} 8. {% liquid %} tag — multi line logic without delimiters; use echo for output Variables Filter Quick Reference Filters are chained with . Output type of one filter feeds input of next. Array: compact , concat , find , find index , first , has , join , last , map , reject , reverse , size , sort , sort natural , sum , uniq , where String: append , capitalize , downcase , escape , handleize , lstrip , newline to br , prepend , remove , replace , rstrip , slice , split , strip , strip html , truncate , truncatewords , upcase , url decode , url encode Math: abs , at least , at most , ceil , divided by , floor , minus , modulo , plus , round , times Money: money , money with currency , money without currency , money without trailing zeros Color: color brightness , color darken , color lighten , color mix , color modify , color saturate , color desaturate , color to hex , color to hsl , color to rgb Media: image url , image tag , video tag , external video tag , media tag , model viewer tag URL: asset url , asset img url , file url , shopify asset url HTML: link to , script tag , stylesheet tag , time tag , placeholder svg tag Localization: t (translate), format address , currency selector Other: date , default , json , structured data , font face , font url , payment button Full details: [language filters](references/filters language.md), [HTML/media filters](references/filters html media.md), [commerce filters](references/filters commerce.md) Tags Quick Reference Category Tags Theme content for , layout , section , sections , schema , stylesheet , javascript , style Control if , elsif , else , unless , case , when Iteration for , break , continue , cycle , tablerow , paginate Variable assign , capture , increment , decrement , echo HTML form , render , raw , comment , liquid Documentation doc Full details with syntax and parameters: [references/tags.md](references/tags.md) Objects Quick Reference Global objects (available everywhere) cart , collections , customer , localization , pages , request , routes , settings , shop , template , theme , linklists , images , blogs , articles , all products , metaobjects , canonical url , content for header , content for layout , page title , page description , handle , current page Page specific objects Template Objects /product product , remote product /collection collection , current tags /cart cart /article article , blog /blog blog , current tags /page page /search search /customers/ customer , order Full reference: [commerce objects](references/objects commerce.md), [content objects](references/objects content.md), [tier 2](references/objects tier2.md), [tier 3](references/objects tier3.md) Schema Tag Sections and blocks require {% schema %} with a valid JSON object. Sections use section.settings. , blocks use block.settings. . Section schema structure Block schema structure Setting type decision table Need Setting Type Key Fields On/off toggle checkbox default: true/false Short text text placeholder Long text textarea placeholder Rich text (with <p ) richtext — Inline rich text (no <p ) inline richtext — Number input number placeholder Slider range min , max , default (all required), step , unit Dropdown/segmented select options: [{value, label}] Radio buttons radio options: [{value, label}] Text alignment text alignment default: "left"/"center"/"right" Color picker color default: " 000000" Image upload image picker — Video upload video — External video URL video url accept: ["youtube", "vimeo"] Product picker product — Collection picker collection — Page picker page — Blog picker blog — Article picker article — URL entry url — Menu picker link list — Font picker font picker default (required) Editor header header content (no id needed) Editor description paragraph content (no id needed) visible if pattern Conditionally shows/hides a setting in the editor based on other setting values. Block entry types { "type": "@theme" } — Accept any theme block { "type": "@app" } — Accept app blocks { "type": "slide" } — Accept only the slide block type Full schema details and all 33 setting types: [references/schema and settings.md](references/schema and settings.md) CSS & JavaScript Per component styles and scripts Use {% stylesheet %} and {% javascript %} in sections, blocks, and snippets: One tag each per file — multiple {% stylesheet %} tags will error No Liquid inside — these tags don't process Liquid; use CSS variables or classes instead Only supported in sections/ , blocks/ , and snippets/ {% style %} tag (Liquid aware CSS) For dynamic CSS that needs Liquid (e.g., color settings that live update in editor): CSS patterns for settings Single CSS property — use CSS variables: Multiple CSS properties — use CSS classes as select values: LiquidDoc ( {% doc %} ) Required for: snippets (always), blocks (when statically rendered via {% content for 'block' %} ) Param types: string , number , boolean , image , object , array Translations Every user facing string must use the t filter Variable interpolation Locale file: Locale file structure Key naming conventions Use snake case and hierarchical keys (max 3 levels) Use sentence case for all text (capitalize first word only) Schema labels use t: prefix: "label": "t:labels.heading" Group by component: sections.hero.heading , blocks.slide.title References Filters: [language](references/filters language.md) (77), [HTML/media](references/filters html media.md) (45), [commerce](references/filters commerce.md) (30) [Tag reference (30 tags)](references/tags.md) Objects: [commerce](references/objects commerce.md) (5), [content](references/objects content.md) (10), [tier 2](references/objects tier2.md) (69), [tier 3](references/objects tier3.md) (53) [Schema & settings reference (33 types)](references/schema and settings.md) [Complete examples (snippet, block, section)](references/examples.md)

shopify-liquid-themes