> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/content-blocks.md).

# Content blocks

{% columns %}
{% column %}
Some sections support the same 'rich content' blocks for text, images, buttons, and style elements.

* 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.
> {% endcolumn %}

{% column %}

<figure><img src="/files/CySklwWxaSRn3gHtNic2" alt="" width="293"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

<div data-with-frame="true"><figure><img src="/files/ePWVCmf4HT8QaKrfmkhI" alt="" width="375"><figcaption></figcaption></figure></div>

### <mark style="color:$primary;">Heading</mark>

<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"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/6TPnowGNBD95wQhqXVhC"><sub>Newsletter</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>

<sub><mark style="color:$info;">Click Heading block to find settings<mark style="color:$info;"></sub>

<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 font size of the heading to <strong>xx-small</strong> to <strong>Display x-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>

### <mark style="color:$primary;">Subheading</mark>

<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"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/6TPnowGNBD95wQhqXVhC"><sub>Newsletter</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>

<sub><mark style="color:$info;">Click Subheading block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="166">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Subheading</mark></td><td>Enter text for a subheading.</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. This option doesn't change the heading's appearance. <a href="/pages/5p57dOcLqK1hbB3mfHaO">Learn more</a>.</td></tr><tr><td><mark style="color:blue;">Subheading size</mark></td><td>Change the font size of the subheading to <strong>xx-small</strong> to <strong>x-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 subheadings.</td></tr></tbody></table>

### <mark style="color:$primary;">Text</mark>

<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"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/6TPnowGNBD95wQhqXVhC"><sub>Newsletter</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>

<sub><mark style="color:$info;">Click Text block to find settings<mark style="color:$info;"></sub>

<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 font size of the text to <strong>xx-small</strong> to <strong>5x-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>

### <mark style="color:$primary;">Accent</mark>

<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"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/6TPnowGNBD95wQhqXVhC"><sub>Newsletter</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>

<sub><mark style="color:$info;">Click Accent block to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Button</mark>

<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"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/6TPnowGNBD95wQhqXVhC"><sub>Newsletter</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>

{% columns %}
{% column %}
Click **(+) Add block** and select **Image**. Add a link to another page and select a button style.

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

{% column %}

<div data-with-frame="true"><figure><img src="/files/QOLEi2jSNvujhlpJUGio" alt="" width="259"><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

<sub><mark style="color:$info;">Click Button block to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Image</mark>

<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"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/6TPnowGNBD95wQhqXVhC"><sub>Newsletter</sub></a> <sub>-</sub> <a href="/pages/h87fxrefM2BxWD2AFg8l"><sub>Newsletter compact</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>

<sub><mark style="color:$info;">Click Image block to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Video player</mark>

<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"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>

Add a video that visitors can can click to view within a popup video player. 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>

<sub><mark style="color:$info;">Click Video player to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Spacer</mark>

<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"><sub>Contact form</sub></a> <sub>-</sub> <a href="/pages/mpPIDXhZseqNygstoDXe"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/6TPnowGNBD95wQhqXVhC"><sub>Newsletter</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>

<sub><mark style="color:$info;">Click Spacer block to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Border</mark>

<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"><sub>Image hero</sub></a> <sub>-</sub> <a href="/pages/BYNsSaaTihC8K9PVRNZE"><sub>Image with text</sub></a> <sub>-</sub> <a href="/pages/Mlmk8LDIPmDmll6teNsT"><sub>Image with text split</sub></a> <sub>-</sub> <a href="/pages/6TPnowGNBD95wQhqXVhC"><sub>Newsletter</sub></a> <sub>-</sub> <a href="/pages/jGup6WqmI4diNZlgKDbS"><sub>Rich Text</sub></a> <sub>-</sub> <a href="/pages/yFWv6NHmHKa1t80G534f"><sub>Video hero</sub></a></td></tr></tbody></table>
