Building A Collection Storefront Filter From Scratch (Beginner Shopify Theme Development Tutorial)

👷 Create Cart Transform & Discount Functions - no Plus plan required (my Shopify app): https://bit.ly/nerd-functions -------------------- 🚀 Take your Shopify developer skills to the next level: https://bosidevacademy.com/products/s... -------------------- ✉️ Weekly Shopify dev newsletter: https://bosidevacademy.com/pages/news... -------------------- 💬 Social Links: X: https://x.com/bosidev LinkedIn:   / bastian-fritsch-2353271a2   Discord:   / discord   -------------------- 🤓 Code from video: https://bosidevacademy.com/pages/vide... -------------------- 🔗 Video Links: Develop locally with Shopify CLI:    • How to use Shopify CLI to develop FASTER (...   Custom HTML Elements:    • How to OPTIMIZE Javascript code as a SHOPI...   Section Rendering API:    • How To Use The Shopify Section Rendering A...   -------------------- ⏱️ Timestamps 00:00 Intro 00:36 Filter setup (Search & Discovery APP) 03:15 Basic filter layout with Liquid 07:17 Filter functionality with Javascript 17:26 Price filter implementation 24:26 Filter Dropdowns 27:52 Show active filters 29:13 Swatch button styling 30:07 Color swatches 31:51 Custom price range slider 32:07 Outro -------------------- Hey my Nerds! 🤓 In the last couple of videos I explained a lot of Shopify theme developer basics. Now its time to build stuff! We are going to build a collection storefront filter so that customers in your store can filter products. This Shopify theme development tutorial will show everything: First im going to explain how to set up filters in the Shopify backend with the Search & Discovery App. Then we are going to build the basic collection filter layout with Liquid. After that we give the storefront filters its functionality by writing a custom HTML element with Javascript. In the end we are putting some more styling, implement swatch and color buttons, hide inactive filters and show all active filters. Im also going into detail on building a price range filter since this is more special. If you have any questions about this topic, let me know! -------------------- #shopify #shopifythemedevelopment #shopifydeveloper #sectionrenderingapi #shopifydev #shopifydevtutorial #shopifytutorial #themedevelopment