Products Listing

What this section does

Full product listing with search, filters, sort and grid

Where it goes

• Can be used at most 1 time(s) 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.

• Sidebar Filters

  Freesidebar

  Sticky left sidebar with filters; search & sort at top; product grid on right

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle, sidebarPosition

• Top Filters

  Freetop-filters

  Collapsible filter panel above the product grid

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, searchWidth, searchAlignment, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterTagStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Minimal

  Page Editorminimal

  Clean layout with search and sort only — no filter panel

  Specific to this style: dataSource, showVariantSwatches, showSearch, showSort, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Centered Search

  Page Editorcentered-search

  A large centered search field as a hero, grid beneath

  Specific to this style: dataSource, showVariantSwatches, showSearch, showSort, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Filter Drawer

  Page Editordrawer

  Floating filter button opens a full-height side drawer

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterTagStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• List View

  Page Editorlist-view

  Horizontal list cards — image on the left, details on the right

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, showAddToCart, showRating, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Masonry

  Page Editormasonry

  Pinterest-style staggered grid that adapts card heights

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterTagStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, showAddToCart, showRating, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Spotlight

  Page Editorspotlight

  Dark cinematic stage — products glow as spotlights of light against the background

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterTagStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Editorial

  Page Editoreditorial

  Magazine layout — first two products featured large, the rest in a tight compact grid

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterTagStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, showAddToCart, showRating, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Compact

  Page Editorcompact

  Ultra-dense grid with a single-line minimal toolbar — maximum products per screen

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Magazine Split

  Page Editormagazine-split

  Left editorial category nav with right product grid — structured editorial feel

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Floating Grid

  Page Editorfloating-grid

  Airy floating cards with generous spacing and a ghost-style minimal control bar

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterTagStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Luxury

  Page Editorluxury

  SSENSE / Mytheresa inspired — full-bleed portrait cards, sort pills, category chips

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, searchWidth, searchAlignment, showSort, sortStyle, showResultCount, showFilters, filterChipBgColor, filterChipTextColor, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, showAddToCart, showRating, showPrice, showVariantName, showQuickView, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showDiscountBadge, cardVariant, imageAspectRatio, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Storefront

  Page Editorstorefront

  Modern Shopify-inspired — category chips, sort pills, filter drawer, friendly UX

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, searchWidth, searchAlignment, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle, showCategoryChips, filterSheetSide

• Feed

  Page Editorfeed

  TikTok / Instagram-inspired — overlay image cards in masonry, category chips, mobile-first

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showFilters, filterChipBgColor, filterChipTextColor, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, showAddToCart, showRating, showPrice, showDiscountBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, imageAspectRatio, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Catalog

  Page Editorcatalog

  B2B / power-user — horizontal row cards, sticky sidebar filters, dense info display

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterTagStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, showAddToCart, showRating, showStock, showCategory, showPrice, showVariantName, showDiscountBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, sidebarPosition, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Sporty

  Page Editorsporty

  Persistent dark sidebar with athletic product grid. High-energy layout for sports and lifestyle stores.

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle, sidebarPosition

• Gallery Wall

  Page Editorgallery-wall

  Immersive editorial grid — a sticky glass toolbar with a segmented sort control, an underline category rail, and large-imagery cards with generous whitespace

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Boutique Facets

  Page Editorboutique-facets

  Filter-forward faceted listing — a redesigned sticky facet rail (header band, active count, clear-all) and a results header with a segmented sort control and a grid-density toggle

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, showResultCount, showFilters, filterStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle, sidebarPosition

• Showcase

  Page Editorshowcase

  Editorial featured-hero listing — the first product takes a large split hero tile (image, name, price, View link) above a refined grid with a bespoke search + segmented sort toolbar

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Zoom Grid

  Page Editorzoom-grid

  Density-controlled grid with a shopper zoom slider and sticky utility bar

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Index Board

  Page Editorindex-board

  Typographic product index beside a preview panel that swaps on hover

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle

• Collection

  Page Editorcollection

  Airy collection page with a flat faceted filter rail and price-chip cards

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, searchWidth, searchAlignment, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterTagStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle, sidebarPosition

• Joy Toolbar

  Page Editorjoy-toolbar

  Sticky pill-filter toolbar with joy cards, a woven promo tile and a circular pager

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, filterChipBgColor, filterChipTextColor, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle, promoEnabled, promoEyebrow, promoTitle, promoText, promoCtaText, promoCtaLink, promoGradFrom, promoGradTo, promoSlot, promoSpan, paginationStyle

• Linen & Clay

  Page Editorlinen-clay

  Warm boutique listing with a calm left facet rail, cream serif-named cards and a count · view toggle · sort toolbar

  Specific to this style: dataSource, showVariantSwatches, showSearch, searchStyle, showSort, sortStyle, showResultCount, showFilters, filterStyle, showCategoryFilter, showPriceFilter, showAvailabilityFilter, smartFilterMode, columns, mobileColumns, imageAspectRatio, stretchCards, showAddToCart, showRating, showPrice, showDiscountBadge, showCategory, showStock, showVariantName, showQuickView, showCompare, showArBadge, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, cardVariant, cardBgColor, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, badgeStyle, discountBadgeBg, discountBadgeTextColor, newBadgeBg, newBadgeTextColor, stockBadgeBg, stockBadgeTextColor, giftBadgeBg, giftBadgeTextColor, tagBadgeBg, tagBadgeTextColor, emptyStateTitle, emptyStateSubtitle, sidebarPosition, showViewToggle

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