Rich text

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on icons
3. Company XYZ documentation on colors settings
4. Company XYZ documentation on the button block
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on section backgrounds settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on visibility settings
9. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Rich text to add a simple text-led content area with optional icons, supporting copy, and calls to actions. For a broader overview of how sections are built and arranged in a theme, see Shopify documentation on sections and blocks. It fits well for intros, promotions, brand messaging, policy highlights, or any short content block that needs more presentation control.

Content settings

This is where you build the section’s main message. You can combine a caption, heading, rich text content, and an optional icon to create anything from a compact announcement to a more editorial content block.

Text alignment sets the overall reading direction for the section, so it is usually the first layout choice to make. The heading type helps the section fit the page structure more naturally, whether you want the title to read like a major heading or a lighter label.

The icon field accepts either an emoji or an icon name. Top and bottom positions work well for stacked, centered layouts, while left and right tend to feel cleaner for shorter text or action-led content. For icon help, see the icon guide.

The rich text field supports links and basic formatting, which makes it useful for short explanatory or promotional copy. If you also include a button, keep the text concise so the call to action stays clear.

Section-level button

You can add one built-in button directly in the section for a primary action tied to the main message. This is the simplest option when you only need a single call to action.

Button style controls emphasis, while button layout controls how the icon and label appear together. Filled styles are usually best for primary actions, lighter styles work better for secondary actions, and icon-only layouts are best saved for very obvious actions.

These button settings apply only to the built-in section button. They do not affect any added Button blocks.

A full-width mobile button can improve tapability and make the action more prominent on smaller screens. This is especially useful for promotional sections where the button should be easy to spot and use.

Color settings

These settings override the usual theme colors for this section only. They are useful when you want the content to feel more branded, more promotional, or more distinct from surrounding sections. For broader color behavior, see the color settings reference.

You can adjust colors for borders, icons, headings, caption text, and body text separately. When combining custom text colors with a custom background, check readability carefully so the section still feels clear and balanced.

Tip

If you apply both custom text colors and background media, review the section on mobile as well as desktop to make sure contrast stays strong.

Supported block types

1. Button

Button

Use Button blocks when you need additional calls to action beyond the built-in section button. This works well for paired actions such as a primary purchase path and a lighter supporting link. See the Button block for block-specific settings.

Each Button block has its own text, link, style, icon, and visibility controls. That makes it easy to mix button emphasis or hide a specific action on desktop or mobile without hiding the whole section.

When using multiple buttons, keep the hierarchy obvious. One action should usually feel primary, with any supporting actions styled more lightly.

Standard section settings

Padding settings

Padding settings control the space above and below the section content on desktop and mobile. Use tighter spacing for utility content and more generous spacing when the section needs to feel more prominent or easier to scan.

Section background settings

Section background settings let you place a color, gradient, image, or video behind the content. This can turn Rich text into a stronger feature area or a more branded message block.

Overlay colors and gradients are especially helpful when background media would otherwise compete with the text. Mobile-specific background images or video can also help you avoid awkward cropping on smaller screens.

Caution

Background media can change both readability and perceived spacing. After adding a background, review contrast, padding, and width together.

Separator settings

Separator settings add a line at the top or bottom of the section to create a clearer boundary from nearby content. They are most useful when the content is simple but still needs visual separation.

If you leave the separator color transparent, the section uses the usual border color behavior. This helps separators blend more naturally with the rest of the page.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This is useful when you want simpler messaging, different spacing, or different calls to action on smaller screens.

Button blocks also include their own visibility control, so you can hide individual actions without hiding the entire section.

Width settings

Width settings control the content width and the outer section width. Content width is the main reading-width choice, while section width matters most when you use a background color, image, gradient, or video.

Narrower content widths usually improve readability for longer copy. Wider section widths can create stronger visual impact, but it is best to check the live page because the editor may not fully reflect the final layout.

Usage notes

1. Keep the message focused. Use one clear heading, one supporting idea, and one main action so the section is easy to scan.
2. Match icon placement to the layout. Top or bottom placement suits centered editorial content, while left or right placement usually works better for shorter, action-led messaging.
3. Use button hierarchy clearly. If you combine the section button with Button blocks, make one action primary and style the others as secondary.
4. Protect text contrast. Recheck headings, captions, and body copy whenever you add custom colors, gradients, images, or video backgrounds.
5. Preview width changes on the storefront. Reading width and section width can feel different in the editor than they do on the live page.
6. Review both breakpoints. Desktop and mobile controls can change alignment, visibility, media choice, and spacing in different ways.
7. Watch for fallback styling. Transparent or default-style values usually preserve the surrounding theme look, while explicit color or media choices make the section feel more independent.
8. Choose media deliberately. If you set different desktop and mobile media, check cropping and readability on both sizes before publishing.