Category 2: Product Grids & Listings

Create a Shopify section for a product grid that:

• Dynamically displays products from a selected collection
• Includes filtering by tags, price, and availability
• Supports grid layout options (2, 3, or 4 columns)
• Is fully responsive and accessible

Build a product grid section that:

• Loads more products automatically as the user scrolls
• Shows a loading spinner during fetch
• Preserves SEO with proper pagination markup

Generate a product grid for Shopify that:

• Displays products in a grid layout
• Includes a "Quick View" button on hover for each product
• Shows product details, images, and add-to-cart in a modal

Create a product grid that:

• Shows the custom product type under each product title
• Pulls product type from Shopify's product object
• Allows merchants to toggle display in theme settings

Build a product grid where:

• Products can display custom badges (e.g., "Best Seller", "Limited Stock")
• Badges are set via metafields or tags
• Badge color and text are customizable

Generate a masonry-style product grid section that:

• Arranges products in a Pinterest-like layout
• Adjusts automatically for different image heights
• Remains responsive on all devices

Create a tabbed product grid section for Shopify that:

• Allows merchants to set up tabs like "Trending", "New Arrivals", "Best Sellers"
• Each tab displays products from a different collection or tag
• Tabs are customizable in the theme editor

Build a product grid that:

• Shows alternate images or product details on hover
• Allows merchants to customize hover effect (zoom, fade, slide)
• Is optimized for both desktop and mobile

Generate a product grid where:

• Each product displays available color swatches below the image
• Swatches are clickable and update the main image
• Swatch colors are set via product variants

Create a product grid that:

• Shows badges like "In Stock", "Low Stock", "Sold Out" based on inventory
• Inventory thresholds are configurable in theme settings
• Badges update in real time if possible

Build a product grid that:

• Uses semantic HTML for product listings (e.g., <article>, <h2>, <img>)
• Includes schema.org markup for products, price, and reviews
• Is optimized for fast loading and accessibility

Create a product grid section that:

• Allows users to add/remove products to a wishlist
• Stores wishlist in localStorage or via Shopify customer metafields
• Shows a wishlist icon on each product

Generate a product grid where:

• Each product has a quick "Add to Cart" button
• Supports variant selection if needed
• Updates cart count in real time

Build a product grid that:

• Displays average star rating and review count under each product
• Integrates with Shopify's Product Reviews app or metafields

Create a product grid where:

• Products show price ranges if multiple variants
• Displays compare-at price and discount percentage if on sale
• Sale badge is customizable

Generate a product grid section that:

• Stacks products vertically on mobile
• Allows swipe gestures for horizontal scrolling
• Maintains fast load times and touch targets

Build a product grid where:

• Each product shows the vendor or brand name above the title
• Vendor display is toggleable in theme settings

Create a product grid that:

• Shows a countdown timer on products with active sales
• Timer pulls sale end date from product metafields
• Hides timer when sale ends

Build a product grid that:

• Displays category metafields (e.g., size, color, fabric) under each product
• Pulls data from Shopify's standard product taxonomy and metafields
• Allows merchants to choose which attributes to display

Create a product grid section that:

• Includes accessible, SEO-friendly pagination controls
• Allows merchants to set products per page
• Supports both numbered and "Load More" pagination

Generate a product grid where:

• Products tagged "new" or "featured" display custom labels
• Label text and color are editable in theme settings

Build a product grid section that:

• Lets users select products to compare side-by-side
• Opens a comparison modal or section with selected product specs

Create a product grid that:

• Ensures all images have alt attributes
• Uses ARIA roles for all interactive elements
• Is fully navigable by keyboard

Build a section that:

• Displays a grid of recently viewed products for the user
• Stores viewed products in localStorage or via Shopify customer metafields
• Is responsive and customizable

Create a product grid that:

• Allows users to sort products by price, popularity, or newest
• Sorting options are configurable in theme settings