A curated, practical hub for Shopify theme developers: the best tools, docs, communities, and creators worth following, plus a Liquid cheat sheet (the filters, objects, and tags you actually use), tested copy-paste snippets (free shipping bar, sold-out badge, breadcrumbs, sticky add to cart, and more), and the Liquid that AI tools love to hallucinate.
Everything here is real and tested, not AI guesses. If something is wrong or missing, open a PR.
Want to practice this stuff hands-on instead of just reading it? Each snippet links to an interactive lesson on learnshopify.dev where you write the Liquid against a live storefront and watch it render. Free during the open beta.
- Quick reference
- Copy-paste snippets
- Liquid that AI hallucinates (and the real version)
- Official tools every Shopify dev should have
- Docs and references
- Best Shopify developer YouTube channels
- Communities
- Learn it properly
- Contributing
- License
Prices are stored in cents, so always format them with a money filter, never a hand-typed $.
| Filter | What it does | Example |
|---|---|---|
money |
Cents to the store's currency format | {{ 1899 | money }} -> $18.99 |
money_with_currency |
Same, with the ISO code | {{ 1899 | money_with_currency }} -> $18.99 USD |
money_without_trailing_zeros |
Drops .00 |
{{ 2000 | money_without_trailing_zeros }} -> $20 |
image_url + image_tag |
Responsive image URL, then an <img> |
{{ product.featured_image | image_url: width: 400 | image_tag }} |
default |
Fallback when the value is blank | {{ product.vendor | default: "Our shop" }} |
where |
Filter an array by a property | {{ collection.products | where: "available", true }} |
map |
Pull one property from each item | {{ collection.products | map: "title" }} |
truncate / truncatewords |
Cap by characters / words | {{ product.title | truncate: 40 }} |
date |
Format a date (or a Unix timestamp) | {{ article.published_at | date: "%b %d, %Y" }} |
handleize |
URL-safe slug | {{ "Cold Brew" | handleize }} -> cold-brew |
| Object | Where it lives | Useful properties |
|---|---|---|
product |
Product pages, loops | title, price, price_min, price_max, price_varies, available, featured_image, variants, collections, metafields |
variant |
Inside product.variants |
id, price, available, inventory_quantity, inventory_management, inventory_policy |
collection |
Collection pages | title, products, url, description |
cart |
Everywhere | total_price (cents), item_count, items |
customer |
When logged in | first_name, orders_count, tags |
shop |
Everywhere | name, url, currency |
linklists |
Everywhere | linklists['main-menu'].links (then link.title, link.url, link.active, link.links) |
routes |
Everywhere | routes.root_url, routes.cart_url, routes.search_url (never hardcode paths) |
{% assign x = 5 %} {# set a variable #}
{% capture html %}...{% endcapture %} {# capture rendered output into a variable #}
{% if product.available %}...{% endif %}
{% unless product.available %}...{% endunless %}
{% for product in collection.products %}...{% endfor %} {# capped at 50, use paginate beyond that #}
{% render 'snippet', product: product %} {# isolated scope, pass variables in #}
{% paginate collection.products by 12 %}...{% endpaginate %}
{% schema %}{ ... }{% endschema %} {# section/block settings #}
{% stylesheet %}...{% endstylesheet %} {# per-component CSS #}Tested, production-shaped Liquid. Each one links to a full walkthrough (the why, the gotchas, the AI traps) and an interactive version where you build it yourself.
| Snippet | File | Guide |
|---|---|---|
| Free shipping progress bar | free-shipping-bar.liquid | Guide |
| Sold out / low-stock badge | stock-badge.liquid | Guide |
| Breadcrumbs (+ SEO schema) | breadcrumbs.liquid | Guide |
| Related products (no app) | related-products.liquid | Guide |
| Sticky add to cart bar | sticky-add-to-cart.liquid | Guide |
| Estimated delivery date | delivery-estimate.liquid | Guide |
| Size chart from a metafield | size-chart.liquid | Guide |
| "From" price for variants | see guide | Guide |
| Sale badge from compare-at price | see guide | Guide |
The single most useful skill in 2026: catching the plausible-but-wrong Liquid that AI tools confidently generate. Real examples:
| AI often writes | Why it's wrong | The real way |
|---|---|---|
{{ cart.taxes }} / cart.tax_price |
These properties do not exist on the cart object |
Compute from cart.total_price and the line items, or use the checkout |
{{ products | limit: 3 }} |
limit is not a filter |
Use the for loop param: {% for p in products limit: 3 %} |
{{ product.title | titleize }} |
titleize is a Rails filter, not a Shopify one |
Use capitalize, or upcase / downcase, or just the title as-is |
if cart.total_price > 50 |
total_price is in cents, so this triggers at 50 cents |
Compare in cents: if cart.total_price > 5000 |
${{ product.price }} |
Hardcoded symbol + raw cents | {{ product.price | money }} |
If a filter, tag, or object path is not in the official Liquid reference, it does not exist. Verify before you ship.
- Shopify CLI , scaffold, run a local dev server, and push themes.
- Theme Check , the linter for Liquid and theme files (built into the CLI).
- Shopify Liquid VS Code extension , syntax, autocomplete, and Theme Check in the editor.
- Dawn , Shopify's reference Online Store 2.0 theme. The best way to see how real sections, blocks, and snippets are structured.
- Theme Inspector for Chrome , profile Liquid render performance on a live store.
- Shopify GraphiQL app , explore and test Admin API queries.
- Hydrogen + Storefront API , for headless builds.
- Polaris , the design system for building Shopify apps.
- shopify.dev , the official theme docs.
- Liquid reference , every real filter, tag, and object.
- Theme architecture , sections, blocks, templates, and JSON.
- Metafields and custom data , the right home for structured product data.
- Section Rendering API , update parts of a page without a full reload.
Developer-focused channels (theme dev, Liquid, apps), not store-owner marketing:
- BosiDev , in-depth Shopify theme development, Liquid, and building a career as a Shopify dev.
- Coding with Jan , practical, project-based Shopify theme development tutorials.
- Code with Chris the Freelancer , Shopify theme development plus the freelance side of the craft.
- ShopifyDevs , the official channel: platform deep-dives, best practices, and new APIs.
Channel handles can change. If a link is dead, search the channel name on YouTube and open a PR with the fix.
- Shopify Community forums , the official forums, including a developers section.
- Shopify Partners , partner program, blog, and resources.
- r/shopify , the largest Shopify subreddit (read the rules before posting dev questions).
- Stack Overflow: shopify tag , for specific, answerable code questions.
Snippets are great for shipping fast, but the durable skill is the judgment behind them: knowing why a pattern is right, what breaks in production, and when AI got it wrong.
That is what learnshopify.dev is built for. You write real Liquid in the browser, watch a live storefront render your changes, build the features stores actually hire for, and get your code reviewed like you are on a team. Around 100 lessons are live and it is free during the open beta.
Good starting points:
- How to become a Shopify developer
- Learning Shopify development in the AI era
- Sections and blocks, explained
Found a bug, a better pattern, or a resource worth adding? Open an issue or a PR. Two rules:
- Liquid must be real and tested. If it is not in the official docs, it does not go in.
- No affiliate spam. Resources are included because they are genuinely useful, not because they paid to be here.
MIT. Use the snippets in any project, commercial or not.