# Text list with icons

Add a **Text list with icons** for additional product details with one of 30+ icons. You can highlight your company values, process, or key elements of your product.

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-668038d6bee8e692c04ad147a5f04bfe36aa97af%2Ftext-list-icons.jpeg?alt=media)

## Set up text list with icons

***

Under **Product overview**, click **(+) Add block** and select **Text list with icons**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks.  Click the block to start adding content.

<details>

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

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

1. Under **Product overview**, click **(+) Add block** and select **Text list with icons**.
2. Click on the new **Text list with icons** block to open the settings.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-fb9ee62ec2aa3fc9f0415260a389024afd19b305%2Ftext-list-settings.jpeg?alt=media)
3. Choose whether to **Add box** to display an outline around the text list.
4. Choose whether to **Add dividers** to separate each text list item.
5. For each **List item**, select an **Icon** and enter **Text**.

   > We recommend a short sentence or two.
6. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

   > Click **Remove block** in the block settings to delete a block.

   > Click the **Eye icon** to hide or unhide a block.
7. Click **Save**.

</details>

Add items

***

Add up to 6 list items with an **icon** and **text**. Choose an icon or upload your own.

&#x20;

`Click Text list with icons block to find settings`

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon</mark></td><td>Choose from 30+ free icons.</td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td>Upload your own icon image to display next the heading.<br><br>We recommend a PNG image with a transparent background and minimum dimensions of 50px by 50px.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add short text to tell customers about your product.</td></tr></tbody></table>

&#x20;

## Change layout and style

***

`Click the Text list with icons block to find settings`

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Title</mark></td><td>Add text to show a heading at the top of the block, above the text list.</td></tr><tr><td><mark style="color:blue;">Add box</mark></td><td>Display the block within a block with a background color.</td></tr><tr><td><mark style="color:blue;">Add dividers</mark></td><td>Show horizontal borders between each text list item.</td></tr></tbody></table>

#### Collapsible row

<table><thead><tr><th width="178">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Display as collapsible row</mark></td><td>Show an expandable title that reveals the text when clicked.</td></tr><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Display the collapsible row as open with the text already revealed.</td></tr><tr><td><mark style="color:blue;">Collapsible row title</mark></td><td>Enter text for the row title.</td></tr></tbody></table>

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/stiletto/product-pages/product-template)\
> [Product labels](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/product-labels)\
> [Text block](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/text-block)