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.

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

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

Product List & Featured Products Component Inspector

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 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): Renders SKU, barcode, brand name, and stock availability badge (In Stock / Low Stock).
  • Product Metadata Attributes (product_metadata): Renders custom attribute specifications table (dimensions, weight, country of origin, warranty).
  • Product Supporting Documents (product_supporting_docs): Renders downloadable PDF user manuals, safety data sheets (MSDS), and warranty documentation links.