Rich text

Featured links

1. Company XYZ documentation on the rich text block
2. Company XYZ documentation on icons
3. MDN Web Docs
4. Company XYZ documentation on section backgrounds settings
5. Company XYZ documentation on using video
6. Company XYZ documentation on colors settings
7. Company XYZ documentation on visibility settings
8. Shopify documentation on sections and blocks
9. Shopify documentation on customizing themes

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to add a compact message area with an optional icon, heading, rich text, and button. It suits short promotional copy, brand statements, feature callouts, and supporting content between more visual blocks. For a feature summary, see the Rich text reference.

Content settings

These settings control the message itself and how it is presented. The clearest setups use a simple structure: optional caption, heading, supporting text, and a single action only when the next step is obvious.

Text alignment and icon position shape how the block feels in the layout. Centered content works well for short promotional messages, while left-aligned content is usually easier to read when the text runs longer.

The icon field accepts either an emoji or an icon name. Leave it blank if the message does not need an extra visual cue. For icon help, see icons and the supported icon name library

Choose the heading type based on the block’s role in the page hierarchy, not just the visual size you want. A stronger heading level helps this block introduce a new content area, while a lighter level works better when it supports nearby content.

The rich text field supports links and basic formatting, so you can add emphasis without making the block feel overloaded. Keep styling light so the message stays easy to scan.

Button settings apply to this block’s built-in button only. Use them for one clear call to action, and pick a style that matches the importance of the action. Icon-only button layouts work best when the meaning is already obvious from nearby text.

Add both button text and a button link together. A button without a clear label or destination is easy to miss or misunderstand.

If most clicks will happen on smaller screens, the full-width mobile button option can make the action easier to spot and easier to tap.

Standard block settings

Block background settings

Use these settings to give the block its own visual surface with a color, gradient, image, or video background. This can help the message stand out, but stronger backgrounds can also change the block’s visual weight and spacing in the layout. See section backgrounds. For the related Shopify structure overview, see Shopify documentation on sections and blocks

Gradient settings override flat background colors, and overlay gradients override flat overlay colors. When you use an image or video background, overlays are especially helpful for keeping text readable.

Mobile background image and video fields let you swap in a different asset for smaller screens. If left blank, mobile uses the main background asset. Review both viewport sizes if you set different desktop and mobile media, since cropping, loading, and readability can change.

Caution

Busy images and video can quickly reduce readability. If this block includes longer copy or a button, use overlays or simpler media to keep the content clear.

For video setup guidance, see using video.

Color settings

These settings override the theme’s default colors for this block only. Use them when the block needs stronger contrast, a branded accent, or better coordination with a custom background. See color settings. For a broader overview of theme customization, see Shopify documentation on customizing themes

Adjust heading, subheading, and body text together so the content still reads as one system. If you also style the icon or border, keep those accents supportive rather than more prominent than the message itself.

Blank, transparent, or default-style values usually keep the block closer to the theme’s fallback look, while explicit colors, gradients, or media overrides make the block feel more self-contained.

Visibility settings

Use visibility controls to show or hide this block by device size. This is helpful when you want a shorter version for mobile, a more spacious version for desktop, or a different content arrangement across layouts. See visibility settings.

Tip

If you hide this block on one device size, make sure the same message or action still appears elsewhere when it matters.

Usage notes

1. Keep the message focused. Use this block for one primary idea instead of stacking multiple competing messages into a small space.
2. Match the heading to page structure. Choose a heading type that fits the surrounding content hierarchy, not only the visual style.
3. Use icons sparingly. Add an emoji or icon only when it reinforces the message quickly and does not compete with the heading.
4. Limit the call to action. Use the built-in button for one clear next step, and consider full-width mobile display when smaller-screen taps matter.
5. Check contrast on every device. When you use custom colors, gradients, or media, review readability and button visibility on both desktop and mobile.
6. Review separate media carefully. If you set different desktop and mobile backgrounds, confirm the crop, loading behavior, and text readability on each viewport.