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

Shopify Discussion

Topic summary

A user is working with a Shopify product page that displays a size chart image from a collection metafield within a collapsible “Size & Fit” section.

Current Implementation:

  • Successfully displaying an image from collection.metafields.custom.size_fit
  • Image appears in a collapsible row on the product page
  • Using collection metafields is a specific requirement for their use case

Issue:
The user needs to make the displayed image clickable so it opens in a larger modal/popup window for better visibility.

Code Provided:
Partial Liquid template code showing the metafield implementation and accordion structure, though the code snippet appears incomplete or corrupted in the post.

Status: The question remains unanswered with no solutions or suggestions provided yet.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

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 %}