Practical tutorials and references for Shopify theme development and HTML-to-Liquid conversion.
A complete, beginner-friendly walkthrough for turning a static HTML block into a fully editable Shopify section — with schema, settings, blocks, and presets you can paste straight into your theme.
Shopify's July 2026 Liquid preview adds block and partial tags for readable page composition and targeted server-rendered updates. Learn what they do, how the syntax works, and when to test them.
The shopify-account web component is now required in Theme Store submissions. Add it to desktop and mobile headers, connect its menu, style it safely, and test every customer state.
Shopify CLI 3.83 and older will stop supporting theme workflows on password-protected storefronts on October 1, 2026. Check affected commands, upgrade safely, and unblock every developer environment.
Shopify's new standard storefront communication layer lets themes emit predictable commerce events while apps and agents call cart actions across Liquid storefronts. Here's how to adopt it safely.
Shopify now subsets CSS from Liquid stylesheet tags by each page's render tree. Learn which co-located patterns are safe, why unrelated cross-file classes can disappear, and how Theme Check finds them.
Shopify's new color_palette setting gives merchants one editable theme-wide grid while section colors inherit named defaults. Learn the schema rules, Liquid access, overrides, and migration strategy.
The 2026 article_list setting lets merchants select multiple published posts for featured articles, related reading, and editorial galleries. Build a resilient section with useful empty states and responsive images.
Learn why wrapping a Shopify richtext setting in a paragraph creates invalid HTML, how to render it safely, and how to test the result in a complete section.
Build a merchant-editable Shopify hero with semantic headings, descriptive links, responsive images, visible focus, readable contrast, and a complete valid schema.
Turn a repeated HTML feature grid into reorderable Shopify blocks with a complete Liquid section, valid schema, responsive styles, and a practical test plan.
Diagnose invalid Shopify section schema by separating JSON syntax, schema rules, setting IDs, block references, and Liquid rendering into a repeatable workflow.
Review generated Shopify sections systematically: content modelling, Liquid and schema validity, security, accessibility, responsive media, editor behaviour, and development-theme testing.
Build a complete image-led Shopify section with image_url, image_tag, responsive candidates, useful alt text, stable dimensions, and deliberate loading behaviour.
Choose the right Shopify Liquid output filter for HTML text, attributes, rich text, and JSON, with a complete section and adversarial test cases.
The mistakes that quietly break Shopify themes — deprecated tags and filters, missing nil-safety, hardcoded URLs, image CLS, invalid schema — each with the wrong code, the right code, and the Theme Check rule that catches it.
A complete, practical reference to every Shopify section and block input setting — basic inputs, specialized resource pickers, the color family, and metaobject settings — with the Liquid you write to read each value.
How to read metafields in Shopify themes the right way — the namespace/key access path, why you almost always need .value, working with list and JSON types, and the metafield filters that save you work.
Theme blocks are reusable, nestable blocks that live in their own /blocks folder and render with content_for. Here's how they differ from section blocks, how nesting and presets work, and when to use each.
Every section schema attribute explained — name, tag, class, limit, settings, blocks, max_blocks, presets, default, locales, enabled_on and disabled_on — with annotated examples and the rules you can't break.
A practical map of Shopify Liquid objects — global objects, resource objects, the forloop object, and where each is available — with nil-safe examples and the mistakes to avoid.
Convert a complete HTML hero into an editable Shopify section, inspect the generated Liquid and schema, then test the result safely in a development theme.
Should you let AI convert your HTML to Shopify Liquid, or do it manually? Here's a clear, practical breakdown of how each method works, what it's best at, and how to combine both for faster, cleaner sections.
A practical review checklist for turning static HTML into maintainable Shopify Liquid with valid schema, safe output, responsive images, and merchant-friendly settings.
