Product Grid Layout Section

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

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 Liquid, CSS, and schema for a product grid section that I can paste into my theme as a custom section, displaying 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.

Where to add this: In Shopify admin, go to Online Store > Themes > Edit code, create a new section file at sections/product-grid.liquid, and paste the generated Liquid/CSS (including the schema block) in. Save, then open the theme customizer, add the “Product Grid” section to the page, and select the collection and column count.

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