How do I create an image modal popup on my website?

Store Design
1

Hi & thanks in advance for any help!

I’m trying to make my images pop up when clicked, eg: https://www.ysl.com/fr/shop-product/homme/pret-a-porter-chemises-classiques-chemise-a-rayures-triples-en-soie-mate-et-brillante_cod38926876uf.html#dept=men_nouveautes

I want it to work the same as linked above where you can continue to scroll to all the images once opened.

my current site is: https://velvetcanyon.com/collections/shop/products/zou-bisou-black and the base theme is showcase.

I’ve tried adding modal popup code but cant quite get it right.

The code sample for my images is:

{% case media.media_type %}
  {% when 'image' %}
    

      

        {% assign img_url = media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

Thanks again for any assistance!!!

1 Like