Skip to main content

Products & Catalog Components User Guide

Category: Commerce & Merchandising
Registered Admin Route: /admin/page-components

This guide covers all registered e-commerce product catalog, Product Detail Page (PDP), filtering, and product review components available in the Page Builder.

Figure 1 — The palette, in Page Builder Studio. A Storefront page offers 6 containers, 29 components and 5 widgets.
The complete field reference lives in the product, not here

Every row in the palette carries a ? button that opens that component's own help: overview, mental model, when to use it versus the alternatives, a complete property reference, worked recipes, accessibility and translation notes, gotchas, troubleshooting and an FAQ. It ships with the build, so it can never drift from the component you are configuring.

This guide is the map — which block to reach for and how they combine. The ? is the manual for each one.

The palette is page-type specific

A page's page type decides which blocks it is offered. If a component named here is missing from your palette, the page type is why — not a missing permission. See Visual Builder mode.

Figure 3 — A finished Storefront home page on the canvas: which of these blocks a real page is actually built from.

1. Product List (product_list) & Featured Products (featured_products)​

Renders a dynamic product grid or carousel on storefront category pages and landing sections.

UI Controls & Dropdown Options​

Field LabelControl TypeSelectable Options / InputsPurpose & Live EffectData Source Origin
Category FilterDropdown SelectorList of active product categoriesRestricts product list to items in the selected category.Populates from Storefront ➔ Categories.
Product Tag FilterDropdown SelectorList of product tags (e.g., New In, On Sale)Restricts products to those matching a specific tag.Populates from Storefront ➔ Tags.
Display LimitNumber Input1 to 48 productsSets maximum number of product cards rendered on page.User input (Default: 8).
Desktop Column CountDropdown Selector• 2 Columns
• 3 Columns
• 4 Columns
• 6 Columns		Sets desktop grid layout column count.UI Option (Default: 4 Columns).
Layout VariantDropdown Selector• Grid (Card Grid)
• Carousel (Horizontal Slider)
• Compact List		Sets visual container presentation.UI Option (Default: Grid).
Show PriceToggle SwitchOn / OffDisplays or hides product price tags.Toggle (Default: On).
Show Cart ButtonToggle SwitchOn / OffDisplays or hides instant "Add to Cart" button on cards.Toggle (Default: On).

2. Product Detail Page (PDP) Components​

When building Product Detail Pages (PDP), these granular building blocks allow you to craft custom single-product layouts:

  • Gallery Style Dropdown: Main + Thumbnails Left, Main + Thumbnails Bottom, Grid Stack, Full-Width Carousel.
  • Zoom Lightbox Toggle: Enables click-to-zoom high-resolution image modal.

B. Product Price (product_price)​

  • Show Compare-at Price: Displays slashed original MSRP price next to current sale price.
  • Show Savings Percentage: Renders a badge displaying discount percentage (e.g., Save 20%).
  • Currency Symbol Position: Before ($100) or After (100 USD).

C. Product Variants Selector (product_variants)​

  • Variant Selector Style:
    • Color Swatches: Renders clickable color circles for color options.
    • Pill Buttons: Renders rounded text pills for sizes (S, M, L, XL).
    • Dropdown Selector: Renders a clean select dropdown.
  • Out-of-Stock Behavior: Disable Option, Hide Option, or Allow Backorder.

D. Product Description (product_description)​

  • Display Format: Full Rich Text, Collapsible Read More, or Tabbed Section.

E. Product Reviews & Ratings (product_reviews)​

  • Rating Summary Badge: Displays average star score (e.g. 4.8 / 5.0) and total review count.
  • Review Sorting Dropdown: Most Recent, Highest Rating, Lowest Rating, Verified Purchases Only.
  • Allow Customer Submissions: Toggles public customer review submission form.

3. Product Catalog Filter Rails​

A. Category Filter Rail (category_filter)​

  • Show Sub-Categories: Expands child categories in accordion style.
  • Show Price Range Slider: Renders an interactive min/max price slider.
  • Show Attribute Checkboxes: Renders brand, material, and specification checkboxes.

B. Product Tag Filter Rail (product_tag_filter)​

  • Display Style: Pill Tags, Checkbox List, or Multi-Select Dropdown.

4. Product Metadata & Supporting Documents​

  • Product Basic Details (product_basic_details):

  • Product Metadata Attributes (product_metadata):

  • Product Supporting Documents (product_supporting_docs):

  • Product Event Schedule (product_schedule):