How can I create a popup text box like this one?

Store Design

Topic summary

Creating a popup text box (modal overlay) for product details, similar to the referenced product page where clicking “Made from: Organic Cotton” opens a popup instead of navigating away.

A participant provided a basic approach using HTML, CSS, and JavaScript to trigger and display a popup text box. The shared code snippet is central to understanding the solution.

Actionable next steps:

  • Add a clickable element (e.g., the “Made from: Organic Cotton” text) as the trigger.
  • Implement the modal HTML structure, style it with CSS, and use JavaScript to open/close the popup.
  • Insert desired content (text/HTML) into the modal body.

Clarifications/limitations:

  • The example is generic; no guidance was given on integrating with a specific store platform or theme.
  • Accessibility, mobile behavior, and styling details were not addressed.

Status: No confirmed resolution yet. The thread currently offers a starting code example, and further customization/integration steps remain open.

Summarized with AI on January 27. AI used: gpt-5.
1

Hello,

I was wondering if anyone can help? I’m looking to create a popup text box…I’ve added a link to another page below that has the ‘‘popup’’ i’m looking for.

When you click on the Made from: Organic Cotton (halfway down the page), photo and link it brings you to a pop up and not a full page.

If anyone can help that would be class.

Thanks Damian

https://finisterre.com/en-ie/collections/mens-t-shirts/products/mens-organic-cotton-channel-stripe-t-shirt-ecru-navy

2

To create a popup text box similar to the one you described, you can use HTML, CSS, and JavaScript. Here’s a basic example of how you can achieve this:

HTML:

Made from: Organic Cotton

  

    

This is the popup text box content.

    

You can add any desired text or HTML here.
1 Like