Rich text
Formatted text on its own, built from blocks (headings, paragraphs, images and buttons), so it handles anything from a one-line statement to a long story.
At a glance: Add it to any page with Add section.
Good for
- A short brand statement between two image-heavy sections
- An About or Our story block with a heading, paragraphs and a button
- A headline with small images set into the text, using the Heading with image block
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Rich text and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Text alignment | Aligns the heading and body text left, center or right.
Default: Center. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Heading with image block
Inside each Heading with image you can add these nested blocks: Inline image. Click the block in the sidebar, then Add block beneath it.
| Heading | The main body copy for this block.
Wrap text in { } for highlight color. Use [img1], [img2] etc. where you want images to appear inline. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
Appearance
| Highlight text color | Color used to emphasise part of the text.
Default: #0a42ff. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Image block
| Desktop image | The image for this block.
1200 x 900px .jpg recommended. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. |
| Image link | Makes the image clickable. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
Image
| Desktop image ratio | Crops images to a fixed shape so a row of mismatched uploads still lines up. Choose Adapt to image to keep each image at its own proportions.
Choose Adapt to image, Portrait (3:4), Landscape (4:3) (default) or Square (1:1). |
| Mobile image ratio | Image crop shape on mobile.
Choose Adapt to image, Portrait (3:4), Landscape (4:3) (default) or Square (1:1). |
| Image corner radius | Rounds the corners of the image.
Adjustable from 0% to 50% (default 0%). |
| Desktop image width | How much of the row width the image takes.
Adjustable from 10% to 100% (default 60%). |
| Mobile image width | Image width on mobile.
Adjustable from 10% to 100% (default 60%). |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Inline image block
| Desktop image | The image for this block.
200 x 200px .jpg recommended. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. |
| Image link | Makes the image clickable. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
Image
| Desktop image ratio | Crops images to a fixed shape so a row of mismatched uploads still lines up. Choose Adapt to image to keep each image at its own proportions.
Choose Adapt to image (default), Portrait (3:4), Landscape (4:3) or Square (1:1). |
| Mobile image ratio | Image crop shape on mobile.
Choose Adapt to image (default), Portrait (3:4), Landscape (4:3) or Square (1:1). |
| Image corner radius | Rounds the corners of the image.
Adjustable from 0% to 50% (default 0%). |
| Desktop image width | How much of the row width the image takes.
Adjustable from 48px to 180px (default 48px). |
| Mobile image width | Image width on mobile.
Adjustable from 24px to 100px (default 24px). |
Tips
- Keep it short on the homepage. One heading and two or three sentences reads well; longer stories belong on a page of their own.
- Use the Heading with image block for a signature line. Type
[img1],[img2]where the pictures should sit, then add an Inline image block inside it for each one. - Wrap a word in { } to highlight it. The highlighted word takes the block's Highlight text color.
- Blocks stack in sidebar order. Drag them to reorder the heading, text, images and buttons.
Troubleshooting
My inline images aren't appearing in the heading
Each [img1], [img2] placeholder needs a matching image. Select the Heading with image block, click Add block beneath it to add one Inline image per placeholder, in order, and upload an image to each.
The highlight color isn't showing
Only text wrapped in curly braces is highlighted, for example Made {by hand}. Check both braces are there and that Highlight text color isn't the same as the text color.