Rich text section
The Rich text section of Borders combines text, button and spacing blocks with optional media beside, above or behind the text.
Applies to: Borders 3.1.0 and later. Added in: Borders 1.0.0. Last checked: 2026-10-13 against Borders 3.1.0.
The Rich text section holds text content: large headings, paragraphs, calls to action, even a whole page of text. It is built from Text, Button, Empty space and Custom HTML / Liquid blocks, with an optional image or video beside, above or behind the text.
Where to find it: select Add section in the theme editor, then choose Rich text.
Media
- Image or Video adds media to the section. A video plays muted and in a loop, with the Image as its fallback.
- Media aspect ratio sets the media shape, from Wide (2:1) to Taller (2:3).
- Media position on desktop puts the media On the left, Above the text, On the right, or hides it (Hide, the default).
- Media position on mobile puts it Above or Below the text, or hides it on phones. With Hide on desktop, an image still shows on phones unless this is Hide too.
- Fill entire height with media makes the media as tall as the text next to it on desktop, cropping it to fit. Without it, the media keeps its aspect ratio. On mobile the media always keeps the aspect ratio.
- Overlap content on desktop puts the text over the media instead of next to it.
- Media overlay lays a color over the media. Use a color with transparency so the media stays visible, for example to keep overlapping text readable.
- Media shape rounds the media on one side or all sides. Remove border radius gives the media square corners. On phones the media radius is capped at 20 px.
Typography
These settings place the whole text area; the text style itself is set in each Text block.
- Text alignment places the text in one of nine positions, from Left top to Right bottom (default: Center middle).
- Text spacing sets the space between blocks, -12 to 60 px.
- Text content padding sets the space around the text.
- Text container width limits the text to Small (50 percent), Medium (70 percent) or Large (the full width).
Design
- Color scheme under Section design colors the section; Color scheme under Inner content design colors the card that holds the media and text. See General section styling.
- Separate image and text by border draws a primary border between the media and the text.
- Hide section if dynamic content is not present hides the section when it has no image or video, or when a Text block is empty. Use it on product or collection templates where the content comes from metafields.
Blocks
The section holds up to 9 blocks, shown in the order of the sidebar. Combine as many Text blocks as you need.
Text
- Text is a rich text field: paragraphs, bold, italic and links.
- Text font, Text size, Mobile text size and Line height style this block only, so one section can mix a huge heading and a small paragraph.
- Heading tag turns the block into a heading for search engines (H1 to H4), or keeps it plain text (span, the default).
If you set the heading tag H1 - H4, make sure that you don't write any headings in the actual text area, as this will cause a broken layout.
Button
- Button label and Button link set the button; Open link in a new window opens it in a new tab.
- Button style (Outline or Solid), Button size and Button hover (Arrow or Accent) style this button.
Empty space
- Height adds vertical space between two blocks: Small, Large or Extra large.
Custom HTML / Liquid
- Custom Liquid runs your own HTML or Liquid code between the other blocks. Krown support does not provide help with custom code.
Setting up text over an image
Add the section and the media
Select Add section → Rich text. Set Image (or Video).
Place the media
Set Media position on desktop to On the left or On the right.
Overlap the text
Turn on Overlap content on desktop. The text now sits over the media.
Keep the text readable
Set Media overlay to a dark or light color with transparency, and choose an inner Color scheme whose text contrasts with it.
Add the content blocks
Add Text blocks for the heading and the paragraph, set their Text size and Heading tag, then add a Button block.
Why does my text look broken after I set a heading tag?
The Text block's Heading tag wraps the whole block in a heading, and a heading cannot contain other headings. Remove the heading formats (Heading 1 to 6) from the text itself and use paragraphs; the block size gives the look. Or set Heading tag back to span.
How do I make an image and text section?
Set an Image and set Media position on desktop to On the left or On the right. Add Text and Button blocks for the content. Turn on Fill entire height with media if the image should be as tall as the text.
All Rich text settings
Every setting on this page, with its type and default.
Accepts these blocks: Text, Button, Empty space and Custom HTML / Liquid (up to 9 blocks in the section).
Rich text section: Section heading
Where to find it: Rich text → Section heading
Heading (text box, default: "Rich text").
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Hide heading border (checkbox, default: off).
Rich text section: Media
Where to find it: Rich text → Media
Image (image).
Video (video): Plays a Shopify-hosted video as the section media, muted and in a loop. The Image is its fallback where autoplay is off.
Media aspect ratio (dropdown, default: Square (1:1)). Options: Wide (2:1), Landscape (16:9), Short (4:3), Square (1:1), Tall (5:6), Taller (2:3).
Media position on desktop (dropdown, default: Hide): Places the media left of, above or right of the text on desktop, or hides it. With Hide, an image still shows on phones unless Media position on mobile is Hide. Options: On the left, Above the text, On the right, Hide.
Media position on mobile (dropdown, default: Above). Options: Above, Below, Hide.
Fill entire height with media (checkbox, default: off): Makes the media as tall as the text on desktop, cropping it to fit; without it the media keeps its aspect ratio.
Overlap content on desktop (checkbox, default: off): Puts the text over the media on desktop instead of next to it.
Media overlay (color, default: transparent): Lays a color over the media. Use a color with transparency so the media stays visible.
Media shape (dropdown, default: None): Gives the media a rounded shape on one side or all sides. Options: None, Top rounded, Right rounded, Bottom rounded, Left rounded, Fully rounded.
Remove border radius (checkbox, default: off): Gives the media square corners. Otherwise the media uses the grid border radius, capped at 20 px on phones.
Rich text section: Typography
Where to find it: Rich text → Typography
Text alignment (dropdown, default: Center middle): Places the text area in one of nine positions inside the card. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Text spacing (slider -12 to 60 px, default: 24 px): Sets the space between the blocks.
Text content padding (dropdown, default: Regular): Sets the padding around the text area. Options: None, Default, Regular, Large.
Text container width (dropdown, default: Large): Limits the text to 50 percent (Small), 70 percent (Medium) or the full width (Large) of the text area. Options: Small, Medium, Large.
Rich text section: Section design
Where to find it: Rich text → Section design
Color scheme (color scheme, default: scheme_1).
Hide section bottom border (checkbox, default: off).
Rich text section: Inner content design
Where to find it: Rich text → Inner content design
Color scheme (color scheme, default: scheme_1): Sets the colors of the card that holds the media and text, when it differs from the section color scheme.
Hide borders (checkbox, default: off).
Remove border radius (checkbox, default: off).
Remove inner padding & border radius (checkbox, default: off).
Separate image and text by border (checkbox, default: off): Draws a primary border between the media and the text.
Rich text section: Dynamic content
Where to find it: Rich text → Dynamic content
Hide section if dynamic content is not present (checkbox, default: off): Hides the section when it has no image or video, or when a Text block is empty, for example an empty metafield.
Text block
Where to find it: Rich text → Add block → Text
Text (rich text, default: "Use this text to share information about your brand with your customers. Describe a product, share…").
Text font (dropdown, default: Body). Options: Body, Headings.
Text size (dropdown, default: Small). Options: Extra small, Small, Regular, Large, Extra large, Huge.
Mobile text size (dropdown, default: Default): Scales this Text block on screens narrower than 768 px: Small 75 percent, Medium 90 percent, Large 120 percent. Options: Default, Small, Medium, Large.
Line height (dropdown, default: Default). Options: Default, Small, Medium, Large.
Text block: SEO
Where to find it: Rich text → Add block → Text → SEO
Heading tag (dropdown, default: span): Wraps the Text block in an H1 to H4 heading for search engines, or keeps it plain (span). With a heading tag, do not use heading formats inside the text. Options: H1, H2, H3, H4, span.
Button block
Where to find it: Rich text → Add block → Button
Button label (text field, default: "Show more").
Button link (link).
Open link in a new window (checkbox, default: off).
Button style (dropdown, default: Outline). Options: Outline, Solid.
Button size (dropdown, default: Regular). Options: Small, Regular, Large.
Button hover (dropdown, default: Arrow): Sets the hover effect of the button: Arrow fills it with the accent color and shows an arrow, Accent slides the accent color in behind the label. Options: Arrow, Accent.
Empty space block
Where to find it: Rich text → Add block → Empty space
Height (dropdown, default: Large): Adds vertical space between two blocks. Options: Small, Large, Extra large.
Custom HTML / Liquid block
Where to find it: Rich text → Add block → Custom HTML / Liquid
Custom Liquid (Liquid).
Related pages
- Borders sections: every section you can add.
- General section styling: section heading, design and heading tags.
- Typography theme settings: the two fonts the blocks choose from.
- Rich blocks section: a grid of media blocks with text.