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
Copy, adapt, and run this prompt or skill workflow directly in Shopify 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
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
Sidekick Skills & Magic Prompt
Create & Manage AI skills for Sidekick. Discover AI skills from other merchants.
Build unlimited custom Sidekick skills, organize prompts into collections, and discover proven workflows shared by other Shopify merchants.