Content blocks
Last updated
Was this helpful?
Last updated
Was this helpful?
Many sections support the same 'rich content' blocks for text, images, buttons, style elements, and custom Liquid. You can add and re-arrange these blocks to customize the section layout.
Some sections have unique blocks and settings. See detailed guides for these sections: , , , , .
Click Heading block to find settings
Heading
The title of the block.
Heading size
Change the size of the heading text from small to large.
1-8 Default: 8
Heading tag
H2 - H6
Click Text block to find settings
Text
Add rich text. Use the buttons to make the text bold or italicized, or to add a link.
Text size
Change the size of the text.
1-8 Default: 3
Click Overline block to find settings
Text
Add small heading text to use as a label.
When multiple button blocks are ordered together in the section panel, they will display in a single row.
Click Button block to find settings
Button link
The URL that you want the button to link to.
Button label
The text that displays on the button.
Default: "Button"
Button style
Change the style of the button.
Solid Default Outline Text
Add an image and adjust its width.
Click Image block to find settings
Image
Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px. Use PNG files for images with a transparent background.
Image size
Set the maximum width (in pixels) of the image on desktop.
50 - 1000px Default: 500px
Mobile image size
Set the maximum width (in pixels) of the image on mobile.
50 - 1000 px Default: 250px
Customize the section layout by adding space between the content blocks.
Click Spacer block to find settings
Spacing
Add a gap of empty space between blocks. Use sliders to adjust the amount of space on desktop and mobile.
1-50 Default: 40
Mobile spacing
Add a gap of empty space between blocks.
1-100 Default: 40
Customize the section layout by adding a divider line between the content blocks.
Click Divider block to find settings
Thickness
Use the slider to increase the thickness of the divider line.
1-5 Default: 1
Spacing
Use the sliders to add space at the top or bottom of the divider. Set to 0 to remove spacing.
1-50 Default: 0
With the Custom Liquid setting, you can extend your theme by adding snippets of Liquid or HTML code as a block or section in the theme editor.
The Custom Liquid block provides a reliable and safer option compared to directly editing your theme code. It will help keep your theme copy eligible for updates and avoid conflicts with the original theme code.
Click Liquid block to find settings
Custom Liquid
Add heading text and change its size. Go to to change the font for all headings.
Sections: , , , , , , ,
Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to . This option doesn't change the heading's appearance.
Add multiple lines of text and change its size. Go to to change the font for all body text.
Sections: , , , , , , , ,
Add small heading text. Go to to change the font for all overline text.
Sections: , , , , , ,
Add a button to link to another page and select a button style. Go to to change the button fonts.
Sections: , , , , ,
The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more,
Sections: , , , , , , ,
Sections: , , , , , , , , ,
Sections: , , , , , , ,
Sections: , , , , , , ,
We do not support code customizations. Always test code changes on an unpublished copy of your theme. For assistance, we recommend connecting with a professional developer. .
Add custom Liquid code for apps or custom content. See Shopify's and to learn more.
