Rich text
Overview:
The Rich Text section is used to display flexible text-based content such as brand introductions, promotional messaging, announcements, headings, descriptions, and call-to-action buttons. It supports customizable typography, alignment controls, buttons, responsive spacing, gradient styling, and color schemes to create visually engaging content sections across the storefront.
Blocks Configuration
Tagline Block:
The Tagline block displays a small introductory label or caption above the main heading.
| Setting |
Description |
| Tagline Text |
Defines the small introductory text displayed above the heading. |
| Tagline Size |
Controls the size of the tagline text. |
| Tagline Weight |
Adjusts the font thickness of the tagline text. |
| Tagline Case |
Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Tagline Font Family |
Allows switching between default and heading font family styles. |
| Tagline Color Style |
Applies predefined color styling to the tagline text. |
| Bottom Margin (Desktop) |
Adds spacing below the tagline block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the tagline block on mobile devices. |
Heading Block:
The Heading block displays the primary rich text heading content.
| Setting |
Description |
| Heading Content |
Defines the main heading displayed inside the section. |
| Heading Size |
Controls the size of the heading text. |
| Heading Weight |
Adjusts the font thickness of the heading text. |
| Heading Case |
Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family |
Allows switching between default and body font family styles. |
| Heading Color Style |
Applies predefined color styling to the heading text. |
| Heading Link Style |
Controls the styling behavior of links used inside the heading content. |
| Enable Heading Gradient |
Enables gradient styling for the heading text. |
| Bottom Margin (Desktop) |
Adds spacing below the heading block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the heading block on mobile devices. |
Description Block:
The Description block displays supporting paragraph or informational content.
| Setting |
Description |
| Description Content |
Displays the main rich text description or paragraph content. |
| Description Size |
Controls the size of the description text. |
| Description Weight |
Adjusts the font thickness of the description text. |
| Description Case |
Changes the text transformation style for the description text. |
| Description Font Family |
Allows switching between default and heading font family styles. |
| Bottom Margin (Desktop) |
Adds spacing below the description block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the description block on mobile devices. |
The Buttons block displays one or two call-to-action buttons.
| Setting |
Description |
| First Button Label |
Defines the text displayed on the first button. |
| First Button Link |
Adds a URL link to the first button. |
| First Button Style |
Controls the visual appearance of the first button such as primary, secondary, or link style. |
| First Button Case |
Changes the text transformation style for first button text. |
| Setting |
Description |
| Second Button Label |
Defines the text displayed on the second button. |
| Second Button Link |
Adds a URL link to the second button. |
| Second Button Style |
Controls the visual appearance of the second button such as primary, secondary, or link style. |
| Second Button Case |
Changes the text transformation style for second button text. |
Spacing
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the buttons block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the buttons block on mobile devices. |
Layout:
| Setting |
Description |
| Container Layout |
Determines whether the section uses a contained, contained content, or full-width layout. |
| Container Width |
Controls the maximum width of the section container on desktop devices. |
| Text Alignment (Desktop) |
Sets the horizontal alignment of content on desktop devices. |
| Text Alignment (Mobile) |
Sets the horizontal alignment of content on mobile devices. |
Color Scheme:
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the section background and content. |
| Inverse Color Scheme |
Inverts the selected color scheme styling for contrast variations. |
| Gradient Mode |
Enables gradient styling for the section background, widgets, or both. |
| Enable Heading Gradient |
Enables gradient styling for rich text headings |
