# learnshopify.dev

> Interactive training to become a professional Shopify developer. You are "hired" as a junior developer at a fictional coffee company, write real Liquid in a live in-browser editor against a production-style Shopify (Horizon) theme, and get reviewed to a real production bar. Built for the AI era: the focus is judgment, debugging, theme architecture, and reviewing AI-generated code, the durable skills, not just typing syntax.

## Key pages

- [Home](https://learnshopify.dev/): What the platform is, how the lesson loop works, and the curriculum overview.
- [Roadmap](https://learnshopify.dev/roadmap): The six-module curriculum, what is live now and what is coming.
- [Pricing](https://learnshopify.dev/pricing): Module 1 free; Pro unlocks all 110 lessons at €29/mo or €290/yr, plus a founder lifetime seat.
- [Projects](https://learnshopify.dev/build): Guided build projects for practising real Shopify theme features.
- [Resources](https://learnshopify.dev/resources): Reference material and tools for Shopify developers.
- [Blog](https://learnshopify.dev/blog): Practical Shopify theme-development guides (Liquid, the object model, building production themes).

## Blog: Shopify development guides

- [How to block VPN and proxy traffic on Shopify (2026 guide)](https://learnshopify.dev/blog/how-to-block-vpn-on-shopify): Shopify cannot detect VPNs natively, so this needs an app. Here's how to set it up, and why blocking every VPN visitor outright is usually the wrong setting to choose.
- [How to block a country on Shopify (2026 guide)](https://learnshopify.dev/blog/how-to-block-a-country-on-shopify): Three ways to block a country on Shopify: shipping zones, Shopify Markets, and a blocking app. Which one you need depends on whether you want to stop orders or stop access. Step by step, with the free options first.
- [How to block an IP address on Shopify (2026 guide)](https://learnshopify.dev/blog/how-to-block-an-ip-address-on-shopify): Shopify has no native IP blocking, so this needs an app. Here's how to do it, how to find the offending IP in the first place, and why blocking a single address is usually the wrong rule.
- [There is no Shopify firewall: the four layers you can actually block traffic at](https://learnshopify.dev/blog/shopify-block-traffic-layers): You can't put a WAF in front of a Shopify storefront, and Cloudflare's proxy is explicitly unsupported. Here are the four layers where blocking is actually possible, what each one can enforce, and what it can't.
- [You can't get a visitor's IP address in Shopify Liquid. Here's why.](https://learnshopify.dev/blog/shopify-liquid-visitor-ip-address): The Liquid request object exposes five properties, and none of them is the visitor's IP. Here's the architectural reason, where the IP does exist on Shopify, and what to do at each layer instead.
- [localization.country is not geolocation (and most Shopify country-blocking snippets are broken)](https://learnshopify.dev/blog/shopify-detect-visitor-country-liquid): Nearly every Shopify geo-blocking tutorial checks localization.country. That property is a shopper-controlled dropdown, not the visitor's location. Here's what it really means and how to detect country correctly.
- [Ship analytics in your Shopify app without building a data stack](https://learnshopify.dev/blog/shopify-app-analytics-shopifyql): Shopify apps can now model, query, and embed analytics natively: analytics-queryable metafields, App Events, a versioned ShopifyQL API, and metric-card web components. Here's what it deletes from your codebase.
- [Shopify Events vs webhooks: field-level triggers and custom GraphQL payloads](https://learnshopify.dev/blog/shopify-events-vs-webhooks): Shopify's next-generation Events replace fixed-payload webhook topics with subscriptions that declare which fields must change and what GraphQL shape to return. Here's how they differ, and when to migrate.
- [Shopify's new Liquid block and partial tags: pages composed in Liquid, not JSON](https://learnshopify.dev/blog/shopify-liquid-block-partial-tags): The Liquid July '26 preview lets a .liquid template own its whole page structure with {% block %}, and refresh regions of server-rendered HTML with {% partial %}. Here's how both work, from Shopify's own reference theme.
- [Shopify DotDev 2026: what actually shipped for developers](https://learnshopify.dev/blog/shopify-dotdev-2026): DotDev 2026 (July 21-22, Toronto) came with three real platform shifts: Liquid-first templates, Events replacing webhooks, and native app analytics. Here's what landed, what's preview-only, and what to do about it.
- [Shopify Smart Pricing, explained: how the AI price tips actually work](https://learnshopify.dev/blog/shopify-smart-pricing-explained): Shopify's Smart Pricing app suggests markups and markdowns from your own store data, and can A/B test prices on live traffic. Here's how it generates a tip, what data it uses (and ignores), and where it fits.
- [Should you trust Shopify Smart Pricing? A developer's guide to reviewing AI price tips](https://learnshopify.dev/blog/shopify-smart-pricing-review): Shopify Smart Pricing's AI suggests prices from your data, but a tip is a starting point, not an order. Here's the judgment a professional brings: the store-level trap, the conversion-vs-profit trap, and what the model can't see.
- [Shopify's new Collections API: the shift to composable, source-based collections](https://learnshopify.dev/blog/shopify-new-collections-api): Shopify's 2026-07 Admin API rebuilds collections from the ground up. Collections are no longer 'custom' or 'smart', they're a union of composable sources. Here's the new model, what it unlocks, and what to watch.
- [Migrating to Shopify's flexible collections: a field-by-field guide for app developers](https://learnshopify.dev/blog/shopify-flexible-collections-migration): The 2026-07 collections model is non-breaking, but if your app reads or writes collections you still need to move. Here's what maps to what, the 404 gotcha with old API versions, and what stays the same.
- [Variant-level collections in Shopify: what theme developers can (and can't) build yet](https://learnshopify.dev/blog/shopify-variant-collections-storefront): The new 2026-07 collections model lets a collection hold individual variants, not whole products. Powerful, but the storefront side is still rolling out. Here's what works on a collection page today, and what to verify before you rely on it.
- [Shopify sub-collections and layered collections: what you can build now](https://learnshopify.dev/blog/shopify-sub-collections): Shopify's 2026 collections update lets one collection pull from others (sub-collections) and blend automated rules with hand-picked products in the same collection. Here's what that unlocks, in plain terms.
- [Do you need to migrate to Shopify's new collections? A decision guide](https://learnshopify.dev/blog/should-you-migrate-shopify-collections): There's no deadline and existing collections keep working, so who actually needs to act on Shopify's 2026-07 collections change? A clear answer for merchants, theme developers, and app developers.
- [Shopify Spring '26 Edition for developers: what actually changed](https://learnshopify.dev/blog/shopify-spring-2026-edition-developers): Shopify's Spring '26 Edition (June 17, 2026) is a pivot to agentic commerce. Here's what actually changed for theme, app, and storefront developers, and what to do about each.
- [Shopify color_palette setting: replace color schemes (2026)](https://learnshopify.dev/blog/shopify-color-palette-setting): Shopify's new color_palette setting type replaces color schemes as the recommended way to model a theme's colors. Here's the schema, the Liquid, and when to migrate.
- [Shopify llms.txt and agents.md: make your store AI-readable](https://learnshopify.dev/blog/shopify-llms-txt-agents-md): Shopify now lets you customize /llms.txt, /llms-full.txt and /agents.md from your theme. Here is how the agents.md.liquid template works and what to put in it.
- [Shopify standard storefront events and actions: a theme dev guide](https://learnshopify.dev/blog/shopify-storefront-events-actions): Shopify themes now emit standard events and expose actions so apps and AI agents interact reliably with any storefront. What it is, why it matters, how to adopt it.
- [The Shopify Catalog API, explained: AI product search without scraping](https://learnshopify.dev/blog/shopify-catalog-api-explained): Shopify's Catalog API (GA June 17, 2026) turns the product catalog into queryable infrastructure for AI agents: image search, multi-modal search, and URL lookup. Here's how it works.
- [What is the Universal Commerce Protocol (UCP)? A Shopify developer's guide](https://learnshopify.dev/blog/shopify-universal-commerce-protocol-ucp): UCP is the open standard Shopify co-developed with Google to give AI agents one shared language for commerce, from discovery to checkout. Here is what it means for you.
- [The Shopify AI Toolkit: Shopify in Cursor, Claude Code, and VS Code](https://learnshopify.dev/blog/shopify-ai-toolkit-mcp): Shopify's AI Toolkit (GA June 2026) plugs Shopify's docs, schemas, and CLI into Cursor, Claude Code, and VS Code. What it is and how to use it well.
- [Shopify Static Apps, explained: serverless apps with hosting and auth handled](https://learnshopify.dev/blog/shopify-static-apps-explained): Shopify Static Apps let you ship a real app with no server: Shopify hosts it, App Bridge and Polaris are auto-injected, and auth is handled. Here is when to use one.
- [Shopify Hydrogen in 2026: framework-agnostic core, explained](https://learnshopify.dev/blog/shopify-hydrogen-2026): Spring '26 moved Hydrogen's commerce logic out of React Router into a framework-agnostic core with agent skills. What changed, why, and whether Hydrogen is still React.
- [Dawn vs Horizon: which Shopify theme should you build on in 2026?](https://learnshopify.dev/blog/shopify-dawn-vs-horizon): A developer's decision guide to Dawn vs Horizon in 2026. The real architectural differences (theme blocks, nested blocks, web components), what each is good at, and a clear recommendation on which one to fork and learn.
- [Shopify developer salary in 2026: what you can actually earn](https://learnshopify.dev/blog/shopify-developer-salary-2026): A grounded look at Shopify developer pay in 2026: employed vs freelance, junior vs senior, US vs Europe vs remote, agency vs in-house, and how the AI era changes who earns what.
- [How to build a Shopify mega menu without an app (Liquid)](https://learnshopify.dev/blog/shopify-mega-menu-without-an-app): Build a multi-column Shopify mega menu in Liquid with no app, using the real navigation object: linklists, nested link.links, and link.active. Includes a section schema with a link_list setting and accessible markup.
- [Shopify announcement bar without an app (dismissible, with countdown)](https://learnshopify.dev/blog/shopify-announcement-bar-without-an-app): Build a dismissible Shopify announcement bar as a theme section with a real {% schema %}: a merchant-editable message, link, and colors, dismissal that sticks via localStorage, and an optional sale countdown driven by a merchant-set date. No app required.
- [How to build a Shopify cart drawer without an app (the Ajax way)](https://learnshopify.dev/blog/shopify-cart-drawer-without-an-app): Build a slide-out Shopify cart drawer with the Ajax API and no app: add to cart with no page reload, re-read /cart.js so totals are always right, then slide the drawer open. Full, production-grade code.
- [How to add a sticky add to cart bar in Shopify (no app)](https://learnshopify.dev/blog/shopify-sticky-add-to-cart): Build a sticky add to cart bar in Shopify with Liquid, the real product form, and an IntersectionObserver, so it slides in only after the main button scrolls away. Keeps the buy action one tap away on long product pages. No app required.
- [How to show an estimated delivery date on a Shopify product page](https://learnshopify.dev/blog/shopify-estimated-delivery-date): Add a "Order today, get it between Jun 14 and Jun 17" delivery estimate to your Shopify product page with pure Liquid date math. Covers the Unix-timestamp trick, making the lead time a setting, and the timezone caveat. No app required.
- [How to add a size chart to a Shopify product page (with metafields)](https://learnshopify.dev/blog/shopify-size-chart): Add a per-product size chart to your Shopify product page the right way: a metafield the merchant fills in per product, rendered in a collapsible details element. Covers the metafield setup, the Liquid, and why this beats hardcoding a table. No app required.
- [How to add breadcrumbs to a Shopify theme with Liquid (and the SEO schema)](https://learnshopify.dev/blog/shopify-breadcrumbs-liquid): Build accessible breadcrumb navigation in Shopify with Liquid: the template-aware markup, the routes object, BreadcrumbList structured data for Google, and the accessibility details most copy-pasted versions miss. No app required.
- [How to add a "Sold out" badge to Shopify product cards (no app)](https://learnshopify.dev/blog/shopify-sold-out-badge): Add a Sold out badge (and an optional "Only 3 left" low-stock badge) to Shopify product cards with a few lines of Liquid. Covers product.available, the inventory fields, where to place it, and the privacy trap of exposing raw stock counts.
- [How to show related products on a Shopify product page (without an app)](https://learnshopify.dev/blog/shopify-related-products-without-app): Two ways to add a "You may also like" row in Shopify: the quick collection-based Liquid version, and Shopify's native Product Recommendations API that returns genuinely related products. Includes the AJAX loader and where each approach fits.
- [How to show review stars on Shopify collection product cards](https://learnshopify.dev/blog/shopify-review-stars-product-card): Add star ratings to the product cards in a Shopify collection grid by reading the reviews.rating metafield your review app maintains. Here's the Liquid for the stars, the review count, accessibility, and hiding the block for products with no reviews.
- [How to become a Shopify developer in 2026 (a realistic roadmap)](https://learnshopify.dev/blog/how-to-become-a-shopify-developer): A step-by-step roadmap to becoming a Shopify developer in 2026: what to learn, in what order, what to skip, and how the job changed now that AI writes the code.
- [Do you still need to learn Shopify development in the AI era?](https://learnshopify.dev/blog/learn-shopify-development-ai-era): AI writes Liquid in seconds, so is learning Shopify development still worth it in 2026? Yes, but the skill shifted. Here's what actually makes a Shopify developer valuable now.
- [Shopify sections, blocks & theme blocks explained (Horizon, 2026)](https://learnshopify.dev/blog/shopify-sections-and-blocks-explained): Sections, blocks, and the newer theme blocks confuse almost everyone. Here's how they actually fit together in Shopify's current Horizon architecture, with when to reach for each.
- [How to build a free shipping progress bar in Shopify (no app)](https://learnshopify.dev/blog/shopify-free-shipping-progress-bar): A complete guide to building a "You're $12.00 away from free shipping" cart bar in Shopify with Liquid, the code, the cents-vs-dollars trap, live cart updates, styling, and how to make the threshold a merchant setting. No app required.
- [How to format money and currency in Shopify Liquid](https://learnshopify.dev/blog/shopify-money-filter-format-currency): Shopify stores prices in cents, so {{ product.price }} renders as 1899, not $18.99. Here's how the money filter works, the difference between money and money_with_currency, and why hardcoding a $ breaks international stores.
- [How to display product metafields in a Shopify theme](https://learnshopify.dev/blog/shopify-display-product-metafields): Metafields are how you add custom data to Shopify products, ingredients, specs, care instructions. Here's how to read them in Liquid, handle the different metafield types correctly, and render rich text and references without breaking.
- [How to add a sale badge in Shopify with compare_at_price](https://learnshopify.dev/blog/shopify-sale-badge-compare-at-price): Show a "Sale" badge (or a percentage off) on discounted products in Shopify using compare_at_price. Here's the Liquid, how to calculate the discount percentage, and how to handle products with multiple variants correctly.
- [How to truncate product titles and text in Shopify Liquid](https://learnshopify.dev/blog/shopify-truncate-product-titles): Keep long product titles from breaking your grid. Here's the difference between Shopify's truncate and truncatewords filters, how to set a custom ellipsis, and why you should strip HTML before truncating a description.
- [How to loop through products in a Shopify collection with Liquid](https://learnshopify.dev/blog/shopify-loop-collection-products): Render a grid of products from a collection using Liquid's for loop. Here's how to limit the count, access the loop index, handle empty collections, and why you should paginate large collections instead of looping all of them.
- [How to set fallback values in Shopify Liquid (the default filter)](https://learnshopify.dev/blog/shopify-default-filter-fallback): Stop empty fields from leaving holes in your theme. Here's how Shopify's default filter works, the difference between empty, blank, and nil, and the allow_false gotcha that catches everyone with booleans.
- [How to show "from" pricing for products with variants in Shopify](https://learnshopify.dev/blog/shopify-from-price-variants): When a product has variants at different prices, a single price is misleading. Here's how to show "From $18.99" with price_min and price_max in Shopify Liquid, and only when the variants actually differ.
- [How to show a low-stock warning in Shopify (Only 3 left)](https://learnshopify.dev/blog/shopify-low-stock-warning): Add urgency with a "Only 3 left in stock" message in Shopify using variant.inventory_quantity. Here's the Liquid, the inventory-tracking gotcha that shows negative or zero counts, and how to handle variants correctly.

## About

learnshopify.dev teaches professional Shopify theme development: Liquid, the Shopify object model, Horizon theme architecture, and building production-grade storefronts. The contact address is hello@learnshopify.dev. Not affiliated with Shopify Inc. Shopify is a trademark of Shopify Inc.