Filtered Collection Grid Section

Build a collection grid with client-side tag-based filtering and animated transitions.

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Generate the code for a filtered collection grid section that displays products from [COLLECTION_NAME] with tag-based filter buttons above the grid. Extract unique tags from the collection products and display them as clickable filter pills (e.g., All, [TAG_1], [TAG_2], [TAG_3]). When a filter is clicked, show only products matching that tag with a smooth fade/slide animation. The All button resets to show everything. The product grid should show [COLUMNS] columns on desktop with each card including: image, title, price, and Quick Add button. Implement filtering client-side using JavaScript data attributes – no page reload. Add an active state style to the selected filter pill using [ACCENT_COLOR]. Include a product count indicator (e.g., Showing 8 of 24 products). Generate the complete Liquid, JavaScript, and CSS as a custom section I can paste into my theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/filtered-collection-grid.liquid), paste the generated code in, and save. Then open the theme editor, go to your collection page template, and use “Add section” to place the filtered grid.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions