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

30 2 2


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-{{ }}-{{ }}">
        <div class="summary__title">
          {% render 'icon-accordion', icon: 'none' %}
          <h2 class="h4 accordion__title inline-richtext">Size & Fit</h2>
        {% render 'icon-caret' %}
      <div class="accordion__content rte" id="ProductAccordion-{{ }}-{{ }}">
        {{ collection.metafields.custom.size_fit | image_url: width: 1200 | image_tag: widths: '300, 600, 900, 1200' }}
{% endif %}
{% endfor %}


Replies 0 (0)