Shopify Sidekick/Theme/Filtered Collection Grid Section
Task IntentTheme

Filtered Collection Grid Section

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

What This Sidekick Query Does

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

Prompt / Skill

Run on Sidekick
Create 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 complete Liquid, JavaScript, and CSS.

Expected Output

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

Tips to Improve Results

  1. 1

    Copy the prompt above

  2. 2

    Open Shopify Sidekick in your Shopify admin

  3. 3

    Paste the prompt and replace the bracketed placeholders with your details

  4. 4

    Review Sidekick's response and apply the suggestions

Sidekick Skills & Magic Prompt icon

Sidekick Skills & Magic Prompt

Create & manage AI skills for Sidekick. Discover skills from other merchants.