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
Add the Modal Section
In your theme editor, add the "Modal popup" section to your page.
Set Modal Action to Link Trigger
In the section settings, set Modal action to Link trigger.
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.
Create a Link to Trigger the Modal
Add the anchor instead of a regular url in any link theme setting:
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.
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.
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!
Last updated