How can I render product image alt text on the product pages?

Shopify Discussion

Topic summary

A user seeks to display product image alt text beneath the main product image on their Dawn theme store, with the text updating dynamically when customers select different images from the gallery. They want to use alt text as variant descriptors without overlaying text on images.

Proposed Solutions:

  • One response suggests editing theme code by locating the product template file and adding JavaScript to dynamically update alt text when gallery images are clicked
  • A simpler approach recommends using {{ media.alt }} within the {%- for media in product.media -%} loop, suggesting most themes shouldn’t require complex CSS/JS modifications

Current Status:

  • The original poster indicated they’re a novice and requested more detailed instructions
  • Another user has expressed interest in the same functionality
  • The discussion remains open with no confirmed implementation yet
Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I need some help please :slightly_smiling_face: I am using Dawn theme and I would like to output the alt text of an image under the main product image, when a customer chooses an image from the product page gallery I need the alt text to change based on the image. Im using it as a descriptor for variants without having to write it on the image (Google Shopping guidelines)

URL example: https://newcarmats.co.uk/products/bmw-1-series-f40-2019-current and below screenshot for where I need it (between main image and the media gallery of images):

Screenshot 2024-07-01 at 20.58.02.png
Screenshot 2024-07-01 at 20.58.02.png2296×1348 451 KB

Thanks for your help.

2

Hi @DiscoverProduct ,
This is Theodore from PageFly - Shopify Page Builder App.

Absolutely! Here’s how to display variant alt text under the main image on your Shopify Dawn theme:

  • Edit Theme Code: Access your Dawn theme code from Shopify admin.
  • Find Product Template: Locate the product template file (e.g., product.liquid).
  • Identify Image Elements: Search for the code displaying the main product image and its alt text.
  • Add Javascript: Modify the code with JavaScript to:
    • Identify main image and alt text elements.
    • Create a new element to display dynamic alt text.
    • Select all gallery images.
    • Update the alt text element with the clicked image’s alt text when a gallery image is clicked.
    • Append the updated alt text element below the main image.
  • Save and Test: Save changes and preview your product page to ensure functionality.

mportant:

  • Use appropriate CSS selectors based on your theme’s structure.
  • Consider using a development theme for testing before making live changes.

Best regards,
Theodore | PageFly

3

Thanks Theodore, Im a little bit of a novice so I got lost at 'Add Javascript:’ are you able to add more detail at all please?

4

Hi! Did you figure this one out? I’m looking for a way to output image alt as well :slightly_smiling_face:

5

So long as you place {{ media.alt }} in the correct location, you can output the alt text for each product image. It needs to be inside of {%- for media in product.media -%} (as an example).

Shouldn’t need any complicated JS/CSS edits to accomplish this in most themes :slightly_smiling_face: