# 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FEPRFYlOzgFJJ4gJkxJnh%2Ffeatured-links-desktop-Inline.png?alt=media&#x26;token=f49ae01e-99cd-423b-ad7d-24f961000913" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) 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="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FmzLWtZDCdLmsP4UDltJT%2Ffeature-links-stacked.png?alt=media&#x26;token=62f1dc5d-5ec6-4f60-82dd-f022e91e593e" alt=""><figcaption><p>Stacked</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FVrZRsHLvHqMwROG5ljah%2Ffeature-links-inline.png?alt=media&#x26;token=46bb5423-2973-4851-96c6-52f249cc449f" alt=""><figcaption><p>Inline with commas</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FePZXNUTONQEs2RDz41A7%2Ffeature-links-dash.png?alt=media&#x26;token=cbcb87d0-6ff4-4a86-9dd5-3bb9203cbfb0" 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoDX3bSyQwl4gSRSxviIh%2Ffeatured-links-coastal.png?alt=media&#x26;token=2f66bbd6-44f7-48ca-9dd7-4d8bc780b360" 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fbe9DDcq6ltjMvYAnDxBv%2FDesktop%20-%20Stacked.png?alt=media&#x26;token=6b35cbc9-c338-41ad-baad-e55b358a4d59" alt=""><figcaption><p>Desktop stacked with image showcase</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FXGMTQYD42rK5sc2Jsq6u%2FMobile%20-%20Stacked%20with%20thumbnails.png?alt=media&#x26;token=4ae3e662-f4b7-406c-8f7d-f08ab3ee9bcc" 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>