How can I create a modal product info popup?

Store Design

Topic summary

Goal: Add a modal (popup overlay) to show brief extra product information on specific products, triggered by a “Click here” link, similar to the provided example URL.

Proposed approach: One reply suggested editing the theme by adding a CSS rule in Online Store → Theme → Edit code → Assets → theme.scss. The provided CSS selector hides an element (.EzfyReveal-second-image) under certain product image conditions.

Issues: The suggested CSS only controls image visibility and does not implement modal functionality (which typically requires HTML for the modal markup and JavaScript to open/close it). The original poster tried the CSS change and reported it did not work.

Current status: No working solution for creating a modal popup has been provided. The request for guidance on implementing an actual modal (HTML/CSS/JS or a theme/app-based method) remains unresolved.

Notes: The example link is central for understanding the desired behavior. The shared code snippet is CSS-only and not sufficient for modal behavior without accompanying markup and JavaScript.

Summarized with AI on February 22. AI used: gpt-5.
1

Hi,

I try to create extra info for some products with a modal-box popup. Something like this> https://www.bimago.art/canvas-prints/people/women/female-body-1-part-vertical-138844.html

If you click on the Click here link a very short explanation plops up.

Does anybody know how to do that?

Thanks!!!

2

Hi @tiptophomedecor ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
.grid-link__image.grid-link__image-sold-out.grid-link__image--product .badge--sold-out+.grid-link__image-centered .EzfyReveal-second-image {
    display: none;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

3

Hi, I tried this but is not working. Thank you for your time!!!