> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/links/popup-link.md). # Popup link The **Popup link** block puts a small trigger in a section which opens a panel over the page, either a centred popup or a drawer sliding in from the side. It is added inside a section right where the question arises, and its content is built from nested blocks, so it can hold a size table, delivery terms, care instructions, or anything else worth having on hand without giving it room on the page. Shoppers close the panel and carry on from the same spot, which is the point of using it instead of a link to another page.
### How to add it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. In the left sidebar, click the section where the trigger should sit. 3. Click **Add block** and choose **Popup link**. 4. Write the trigger wording in **Text** and pick a **Button Type**. 5. Set **Popup Type** to a popup or a drawer, then add the blocks that fill it. {% endhint %} *Result:* the trigger appears in the section, and clicking it opens the panel with your nested content inside. ### General settings | Setting | Description | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Inherit Color Scheme** | Leaves the trigger in the colors of the section around it, which is the default and keeps it looking like part of the content. | | **Colors** |

Only visible when Inherit Color Scheme is disabled.

Gives the trigger its own scheme, for when it needs to stand out from the wording it sits beside.

| | **Button Type** |

How much the trigger looks like a button

| | **Text** | The wording shoppers click, "Learn more" by default. Naming the content, such as "Size guide", gets clicked more often than a generic phrase. | | **Font Size** |

How large that wording is:

Keep it at or below the text beside it, so a helper link does not outshout the content.

| | **Icon Type** |

The mark beside the wording that hints something will open:

| | **Image** |

Only visible when Icon Type is Image.

The file used in place of the built in mark.

| | **Icon Size** | How big that mark is, from 0px to 50px. It should read as a hint next to the wording, not compete with it. | | **Gap** | The space between the wording and the mark, from 0px to 50px. Too little and the two run together as one word. | ### Popup style | Setting | Description | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Inherit Color Scheme** | Leaves the opened panel in the colors of the section it was triggered from, which is the default. | | **Colors** |

Only visible when Inherit Color Scheme is disabled.

Gives the panel its own scheme, so the content that opens can be lighter or darker than the page behind it.

| | **Popup Type** | How the content arrives: Popup, a window centred over the page, or Drawer, a panel sliding in from the side. Popups suit short content read at a glance, drawers suit longer content shoppers scroll. | | **Popup Width Desktop** | How wide the panel is allowed to grow on a computer screen, from 300px to 1600px. Wide values suit tables, narrow ones keep a paragraph readable. | | **Corner Radius** |

How rounded the corners of the panel look. Options include:

| | **Custom Radius** |

Only visible when Corner Radius is Custom.

The exact rounding for this panel, from 0px to 50px.

| ### Spacing These settings control the external spacing (padding) applied directly above and below this specific block. | Setting | Description | | ---------- | -------------------------------------------------------------------------------------------------------- | | **Top** | Adds space above the trigger so it does not sit tight against the wording over it. Accepts 0px to 100px. | | **Bottom** | Leaves space under the trigger before the next block starts. Accepts 0px to 100px. | ### What changes on the storefront * Shoppers get the extra detail where they asked for it, and return to the same spot when they close the panel. * The page stays shorter, because content that would take a whole section only appears when it is wanted. * Content comes from the nested blocks, so a trigger with nothing inside it opens an empty panel. ### Related pages * [Links](/velare/customize-your-pages/links.md): the group this block belongs to * [Button](/velare/customize-your-pages/basic/button.md): for actions that load a page instead of opening a panel * [Accordion](/velare/customize-your-pages/layout/accordion.md): for detail that expands in place rather than over the page --- # 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://uxsmart.gitbook.io/velare/customize-your-pages/links/popup-link.md?ask=&goal= ``` `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.