# Links block

Display a column of links from one of a [Shopify navigation menus](https://help.shopify.com/en/manual/online-store/menus-and-links). Only top-level links will be displayed.

<img src="/files/bSTdPBtBWRFSXP5v4KZM" alt="" width="375">

## Add links block

***

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

Click the **Links** block to **select a menu** that you've created in the Shopify admin.

<details>

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

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

1. Click the arrow beside the **Footer** section to reveal the content blocks.
2. Click one of the **Menu** blocks to edit the content or use the **(+) Add block** button.
3. Click **Change** to select a different menu to display.

   > For more information about menus on Shopify, see their [Menus and links](https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links) article.
4. Change the **Heading** to title your links.

   >
5. 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.
6. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   <img src="/files/tOHF9cG7TWZSPV5YgAH3" alt="" width="302">

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

</details>

`Click Links block to find settings`

<table><thead><tr><th width="149">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Menu</mark></td><td><p>Select a menu of links that you've created in your Shopify admin.</p><p>Only top-level links are displayed, so dropdown menus will not appear.</p></td></tr></tbody></table>

## Change block layout

***

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.

`Click Links block to find settings`

<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 links within the full width of the block.</td><td><strong>0 - 20%</strong></td></tr></tbody></table>

## Change heading

***

Change the heading text above the links and choose whether to show the heading on desktop.

`Click Links 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>The title of the links block. Leave the field blank to remove the heading. However, a heading is required when collapsible rows on mobile are enabled.</td><td><mark style="background-color:yellow;">Default: Links</mark></td></tr><tr><td><mark style="color:blue;">Show heading on desktop</mark></td><td>Choose whether to show the block heading on desktop screens.</td><td><mark style="background-color:yellow;">Default: Enabled</mark></td></tr></tbody></table>

## Display collapsible row on mobile

***

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.

`Click Links 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;">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>

***

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


---

# 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/stiletto/pages/footer/links-block.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.