> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/pages/footer/links-block.md).

# 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">

<h2 align="center">Add links block</h2>

***

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>

<sub><mark style="color:$info;">Click Links block to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Change block layout</mark>

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.

<sub><mark style="color:$info;">Click Links block to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Change heading</mark>

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

<sub><mark style="color:$info;">Click Links block to find settings<mark style="color:$info;"></sub>

<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>

### <mark style="color:$primary;">Display collapsible row on mobile</mark>

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.

<sub><mark style="color:$info;">Click Links block to find settings<mark style="color:$info;"></sub>

<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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.fluorescent.co/stiletto/pages/footer/links-block.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.