# Content blocks

Some sections support the same 'rich content' blocks for text, images, buttons, and style elements.&#x20;

* Under the section, click **(+) Add block**.
* Click the block to find settings.
* Click and hold the drag handles **`⋮⋮`** to re-order blocks.

> For other sections, click the section to find settings for adding text, media, and buttons.

<div><figure><img src="/files/CySklwWxaSRn3gHtNic2" alt="" width="293"><figcaption></figcaption></figure> <figure><img src="/files/ePWVCmf4HT8QaKrfmkhI" alt="" width="375"><figcaption></figcaption></figure></div>

## Heading

***

<table data-header-hidden><thead><tr><th width="126"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="/pages/mpPIDXhZseqNygstoDXe">Image hero</a> -  <a href="/pages/BYNsSaaTihC8K9PVRNZE">Image with text</a> -  <a href="/pages/Mlmk8LDIPmDmll6teNsT">Image with text split</a> -  <a href="/pages/6TPnowGNBD95wQhqXVhC">Newsletter</a> -  <a href="/pages/jGup6WqmI4diNZlgKDbS">Rich Text</a> -  <a href="/pages/yFWv6NHmHKa1t80G534f">Video hero</a></td></tr></tbody></table>

Add heading text and change its size.

`Click Heading block to find settings`

<table><thead><tr><th width="166">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the block.</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.<br><br>This option doesn't change the heading's appearance. <a href="/pages/5p57dOcLqK1hbB3mfHaO">Learn more</a>.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text to <strong>Small, Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Go to <a href="/pages/6Xx6uciyFzpkSx1XUM15">Theme settings > Fonts</a> to change the font for all headings.</td></tr></tbody></table>

&#x20;

## Text

***

<table data-header-hidden><thead><tr><th width="116"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="/pages/mpPIDXhZseqNygstoDXe">Image hero</a> -  <a href="/pages/BYNsSaaTihC8K9PVRNZE">Image with text</a> -  <a href="/pages/Mlmk8LDIPmDmll6teNsT">Image with text split</a> -  <a href="/pages/6TPnowGNBD95wQhqXVhC">Newsletter</a> -  <a href="/pages/jGup6WqmI4diNZlgKDbS">Rich Text</a> -  <a href="/pages/yFWv6NHmHKa1t80G534f">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Text**. Add multiple lines of text and change its size.&#x20;

&#x20;

`Click Text block to find settings`

<table><thead><tr><th width="130">Setting</th><th>Description</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></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the size of the text between <strong>Small</strong>, <strong>Regular</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Go to <a href="/pages/6Xx6uciyFzpkSx1XUM15">Theme settings > Fonts</a> to change the font for all body text.</td></tr></tbody></table>

&#x20;

## Accent

***

<table data-header-hidden><thead><tr><th width="118"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="/pages/mpPIDXhZseqNygstoDXe">Image hero</a> -  <a href="/pages/BYNsSaaTihC8K9PVRNZE">Image with text</a> -  <a href="/pages/Mlmk8LDIPmDmll6teNsT">Image with text split</a> -  <a href="/pages/6TPnowGNBD95wQhqXVhC">Newsletter</a> -  <a href="/pages/jGup6WqmI4diNZlgKDbS">Rich Text</a> -  <a href="/pages/yFWv6NHmHKa1t80G534f">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Accent**. Add small heading text.

`Click Accent block to find settings`

<table><thead><tr><th width="202">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><tr><td><mark style="color:blue;">Font</mark></td><td>Go to <a href="/pages/6Xx6uciyFzpkSx1XUM15">Theme settings > Fonts</a> to change the font for all accent text.</td></tr></tbody></table>

&#x20;

## Button

***

<table data-header-hidden><thead><tr><th width="121"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="/pages/mpPIDXhZseqNygstoDXe">Image hero</a> -  <a href="/pages/BYNsSaaTihC8K9PVRNZE">Image with text</a> -  <a href="/pages/Mlmk8LDIPmDmll6teNsT">Image with text split</a> -  <a href="/pages/6TPnowGNBD95wQhqXVhC">Newsletter</a> -  <a href="/pages/jGup6WqmI4diNZlgKDbS">Rich Text</a> -  <a href="/pages/yFWv6NHmHKa1t80G534f">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Image**. Add a link to another page and select a button style.&#x20;

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

<figure><img src="/files/QOLEi2jSNvujhlpJUGio" alt="" width="259"><figcaption></figcaption></figure>

`Click Button block to find settings`

<table><thead><tr><th width="152">Setting</th><th width="474">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.<br><br>The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</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><br><strong>Outline</strong><br><strong>Text</strong></td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Go to <a href="/pages/6Xx6uciyFzpkSx1XUM15">Theme settings > Fonts</a> to change button fonts.</td><td></td></tr><tr><td><mark style="color:blue;">Colors</mark></td><td>Go to <a href="/pages/7UqaWJHr530MKWscpEMp#button-colors">Theme settings > Colors</a> to change colors for solid buttons.</td><td></td></tr></tbody></table>

&#x20;

## Image

***

<table data-header-hidden><thead><tr><th width="116"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="/pages/mpPIDXhZseqNygstoDXe">Image hero</a> - <a href="/pages/BYNsSaaTihC8K9PVRNZE">Image with text</a> -  <a href="/pages/Mlmk8LDIPmDmll6teNsT">Image with text split</a> -  <a href="/pages/6TPnowGNBD95wQhqXVhC">Newsletter</a> - <a href="/pages/h87fxrefM2BxWD2AFg8l">Newsletter compact</a> -  <a href="/pages/jGup6WqmI4diNZlgKDbS">Rich Text</a> -  <a href="/pages/yFWv6NHmHKa1t80G534f">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Image**. Upload an image and adjust its width.

&#x20;

`Click Image block to find settings`

<table><thead><tr><th width="152">Setting</th><th width="463">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 width</mark></td><td>Set Full width or Custom width</td><td><strong>Full width</strong><br><strong>Custom width</strong></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 - 1000 px</strong></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 - 350 px</strong></td></tr></tbody></table>

&#x20;

## Video player

***

<table data-header-hidden><thead><tr><th width="141"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="/pages/mpPIDXhZseqNygstoDXe">Image hero</a> -  <a href="/pages/BYNsSaaTihC8K9PVRNZE">Image with text</a> -  <a href="/pages/Mlmk8LDIPmDmll6teNsT">Image with text split</a> -  <a href="/pages/jGup6WqmI4diNZlgKDbS">Rich Text</a> -  <a href="/pages/yFWv6NHmHKa1t80G534f">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Video player**.  Add a video that visitors can can click to view within a popup video player.&#x20;

You can either use an uploaded `.mp4` video in your **Shopify files** or embed a video from **YouTube** or **Vimeo**.

<details>

<summary><mark style="color:blue;">STEPS: Add Shopify-hosted video</mark></summary>

In your **Shopify admin**:

1. In the side panel, click **Content > Files**.
2. Click **Upload files** to add a **`.mp4`** file from your computer.

   > Once your file has been processed, you can go to the next step.

In the theme editor (**Customize**):

1. Click the **Video player** block within the section.
2. Under **Shopify video**, click **Select video** to select your video and click **Done**.
3. Click **Save**.

</details>

<details>

<summary><mark style="color:blue;">STEPS: Embed YouTube or Vimeo video</mark></summary>

In the theme editor (**Customize**):

1. Click the **Video player** block to open the settings.
2. Under **Youtube or Vimeo URL**, paste the link of your hosted video.
3. Click **Save**.

</details>

&#x20;

`Click Video player to find settings`

<table><thead><tr><th width="168">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Shopify video</mark></td><td>Select an <code>mp4</code>or <code>mov</code> video that you've uploaded to your Shopify files in the admin.</td></tr><tr><td><mark style="color:blue;">YouTube or Vimeo URL</mark></td><td>Paste the full URL of your YouTube or Vimeo video.</td></tr><tr><td><mark style="color:blue;">Video preview image</mark></td><td>Upload an image to display behind the play button.</td></tr><tr><td><mark style="color:blue;">Button text</mark></td><td>Change the default button label text ("Watch now")</td></tr><tr><td><mark style="color:blue;">Button icon style</mark></td><td>Set the play button style to <strong>Light,</strong> <strong>Dark,</strong> or <strong>Outline</strong>.</td></tr></tbody></table>

&#x20;

## Spacer

***

<table data-header-hidden><thead><tr><th width="115"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="/pages/P3pu7w67dQwiy93HsTJI">Contact form</a> - <a href="/pages/mpPIDXhZseqNygstoDXe">Image hero</a> -  <a href="/pages/BYNsSaaTihC8K9PVRNZE">Image with text</a> -  <a href="/pages/Mlmk8LDIPmDmll6teNsT">Image with text split</a> -  <a href="/pages/6TPnowGNBD95wQhqXVhC">Newsletter</a> -  <a href="/pages/jGup6WqmI4diNZlgKDbS">Rich Text</a> -  <a href="/pages/yFWv6NHmHKa1t80G534f">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Spacer**. Add space between other content blocks.

&#x20;

`Click Spacer block to find settings`

<table><thead><tr><th width="144">Setting</th><th width="472">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Space</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>4 - 64 px</strong></td></tr></tbody></table>

&#x20;

## Border

***

<table data-header-hidden><thead><tr><th width="115"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="/pages/mpPIDXhZseqNygstoDXe">Image hero</a> - <a href="/pages/BYNsSaaTihC8K9PVRNZE">Image with text</a> -  <a href="/pages/Mlmk8LDIPmDmll6teNsT">Image with text split</a> -  <a href="/pages/6TPnowGNBD95wQhqXVhC">Newsletter</a> -  <a href="/pages/jGup6WqmI4diNZlgKDbS">Rich Text</a> -  <a href="/pages/yFWv6NHmHKa1t80G534f">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Border**. Add a divider line between blocks.

&#x20;


---

# 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/stiletto/sections/theme-sections/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.
