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.
- Projects
- 5
- Interactive
- 2
- Cost
- Free
Product cardsIntermediateBuild 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 minutes4 stepsOpen
Product pageBeginnerInteractiveBuild 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 minutes4 stepsOpen
CartBeginnerInteractiveBuild 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 minutes4 stepsOpen
CartIntermediateBuild 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 minutes5 stepsOpen
Product pageBeginnerBuild 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 minutes4 stepsOpen
Your request
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.
