# Featured icon with text

Use the **Featured icon with text** to highlight key product details or promotions.

* Show a default or custom **Icon**
* Add a **heading** and **text**
* Change the **background color**
* Make the block a clickable **link**

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FuxgjnPoZupz4NCs7YlC6%2Ffeatured-icon-text.png?alt=media&#x26;token=13899ee4-4437-4c37-bcca-483f17b99e35" alt=""><figcaption></figcaption></figure>

## Add featured icon with text

***

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

{% hint style="warning" %}
**Editing a template will change all pages that use that template**.

[Create and assign new templates](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/create-and-assign-new-templates.md) to design different page layouts.

[Add dynamic content](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/dynamic-content-with-metafields.md) to show page-specific content in the same template.
{% endhint %}

### Select icon

***

Choose an icon or upload your own to display next to the featured text.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fh3BFoIPYtdnPs5Uaseov%2Ficons-menu.png?alt=media&#x26;token=30cc88a3-c6da-4c4d-9194-78cddc6f72b6" alt="" width="226"><figcaption></figcaption></figure>

`Click Featured icon with 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;">Icon</mark></td><td>Choose from 40+ free icons.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Checkmark</mark></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><td></td></tr></tbody></table>

### Add text

***

Add a **heading** and multiple lines of rich **text** to highlight product details or promotions.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FGR74l4rZumWzaeVquStd%2Ffeatured-icon-heading.png?alt=media&#x26;token=3682dd93-641d-46c5-a687-0ff477fb8ddf" alt=""><figcaption></figcaption></figure>

`Click Featured icon with 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;">Heading</mark></td><td>Add text to display a title at the top.</td><td></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Enter multiple lines of rich text.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Use this text to highlight..."</mark></td></tr></tbody></table>

### Add link

***

Add a **link** to redirect visitors to another page when they click the block.

`Click Featured icon with text block to find settings`

<table><thead><tr><th width="160">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Link</mark></td><td>Enter the page or URL that you want to link to.</td></tr></tbody></table>

### Change colors

***

Change the colors of the **icon**, **text**, and **background**, or add a **gradient background.**

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJzJdPYhWyqHdAwUmHY3m%2Ffeatured-icon-gradient.png?alt=media&#x26;token=4de16a52-5a43-4b46-86e8-5a92f35211bd" alt=""><figcaption></figcaption></figure>

`Click Featured icon with 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;">Link</mark></td><td>Choose the page or URL that you want to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Icon</mark></td><td>Select the color of the icon.</td><td></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Select the color of the text.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: #222</mark></td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>Select the color of the background.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: #EDF2EA</mark></td></tr><tr><td><mark style="color:blue;">Background gradient</mark></td><td>Add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient. See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</td><td></td></tr></tbody></table>

### Add bottom padding

***

Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks.

`Click Featured icon with 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;">Bottom padding</mark></td><td>Add spacing below the block</td><td><p><strong>1 - 50px</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 36px</mark></p></td></tr></tbody></table>