🧰 Rich text – Out of the Sandbox

Add a Rich text section to display messaging with bolded and italic text, and inline links.

rich text section used to display messaging between other sections.png

🧰 How to install the section in your theme

Open Theme Updater & Backups in your Apps admin
Open Theme sections
Click Install below the section. You can also click Preview to see the section in a demo storefront
On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
Click Install

Add the section to a template

Click Customize to open the theme editor for the selected theme.

Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.

Scroll down to the bottom of your default sections list and select 🧰 Rich text.

Customize section settings

Click the Rich text section to customize its content and settings.

customize rich text block settings.png

Content width and alignment

Select Regular, Wide, or Full width for the Content width setting to adjust the horizontal space occupied by the content.

Align the content to the Left, Center, or Right with the Content alignment setting.

Select colors

Choose colors for the section's Text color and Background color.

Adjust spacing

Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.

Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.

Customize blocks

There are customizable blocks for Heading, Text, and Button group.

Open the preloaded blocks to customize them and add more by selecting (+) Add block.

Heading

Open the Heading block (Talk about your brand) to adjust the heading text and font sizes for desktop and mobile devices.

customize rich text block settings.png

Text

Open the Text block (Share information about your brand with your customers...) to adjust the text and font sizes for desktop and mobile devices.

Button group

Include up to two buttons by customizing the settings for Button 1 and Button 2.

Use the Button label field to customize the button text.

Connect a link to the button with the Button link field.

Select Fill or Outline to control the Button style, then customize its colors with Background color and Text color.

Changelog

December 3rd, 2024

Updates to link hover states and animations

November 6th, 2024

Minor bug fixes.

September 25th, 2024

Rich text added to Theme Sections.