Product Grid

What this section does

Display products in a grid layout with filtering and sorting

Where it goes

• Can be used as many times as you like on one page.
• This section is in every plan — no extra plugin needed.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Default

  Freedefault

  Standard grid layout

  Specific to this style: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, columns, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Compact

  Freecompact

  Smaller cards, more products visible

  Specific to this style: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Featured + Grid

  Page Editorfeatured

  Larger cards with more details

  Specific to this style: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Minimal

  Page Editorminimal

  Clean, minimal product cards

  Specific to this style: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, columns, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Carousel

  Page Editorcarousel

  Horizontal scrolling carousel

  Specific to this style: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Tabbed Carousel

  Page Editortabbed-carousel

  Tabbed product carousel with New Arrivals, Featured, and On Sale tabs

  Specific to this style: badge, title, subtitle, titleAlignment, tabs, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight

• Tabbed Grid

  Page Editortabbed-grid

  Category tabs that switch a full product grid. Perfect for sports stores that filter by product type.

  Specific to this style: badge, title, subtitle, columns, titleAlignment, tabs, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight

• Concept Tabs

  Page Editorconcept-tabs

  Tabbed product carousel in the premium "Concept" design language — pill category tabs, a heading with circular arrows, and edge-bleed cards on a soft surface.

  Specific to this style: eyebrow, title, subtitle, titleAlignment, tabs, showPrice, showVariantName, imageAspectRatio, hoverImageAnimation, hoverImageAnimationDuration

• Bento Feature

  Page Editorbento-feature

  First product as a large 2×2 hero tile, the rest fill a rotating bento wall

  Specific to this style: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showPrice, showAddToCart, showCategory, hoverImageAnimation, hoverImageAnimationDuration

• Magazine Mosaic

  Page Editormagazine-mosaic

  Product-bound editorial mosaic — real product photos on a 12-column mixed-size span collage with name/price and badges

  Specific to this style: eyebrow, title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, spanPattern, rowHeight, captionStyle, showPrice, showBadges, cardVariant, hoverImageAnimation, hoverImageAnimationDuration

• Focus Carousel

  Page Editorfocus-carousel

  Center-focused coverflow rail — the middle card scales up and reveals quick-add

  Specific to this style: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showPrice, showAddToCart, showCategory, hoverImageAnimation, hoverImageAnimationDuration

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height