Content blocks
Sections
Last updated
Sections
Last updated
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: Blog posts, Contact form, Featured collection, Multi-column, Slideshow.
Add heading text and change its size. Go to Theme settings > Typography to change the font for all headings.
Sections: Contact form, Email signup, Image with text, Rich text, Video
Click Heading block to find settings
| Setting | Description | Options |
|---|---|---|
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 | 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 replace default H1 headings. This option doesn't change the heading's appearance. | H2 - H6 |
Add multiple lines of text and change its size. Go to Theme settings > Typography to change the font for all body text.
Sections: Contact form, Email signup, Image with text, Product overview, Rich text, Video
Click Text block to find settings
| Setting | Description | Options |
|---|---|---|
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 |
Add small heading text. Go to Theme settings > Typography to change the font for all overline text.
Sections: Email signup, Image with text, Rich text, Video
Click Overline block to find settings
| Setting | Description |
|---|---|
Text | Add small heading text to use as a label. |
Add a button to link to another page and select a button style. Go to Theme settings > Typography to change the button fonts.
When multiple button blocks are ordered together in the section panel, they will display in a single row.
Sections: Image with text, Rich text, Video
The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"
Click Button block to find settings
| Setting | Description | Options |
|---|---|---|
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.
Sections: Email signup, Image with text, Product overview, Rich text, Video
Click Image block to find settings
| Setting | Description | Options |
|---|---|---|
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.
Sections: Contact form, Email signup, Footer, Image with text, Product overview, Rich text, Video
Click Spacer block to find settings
| Setting | Description | Options |
|---|---|---|
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.
Sections: Email signup, Image with text, Product overview, Rich text, Video
Click Divider block to find settings
| Setting | Description | Options |
|---|---|---|
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 |
Sections: Footer, Image with text, Product overview, Rich text, Video
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.
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. Find a certified Fluorescent partner.
Click Liquid block to find settings
| Setting | Description |
|---|---|
Custom Liquid | Add custom Liquid code for apps or custom content. See Shopify's Liquid reference guide and Liquid code examples to learn more. |
