Product Sequence
Overview
The Product Sequence section displays a product-focused content sequence with customizable section content, product card media, headings, pricing, typography, and responsive settings.
Section Header Settings
| Setting | Description |
|---|---|
| Tagline | Adds a short tagline above the section heading. |
| Tagline Size | Sets the tagline size to Large, Medium, or Small. Default: Medium. |
| Tagline Weight | Controls the tagline font weight from Thin (100) to Black (900). Default: 400. |
| Tagline Case | Sets the tagline case to None, Uppercase, Capitalize, or Lowercase. Default: Uppercase. |
| Tagline Family | Selects the tagline font family from Default or Heading. Default: Default. |
| Tagline Background Color | Sets the background color of the tagline. Default: #000000. |
| Tagline Color | Sets the tagline text color. Default: #FFFFFF. |
| Heading | Adds the main section heading. Default: Product sequence. |
| Heading Size | Sets the heading size from H1–H6, Large, Medium, or Small. Default: H4. |
| Heading Weight | Controls the heading font weight from Thin (100) to Black (900). Default: 400. |
| Heading Case | Sets the heading case to None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. |
| Heading Level | Sets the semantic heading level from H1 to H6. Default: H2. |
| Heading Family | Selects the heading font family from Default or Body. Default: Default. |
| Heading Color Style | Applies the Default or Body color style to the heading. Default: Default. |
| Heading Link Style | Applies the Default or Link style to heading links. Default: Default. |
| Description | Adds supporting text below the section heading. |
| Text Size | Sets the description size to Large, Medium, or Small. Default: Large. |
| Text Weight | Controls the description font weight from Thin (100) to Black (900). Default: 400. |
| Text Case | Sets the description case to None, Uppercase, Capitalize, or Lowercase. Default: None. |
| Text Family | Selects the description font family from Default or Heading. Default: Default. |
| Text Color Style | Applies the Default or Heading color style to the description. Default: Default. |
| Desktop Header Margin | Controls the bottom margin below the section header. Default: 44px. |
| Mobile Header Margin | Controls the bottom margin below the section header on mobile. Default: 15px. |
Card Settings
| Setting | Description |
|---|---|
| Media Ratio | Sets the product card media ratio to Adapt, Square, Portrait, Landscape, or Fit to Box. Default: Adapt. |
| Desktop Height | Sets the card media height from 100–400px when Fit to Box is selected. Default: 265px. |
| Mobile Height | Sets the card media height from 100–400px when Fit to Box is selected. Default: 265px. |
| Card Heading Size | Sets the product heading size from H4–H6, Large, Medium, or Small. Default: H6. |
| Card Heading Weight | Controls the product heading font weight from Thin (100) to Black (900). Default: 400. |
| Card Heading Case | Sets the product heading case to None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. |
| Card Heading Level | Sets the semantic heading level from H1 to H6. Default: H3. |
| Card Heading Family | Selects the product heading font family from Default or Body. Default: Default. |
Price Settings
| Setting | Description |
|---|---|
| Show Price | Displays the product price on the card. Default: Disabled. |
| Price Size | Sets the price text size to Large, Medium, or Small. Default: Large. |
| Price Weight | Controls the price font weight from Thin (100) to Black (900). Default: 600. |
| Price Case | Sets the price case to None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. |
| Price Family | Selects the price font family from Default or Heading. Default: Default. |
Unit Price Settings
| Setting | Description |
|---|---|
| Show Unit Price | Displays the product unit price. Default: Disabled. |
| Unit Price Size | Sets the unit price text size to Large, Medium, or Small. Default: Small. |
| Unit Price Weight | Controls the unit price font weight from Thin (100) to Black (900). Default: 400. |
| Unit Price Case | Sets the unit price case to None, Uppercase, Capitalize, or Lowercase. Default: Uppercase. |
| Unit Price Family | Selects the unit price font family from Default or Heading. Default: Default. |
Product Sequence
Card Settings
| Setting | Description |
|---|---|
| Show Vendor | Displays the product vendor on the card. |
| Vendor Size | Sets the vendor text size: Large, Medium, or Small. |
| Vendor Weight | Sets the vendor font weight from Thin (100) to Black (900). |
| Vendor Case | Controls vendor text case: None, Uppercase, Capitalize, or Lowercase. |
| Vendor Family | Sets the vendor font family to Default or Heading. |
| Show Label | Displays the product label. |
| Label Size | Sets the label text size: Large, Medium, or Small. |
| Label Weight | Sets the label font weight from Thin (100) to Black (900). |
| Label Case | Controls label text case: None, Uppercase, Capitalize, or Lowercase. |
| Label Family | Sets the label font family to Default or Heading. |
| Show Info Description | Displays the product information description. |
| Info Description Size | Sets the description text size: Large, Medium, or Small. |
| Info Description Weight | Sets the description font weight from Thin (100) to Black (900). |
| Info Description Case | Controls description text case: None, Uppercase, Capitalize, or Lowercase. |
| Info Description Family | Sets the description font family to Default or Heading. |
| Enable Add to Cart | Enables the Add to Cart button on product cards. |
| Button Type | Sets the Add to Cart button style: Primary, Secondary, Link, Icon Primary, or Icon Secondary. |
| Button Case | Controls button text case: None, Uppercase, Capitalize, or Lowercase. |
| Text Alignment – Desktop | Sets product card text alignment on desktop. |
| Text Alignment – Mobile | Sets product card text alignment on mobile. |
Grid Settings
| Setting | Description |
|---|---|
| Desktop Columns | Sets the number of product columns from 2 to 5. Default: 4. |
| Mobile Columns | Sets the number of product columns to 1 or 2. Default: 2. |
| Desktop Grid Spacing | Controls horizontal and vertical spacing between product cards. Default: 20px. |
| Mobile Grid Spacing | Controls spacing between product cards on mobile. Default: 10px. |
Slideshow Settings
| Setting | Description |
|---|---|
| Slideshow Arrows | Displays navigation arrows for the product slideshow. |
| Slideshow Button Type | Sets the arrow style: Primary, Secondary, or Link. |
| Slideshow Pagination | Displays pagination indicators for the slideshow. |
| Slideshow Auto Play | Automatically advances the slideshow. |
| Slideshow Interval | Sets the slideshow transition interval from 2000ms to 9000ms. Default: 5000ms. |
Layout Settings
| Setting | Description |
|---|---|
| Layout Style | Displays products in Grid or Slideshow layout. |
| Container Layout | Sets the content width: Container, Contained Content, or Container Fluid. |
| Container Size | Controls the maximum container width from 50% to 100%. Default: 100%. |
| Text Alignment – Desktop | Sets section text alignment on desktop. |
| Text Alignment – Mobile | Sets section text alignment on mobile. |
| Color Scheme | Selects the section color scheme. Default: Scheme 2. |
Inner Spacing
| Setting | Desktop | Mobile |
|---|---|---|
| Top | 70px | 35px |
| Bottom | 70px | 35px |
| Left | 50px | 15px |
| Right | 50px | 15px |
Outer Spacing
| Setting | Desktop | Mobile |
|---|---|---|
| Top | 0px | 0px |
| Bottom | 0px | 0px |
| Left | 0px | 0px |
| Right | 0px | 0px |