# Modal popup: How to Use the "Link Trigger" for Showing Extra Information

The "Link trigger" feature is perfect for displaying additional information, details, or context to your customers—without cluttering your main page. When a visitor clicks a specific link, a modal popup appears with the content you’ve configured, such as size guides, shipping info, product details, or any custom content.

#### Typical Use Cases

* Show a size guide on product pages
* Display shipping or return policies without navigating away
* Reveal ingredient lists, disclaimers, or technical specs
* Provide more details about a promotion or offer
* Show FAQs or help content in context

#### How It Works

When you set the Modal action to "Link trigger," the modal will only open when a visitor clicks a link with a specific anchor (e.g., #more-details). This keeps your page clean and only shows extra info when requested.

**Step-by-Step Instructions**

1. Add the Modal Section

* In your theme editor, add the "Modal popup" section to your page.

2. Set Modal Action to Link Trigger

* In the section settings, set Modal action to Link trigger.

<figure><img src="/files/GBUmVKiBbRWnoogY1DpD" alt=""><figcaption></figcaption></figure>

3. Choose an Anchor ID

* In the Link trigger field, enter a unique anchor (e.g., #more-details).
* This will be the value you use in your link’s href attribute.

<figure><img src="/files/tWl2vaNAJH9HMELoTtCC" alt=""><figcaption></figcaption></figure>

4. Create a Link to Trigger the Modal

* Add the anchor instead of a regular url in any link theme setting:

{% embed url="<https://share.zight.com/OAuyz6xy>" %}

* In your product description, page content, or in any HTML, add a link like:

```
<a href="#more-details">View size guide</a>
```

* Replace #show-details with the anchor you set in the section settings.

{% embed url="<https://share.zight.com/Kou6DAe6>" %}

5. Add Content to the Modal

* Use the section’s blocks to add headings, text, images, or other content you want to display in the popup.

6. Save and Test

* Save your changes and preview your store.
* Clicking the link should now open the modal with your extra information.

**Tips & Best Practices**

* Keep it Focused: Use the modal for content that’s helpful but not essential to see at all times.
* Multiple Triggers: You can use the same anchor in multiple places (e.g., "View details" links on several products).
* Accessibility: The modal is keyboard accessible and can be closed with the Escape key or by clicking outside the modal.

**Troubleshooting**

Modal Not Opening?

* Ensure the link’s href matches the anchor in the section settings exactly. eg. Do not use uppercase in one place, but not the other.
* Check for typos or extra spaces.

Modal Opens on Page Load?

* Make sure "Link trigger" is selected, not "Timed appear."

***

Need more help?

Contact our support team for assistance with advanced use cases or customizations!


---

# 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://design-packs.gitbook.io/docs/fundamentals/section-tutorials/modal-popup-how-to-use-the-link-trigger-for-showing-extra-information.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.