# Featured links

Use the **Featured links** section to show large links with an image showcase that changes when links are hovered over.

<figure><img src="/files/iDYTBirVJsMmpYSrzMpI" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Featured links**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td></td></tr></tbody></table>

## Add featured links

***

Click a **Link block** to add a URL and text for the featured links. Click and hold the drag handles **`⋮⋮`** to re-order link blocks.

`Click Link block to find settings`

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Link URL</mark></td><td>Select a page or URL for the link.</td></tr><tr><td><mark style="color:blue;">Link label</mark></td><td>Enter text for the link.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image that displays when the link is hovered over. The <a href="#image-showcase">image showcase</a> must be enabled.</td></tr><tr><td><mark style="color:blue;">Underline</mark></td><td>When enabled, the link text will be underlined.</td></tr></tbody></table>

## Change link styles

***

In the section settings, change the layout and text styles of the featured links.

* Choose the **display style** for desktop and mobile
* Change the text **font** and **size**
* Adjust the **line height** between links
* Choose the **separator style** between links

<div><figure><img src="/files/PtKRclR22VvkbecEfixr" alt=""><figcaption><p>Stacked</p></figcaption></figure> <figure><img src="/files/6ACDpas4H1YNxb9GZf8Q" alt=""><figcaption><p>Inline with commas</p></figcaption></figure> <figure><img src="/files/jumHDr57ZQr0QVPOtOW4" alt=""><figcaption><p>Inline with dashes</p></figcaption></figure></div>

&#x20;

`Click Featured links section to find settings`

<table><thead><tr><th width="155">Setting</th><th width="347">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Link text font</mark></td><td>Choose the font for the link text, as selected in your theme settings.</td><td><strong>Heading</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Body</strong></td></tr><tr><td><mark style="color:blue;">Text link size</mark></td><td>Change the font size for all link text from small to large.</td><td><strong>1 - 8</strong><br><em><mark style="background-color:yellow;">Default: 3</mark></em></td></tr><tr><td><mark style="color:blue;">Link line height</mark></td><td>Adjust the amount of vertical space between links.</td><td><strong>1 - 2</strong><br><em><mark style="background-color:yellow;">Default: 1.3</mark></em></td></tr><tr><td><mark style="color:blue;">Desktop display style</mark></td><td>For desktop screens, change the layout of links.</td><td><strong>Inline</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Stacked</strong></td></tr><tr><td><mark style="color:blue;">Mobile display style</mark></td><td>For mobile screens, change the layout of links.</td><td><strong>Inline</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Stacked</strong></td></tr><tr><td><mark style="color:blue;">Inline link style separator</mark></td><td>For "Inline" style, choose the character that separates each link.</td><td><strong>Comma spaced</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Dash</strong><br><strong>Forward slash</strong></td></tr></tbody></table>

&#x20;

## Show product counts for collections

***

If a featured link points to one of your collections, you can display the number of products in that collection.

<figure><img src="/files/GSbbIqLPrpBEOnV8WaMr" alt="" width="563"><figcaption></figcaption></figure>

`Click Featured links section to find settings`

<table><thead><tr><th width="218">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show product counts</mark></td><td>When enabled, featured links to collections will display the number of products in the collection.</td></tr></tbody></table>

## Image showcase

***

Display an image next to the featured links. When hovering over a featured link, display an image.

<div><figure><img src="/files/DfWcCRUUoUbkdvpEXVeC" alt=""><figcaption><p>Desktop stacked with image showcase</p></figcaption></figure> <figure><img src="/files/qkSr8cX1HJfFuA6kOGuN" alt=""><figcaption><p>Mobile stacked with thumbnails</p></figcaption></figure></div>

&#x20;

`Click Featured links section to find settings`

<table><thead><tr><th width="168">Setting</th><th width="362">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable image showcase</mark></td><td>Display an image that changes when links are hovered over.</td><td></td></tr><tr><td><mark style="color:blue;">Default showcase image</mark></td><td>Select or upload an image to display first, before links are hovered over. <br><br>If no image is uploaded, the default will be the first link's image.</td><td></td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>For mobile screens, adjust the space between content blocks.</td><td><strong>40 - 60 %</strong></td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the image showcase on the left or right of the featured links.</td><td><strong>Left</strong><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td><p>Crop the image to a uniform shape, or select Natural to maintain its original shape. </p><p></p><p>"Aspect ratio" refers to the proportion between the image's width and height (W:H).</p></td><td><strong>Natural</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong></td></tr><tr><td><mark style="color:blue;">Show thumbnails on mobile</mark></td><td>On mobile, display images next to the featured links.<br><br>Only applies to "Stacked" mobile display style.</td><td></td></tr></tbody></table>

## Section header

***

Add a **Heading** above the featured links and a **Button** belo&#x77;**.**

&#x20;

`Click Featured links section to find settings`

<table><thead><tr><th width="153">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter heading text to show above the featured links.</td><td></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 8</mark></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. Learn how to <a href="https://github.com/fluorescent/kb-horizon/blob/main/sections/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td><td><strong>H1 - H6</strong></td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select a page or URL for the button.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text for the button.</td><td></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Choose the visual style of the button.</td><td><strong>Solid</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Outline</strong><br><strong>Text</strong></td></tr></tbody></table>


---

# 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/eclipse/sections/featured-links.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.