How can I enable an image to open in a larger modal window?

LIYAShop
Excursionist
30 2 2

https://0db1d3-5b.myshopify.com/products/test

 

A collection has a image metafield. A product which is linked to that collection is showing the image.

I have managed to display the image in Size & Fit collapsible row.

I know that there are other (better, simpler) ways of showing the size chart, but in our case it's important that this information comes from a collection metafield.

Bellow is the code used. How can I link the image to open a bigger version of itself in a modal window?

 

{% for collection in product.collections %}
{%- if collection.metafields.custom.size_fit != blank -%}
  <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
    <details id="Details-{{ block.id }}-{{ section.id }}">
      <summary>
        <div class="summary__title">
          {% render 'icon-accordion', icon: 'none' %}
          <h2 class="h4 accordion__title inline-richtext">Size & Fit</h2>
        </div>
        {% render 'icon-caret' %}
      </summary>
      <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
        {{ collection.metafields.custom.size_fit | image_url: width: 1200 | image_tag: widths: '300, 600, 900, 1200' }}
      </div>
    </details>
  </div>
{% endif %}
{% endfor %}

 

Replies 0 (0)