Text

The section in the Storytelling chapter is designed to display written content in a clear and visually appealing way, allowing you to communicate key messages, product information, or else.

This section focuses on the presentation of text, ensuring readability through appropriate font sizes, spacing, and alignment, while maintaining harmony with the overall design of the page.

It can be used to emphasize important details, provide context for other sections, or share narratives that engage and inform your audience. By integrating the Text section strategically within your store, you guide visitors through your brand story, highlight essential information, and create a seamless and user-friendly reading experience that supports both engagement and conversion.

Location: Sections -> Templates -> Storytelling: Text

---

Text – Options Overview

Option	Brief Explanation
Heading
Heading position	Set whether the heading stays in its standard position or shifts to the left.
Heading alignment	Align the heading to the Left or Center.
Layout
Top spacing	Adjust the spacing above the section (None, Small, Medium, Normal).
Width	Choose overall content width (Default, Boxed, Wide). Wide works on screens 1440px and wider.
Content width	Adjust internal content width from 50% to 100%.
Height	Set section height to Auto or Fixed. Fixed applies to desktop only (above 577px).
Height mobile	Set height behavior for mobile (Auto or Fixed).
Text align	Align body text Left or Center.
Underline on hover	Adds underline effect on linked text when hovering.
Link	Allows linking headings or buttons.
Dividing line
Show	Display or hide a horizontal dividing line above the section.
Background
Background	Select background style: Hide, Color, Gradient, or Image.
Colors
Base	Main text color.
Accent	Highlight or accent text color.
Lines	Dividing line color.
Texts
Heading	Color of the heading text.
Heading link hover	Color of the heading when hovered as a link.
Description	Color of the descriptive text.
Button
Show background	Toggle a filled background for the button.
Background	Default button background color.
Background gradient	Gradient background for the button.
Border	Button border color or style.
Text	Button text color.
Show background on hover	Display a filled background only when hovered.
Background hover	Background color on hover.
Background gradient hover	Gradient background on hover.
Border hover	Border color on hover.
Text hover	Text color on hover.
Enable shadow	Enable button shadow effect.
Shadow	Default shadow settings.
Shadow hover	Shadow appearance on hover.

Each section contains Text subsections, and you can add as many as needed. In every Text subsection, you can freely edit the text content, allowing you to create statements, descriptions, promotional notes, or informational messages that support your page’s storytelling.

The Button subsection lets you set the button label text and link, allowing you to create a call-to-action connected to the message—for example, directing customers to a collection, product page, blog post, or any custom URL.

The Heading subsection provides additional control over text hierarchy and responsiveness. Here you can add a subheading and heading, enable or disable the theme-based heading scale, and set custom heading sizes individually for desktop, tablet, and mobile (from 16–200px on desktop and 16–100px for tablet and mobile). This ensures the text adapts to various screen sizes while keeping visual consistency across the site.