Shopify Sidekick/Theme/Product Grid Layout Section
Task IntentTheme

Product Grid Layout Section

Build a responsive product grid with customizable columns, hover effects, and quick-add buttons.

What This Sidekick Query Does

Build a responsive product grid with customizable columns, hover effects, and quick-add buttons.

Prompt / Skill

Run on Sidekick
Create a product grid section for my store that displays products from the [COLLECTION_NAME] collection. The grid should show [NUMBER_OF_COLUMNS] columns on desktop (e.g., 4), 2 columns on tablet, and 1 column on mobile. Each product card should include: product image with a zoom-on-hover effect, product title, price (with compare-at price shown as strikethrough if on sale), a color swatch preview if available, and a Quick Add button that appears on hover. The grid should load [PRODUCTS_PER_PAGE] products initially with a Load More button at the bottom. Use [CARD_STYLE] style (options: minimal, bordered, shadow). Generate the complete Liquid section code with schema settings and CSS.

Expected Output

Build a responsive product grid with customizable columns, hover effects, and quick-add buttons.

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.