> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/layout/anchor-link.md).
# Anchor Link
Create an in-page jump target so buttons and menu links can scroll straight to a specific section.
Long pages lose people. An anchor lets a button, a menu item or a link in your text jump straight to the part of the page that matters — "See sizing", "Jump to reviews", "Book a fitting". Anchor link is the invisible marker that makes those jumps possible, and setting one up takes about twenty seconds.
{% hint style="info" %}
**At a glance**
| Where to find it | **Add section → Layout** |
| ---------------- | ---------------------------------------------------- |
| Renders | Nothing on the live page — an editor marker only |
| Allowed on | Page templates only, not the header or footer groups |
| Settings | One — the anchor's name |
| {% endhint %} | |
***
### How to add
{% stepper %}
{% step %}
### Place the marker
Click **Add section**, pick **Anchor link** from the **Layout** category, and drag it immediately above the section you want people to land on.
{% endstep %}
{% step %}
### Name the anchor
Type a name into the **Anchor link** field — `reviews`, `sizing`, `about`. Lowercase letters, digits and hyphens only.
{% endstep %}
{% step %}
### Point something at it
Set any button, menu item or text link to `#reviews`. The leading `#` goes in the link, not in the field.
{% endstep %}
{% step %}
### Test it on a phone
With a sticky header, the header can sit over the first line of the target section. Check the jump on mobile before you call it done.
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
**The field starts at `anchor-link` — change it.** Two sections left on the default name means the browser only ever finds the first one, and the second jump silently goes to the wrong place.
{% endhint %}
{% hint style="success" icon="lightbulb" %}
### Good to know
* **The section renders nothing on the live storefront.** You'll see a marker inside the theme editor and nothing at all on the published page — that's expected, not a broken section.
* **Because it's invisible it adds no height**, which is why it has no spacing or color settings.
* **Use lowercase letters, digits and hyphens.** Spaces and punctuation make links unreliable.
* **The link you write elsewhere needs the leading `#`;** the name in this field does not.
* **Anchors work across pages too.** A menu item pointing at `/pages/faq#shipping` opens the FAQ page already scrolled to that spot.
{% endhint %}
### Customization ideas
A mini table of contents
At the top of a long landing page, add a Custom HTML section holding a list of `#anchor` links. Visitors pick their own entry point instead of scrolling past everything.
Link the size chart from the description
Put an anchor above your size chart and link to it from the product description. Shoppers stop hunting for it — and stop emailing you about it.
Send a menu item deep into a page
Point a navigation item at `/pages/about#team` to land people on one part of a long page rather than the top of it.
One form, several buttons
On a campaign page, anchor the sign-up form and place "Get the code" buttons at several points down the page, all targeting it.
***
### Settings reference
Settings
| Setting | What it does |
| --------------- | ---------------------------------------------------------------------------- |
| **Anchor link** | The anchor's name. Starts at `anchor-link`. Link to it elsewhere as `#name`. |
### Best practices
* **Name anchors after the content, not the position.** `#reviews` keeps working after you reorder the page; `#section-3` doesn't.
* **Place the anchor just above the target section rather than inside it,** so the heading isn't cut off at the top of the viewport after the jump.
* **Keep a list of the anchors you've used.** They're invisible on the page, so the only way to spot a duplicate is to go looking.
## Related
* [Empty Space & Line](/docs/volume-themes/sections/layout/empty-space-and-line.md)
* [Custom HTML & Custom Liquid](/docs/volume-themes/sections/layout/custom-html-and-custom-liquid.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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/volume-themes/sections/layout/anchor-link.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.