Story Telling is a section that contains images or videos, and content for each block to describe a product or tell a story, highlighting the product depending on different uses.

The Story Telling section is optimized for use on both the homepage and product pages (PDP).

1. Log in to your Theme editor and navigate to the page you would like to display this section.
2. You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
3. From the list of available sections, find and select Story telling
4. Then click Add Block to add new content

This section has two places for custom settings: in the section settings and in each block.

1. Section setting:

• Section Width: Display the section to span the full width of the browser if the Full Width option is used. If the Container Width option is used, the content will be limited to the width set in Global theme setting | Layout
• Eyebrow: The small heading of the section. You can leave it blank depending on your layout
• Heading: The main heading for the section. You can leave this blank depending on your layout.
• Text: Description content for the section. You can leave it blank depending on your arrangement.

1. Block setting:

Block settings are used to configure content and layout. You can customize blocks with different styles/layouts.

• Heading: Block heading
• Layout: Here, you can choose how to display
• Main Media Image: Here you choose the image to use for the block
• Main Media Video: Similar to the Main Media Image, you can use videos instead of images. If videos are used, they will be prioritized over images.
• Media Position: Media display position
• Media Width: Customize how media fits into the block's dimensions
• Content Position: Customize the displayed content position
• Eyebrow: TSmall heading above the main heading
• Text: Description content displayed below the Heading
• Button Style: Customize button display with outline or filled style
• Widh / Height / Size
  • Desktop Height: Customize the block height on desktop
  • Mobile Height: Customize the block height when viewed on mobile
  • Content Width: Maximum width of content in the block
  • Heading Size: Customize the font size of headings
  • Text Size: Font size of description content
  • Text Color: Customize description content colors
  • Overlay Color: As an overlay on top of the media, customize the overlay color
  • Overlay Opacity: Customize the overlay's transparency; a higher percentage means a darker overlay.