# Content blocks

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](/eclipse/sections/blog-posts.md), [Contact form](/eclipse/sections/contact-form.md), [Featured collection](/eclipse/sections/featured-collection.md), [Multi-column](/eclipse/sections/multi-column.md), [Slideshow](/eclipse/sections/slideshow.md).

<div><figure><img src="/files/ilLCbPLKSa8N4nzH3WMB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/XsgLvI0jbQOuVmgGZuoj" alt=""><figcaption></figcaption></figure> <figure><img src="/files/W5Qt2z3XT9xUOkkngxlt" alt=""><figcaption></figcaption></figure></div>

## Heading block

***

Add heading text and change its size. Go to [Theme settings > Typography](/eclipse/theme-settings/typography.md#headings) to change the font for all headings.

> Sections: [Contact form](/eclipse/sections/contact-form.md), [Email signup](/eclipse/sections/email-signup.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`Click Heading block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the block.</td><td></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 8</mark></td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>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 <a href="https://github.com/fluorescent/kb-horizon/blob/main/sections/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td><td><strong>H2 - H6</strong></td></tr></tbody></table>

## Text block

***

Add multiple lines of text and change its size. Go to [Theme settings > Typography](/eclipse/theme-settings/typography.md#body-text) to change the font for all body text.

> Sections: [Contact form](/eclipse/sections/contact-form.md), [Email signup](/eclipse/sections/email-signup.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`Click Text block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>Add rich text. Use the buttons to make the text bold or italicized, or to add a link.</td><td></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the size of the text.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 3</mark></td></tr></tbody></table>

## Overline block

***

Add small heading text. Go to [Theme settings > Typography](/eclipse/theme-settings/typography.md#headings) to change the font for all overline text.

> Sections: [Email signup](/eclipse/sections/email-signup.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`Click Overline block to find settings`

<table><thead><tr><th width="176">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>Add small heading text to use as a label.</td></tr></tbody></table>

## Button block

***

Add a button to link to another page and select a button style. Go to [Theme settings > Typography](/eclipse/theme-settings/typography.md#body-text) to change the button fonts.

When multiple button blocks are ordered together in the section panel, they will display in a single row.

<figure><img src="/files/hMTnCgtQUV93hUWksqUA" alt="" width="515"><figcaption></figcaption></figure>

> Sections:  [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

{% hint style="info" %}
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?"](https://www.thebalancesmb.com/call-to-action-1794380)
{% endhint %}

`Click Button block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Button link</mark></td><td>The URL that you want the button to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>The text that displays on the button.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Button"</mark></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button.</td><td><strong>Solid</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Outline</strong><br><strong>Text</strong></td></tr></tbody></table>

## Image block

***

Add an image and adjust its width.

> Sections: [Email signup](/eclipse/sections/email-signup.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`Click Image block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px.<br><br>Use PNG files for images with a transparent background.</td><td></td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the maximum width (in pixels) of the image on desktop.</td><td><strong>50 - 1000px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 500px</mark></td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Set the maximum width (in pixels) of the image on mobile.</td><td><strong>50 - 1000 px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 250px</mark></td></tr></tbody></table>

## Spacer block

***

Customize the section layout by adding space between the content blocks.

> Sections: [Contact form](/eclipse/sections/contact-form.md), [Email signup](/eclipse/sections/email-signup.md), [Footer](/eclipse/footer/footer/custom-liquid.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`Click Spacer block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Spacing</mark></td><td>Add a gap of empty space between blocks. Use sliders to adjust the amount of space on desktop and mobile.</td><td><strong>1-50</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 40</mark></td></tr><tr><td><mark style="color:blue;">Mobile spacing</mark></td><td>Add a gap of empty space between blocks.</td><td><strong>1-100</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 40</mark></td></tr></tbody></table>

## Divider block

***

Customize the section layout by adding a divider line between the content blocks.

> Sections: [Email signup](/eclipse/sections/email-signup.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`Click Divider block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Thickness</mark></td><td>Use the slider to increase the thickness of the divider line.</td><td><strong>1-5</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 1</mark></td></tr><tr><td><mark style="color:blue;">Spacing</mark></td><td>Use the sliders to add space at the top or bottom of the divider. Set to 0 to remove spacing.</td><td><strong>1-50</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 0</mark></td></tr></tbody></table>

## Liquid block

***

> Sections: [Footer](/eclipse/footer/footer/custom-liquid.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

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.

{% hint style="warning" %}
**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](https://partners.fluorescent.co/).
{% endhint %}

`Click Liquid block to find settings`

<table><thead><tr><th width="168">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Custom Liquid</mark></td><td>Add custom Liquid code for apps or custom content.<br><br>See Shopify's <a href="https://shopify.dev/docs/api/liquid">Liquid reference guide</a> and <a href="https://shopify.github.io/liquid-code-examples/">Liquid code examples</a> to learn more.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/sections/overview/content-blocks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.