> 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/pages/footer/text-and-image-block.md).

# Text and image block

The **Text and image** block is great for a brief store description and logo image, or anything you like.

<img src="/files/Rs3ZB6KVnf1pSVzQ52mu" alt="" width="563">

<h2 align="center">Add image and text block</h2>

***

Click the arrow next to the **Footer** section, then click **(+) Add block** and select **Image and text**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start adding content.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

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

1. Click the arrow beside the **Footer** section to reveal the Footer blocks.
2. Click on the **Text and image block** ("Use this text area...") to open the settings.

   > Click **(+) Add block** to add a new **Text and image block**.
3. (*Optional*.) Add a brief title to the **Heading** field.

   > Check **Show heading on desktop** to display the heading at the top of the block on desktop screens.
4. Add a short paragraph to the **Text** field.

   > Use the formatting buttons to add bold, italic, and linked text.
5. Upload an **Image** to display above the text.

   > There are no required image dimensions. Use the **Max width for image** slider to adjust the size of your image.

   > For logos, we recommend a **`.png`** file with a transparent background.
6. Change the **Image placement** to **Above text** or **Below text**.
7. (*Optional*.) Choose whether to **Show social icons** at the bottom of the block.

   Add your account links in the Theme settings under **Social media** to display their icons. > Enter the full URL, including **`https://`**.

   ![](/files/1LZaeaVmAuPSTpEW2yOp)
8. Use the **Desktop width** and **Desktop padding** sliders to adjust the size of the block.

   > For best results, make sure all footer block widths add up to 100%. You can also add a **Spacer** block with an adjustable width to add spacing between blocks.
9. (*Optional*.) Choose whether to **Enable Follow on Shop**.

   > Follow on Shop is a Shopify feature. You need to have the Shop channel installed, and Shop Pay activated on your store. See [Shopify's Follow on Shop guide](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/follow-on-shop).
10. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

    ![](/files/tOHF9cG7TWZSPV5YgAH3)

    > Click **Remove block** or the eye icon to delete or hide a block.
11. Click **Save**.

</details>

### <mark style="color:$primary;">Set up image</mark>

Upload an image and adjust its **width** and **position**.

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

<table><thead><tr><th width="162">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td><p>Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px.</p><p>Use PNG files for images with a transparent background.</p></td><td></td></tr><tr><td><mark style="color:blue;">Max width for image</mark></td><td>Set the maximum width (in pixels) of the image on desktop.</td><td><strong>50 - 350px</strong></td></tr><tr><td><mark style="color:blue;">Image placement</mark></td><td>Show the image above or below the text.</td><td><strong>Above text</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Below text</strong></td></tr></tbody></table>

### <mark style="color:$primary;">Change text headings</mark>

Change the **heading** and subheading **text**. Leave fields blank to hide them.

> Toggle on **Show heading on desktop** to display the heading at the top of the block on desktop screens.

### <mark style="color:$primary;">Change block layout</mark>

Use the **Desktop width** and **Desktop padding** sliders to adjust the size of the block.

> For best results, make sure all footer block widths add up to 100%. You can also add a **Spacer** block with an adjustable width to add spacing between blocks.

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

<table><thead><tr><th width="178">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop width</mark></td><td><p>Use the slider to increase the width of the footer block on desktop.</p><p>To keep all columns in a single row, make sure all footer block widths add up to 100%. To display block on its own row, set the desktop width to 100%.</p></td><td><strong>10 - 100%</strong></td></tr><tr><td><mark style="color:blue;">Desktop padding</mark></td><td>Adjust the spacing around the content within the full width of the block.</td><td><strong>0 - 20%</strong></td></tr></tbody></table>

### <mark style="color:$primary;">Display collapsible row on mobile</mark>

On mobile screens, you can display the links block in a collapsible row, instead of as a column.

> **Note**: A **heading** is required for the collapsible row.

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

<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;">Collapse on mobile</mark></td><td>Display the block as an expandable row that reveals the block content when clicked.</td><td><mark style="background-color:yellow;">Default: Disabled</mark></td></tr></tbody></table>

### <mark style="color:$primary;">Show social icons</mark>

{% columns %}
{% column %}
In the block settings, choose to **Show social icons** that link to your profile pages. Open the **Theme settings** tab in the settings panel to enter the full URL of your profile pages.
{% endcolumn %}

{% column %} <img src="/files/1LZaeaVmAuPSTpEW2yOp" alt="" width="563">
{% endcolumn %}
{% endcolumns %}

### <mark style="color:$primary;">Enable Follow on Shop</mark>

Follow on Shop allows customers to follow your store on the Shop app and receive personalized recommendations and notifications about your products.

{% hint style="warning" %}
To use this feature, you need to have the Shop channel installed, and Shop Pay activated on your store. See [Shopify's Follow on Shop guide](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/follow-on-shop) for assistance.
{% endhint %}

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

<table><thead><tr><th width="198">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable Follow on Shop</mark></td><td>Allow visitors to follow you on Shop to receive recommendations and notifications about your products.<br><br>You'll need to have the Shop channel installed and Shop Pay activated on your store. See <a href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes/follow-on-shop">Shopify's Follow on Shop guide</a></td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Enabled</mark></td></tr></tbody></table>

***

> **Related links**
>
> [Footer](/stiletto/pages/footer.md)\
> [Links block](/stiletto/pages/footer/links-block.md)\
> [Newsletter block](/stiletto/pages/footer/newsletter-block.md)