Projects · free, indexable, code included
Build real Shopify features, end to end.
Each project ships you a complete, working feature with full code, a live demo, and step-by-step instructions. Copy it into your theme, ship it to a merchant tomorrow. No signup, no paywall on this page.
Product cards
IntermediateBuild review stars on Shopify collection product cards
A build-along for adding star ratings to the product cards in a Shopify collection grid, read from the reviews.rating metafield, with the review count, accessibility, and a guard for products with no reviews.
20 minutes·4 stepsOpen →Product page
InteractiveBeginnerBuild a Shopify sale & discount badge
A 'Save $6.00 (24%)' badge that appears only on discounted products, computed from compare-at price in pure Liquid. No app, no JavaScript.
12 minutes·4 stepsOpen →Cart
InteractiveBeginnerBuild a Shopify free shipping progress bar
A drop-in progress bar that shows shoppers how much more they need to spend to unlock free shipping. Pure Liquid + CSS, no JavaScript required, works in any theme.
15 minutes·4 stepsOpen →Cart
IntermediateBuild a Shopify cart drawer with upsells
A production-grade slide-in cart drawer with AJAX add-to-cart, optimistic quantity updates, and an inline 'you might also like' upsell row. Built on the Cart API, no app required.
45 minutes·5 stepsOpen →Product page
BeginnerBuild a Shopify sticky add-to-cart bar
When the main buy button scrolls off screen, a slim sticky bar slides up from the bottom with the product, variant, and a buy button. Increases mobile conversion meaningfully with about 30 lines of code.
20 minutes·4 stepsOpen →
Suggest a project
Building something specific and stuck? Email hello@learnshopify.dev with what you're trying to ship and I'll add it to the roadmap. Projects are written based on what readers ask for.