Help displaying Image alt text on a product gallery image

Store Design

Topic summary

A user is attempting to display product image alt text as a caption in their Shopify theme’s product gallery but encounters issues with the placeholder not rendering.

Initial Problem:

  • Code {{product.title}} - {{image.alt}} successfully displays product title but fails to show alt text
  • User provided full product-images.liquid code for context

Attempted Solutions:

  1. One suggestion recommended adding the translation filter: {{ image.alt | t }} — this did not resolve the issue
  2. A later response identified the root cause: incorrect object reference

Resolution:
The solution is to use {{media.alt}} instead of {{image.alt}} when iterating through product media in the loop. This accounts for Shopify’s media object structure in modern themes where the code loops through product.media rather than just images.

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

Hi, I would like to use the product image Alt text to display a caption over the product image.

Here is the code I have in my product-images.liquid file

{{product.title}} - {{image.alt}}

The product title is being displayed perfectly, but I can not seem to get the alt tag to display. I tried a number of other placeholder objects, with some working, and others not.

Can someone enlighten me on what I may be doing wrong? Am i missing something crucial to make this work?

I will post the full page code below…

Thanks for your help!!!

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

{%- unless product.empty? -%}

{%- for media in product.media -%} {%- include 'media', media: media, featured_media: featured_media, isModal: isModal, video_looping: video_looping, video_style: video_style -%} {%- endfor -%}

{% assign first_3d_model = product.media | where: ‘media_type’, ‘model’ | first %}

{%- if first_3d_model -%}
<button
aria-label=“{{ ‘products.product.view_in_space_label’ | t }}”
class=“product-single__view-in-space”
data-shopify-xr
data-shopify-model3d-id=“{{ first_3d_model.id }}”
data-shopify-title=“{{ product.title }}”
data-shopify-xr-hidden



{{ ‘products.product.view_in_space’ | t }}


{%- endif -%}

**
{{product.title}} - {{image.alt}}
**

{%- else -%}

{%- endunless -%}
2

try adding | t to the img alt.

{{ image.alt | t }}

https://shopify.dev/tutorials/develop-theme-localization-use-translation-keys

3

Unfortunately this didnt work.

4

I know I’m answering this quite late but for anyone who still might struggle with this or runs across this question, try using {{media.alt}} instead of {{image.alt}}. Hope it helps :))