How to escape double quotes in the image alt tag of the product images

Technical Q&A
, ,

Topic summary

A Shopify store owner is experiencing an issue where product image alt tags are being truncated due to unescaped double quotes in the HTML markup.

The Problem:

  • Alt attributes containing double quotes break the HTML syntax, cutting off the text prematurely
  • Visible in the product page’s thumbnail images
  • Example product: Keuco Axess ADA corner rail with multiple sizes/finishes

Attempted Solution:

  • The user tried implementing a fix in the product template using Liquid code: {{ media.alt | default: product.title }}
  • This approach did not resolve the issue

Suggested Fix:

  • Another user recommended using Shopify’s built-in escape filter in Liquid templates
  • The filter properly escapes special characters like double quotes in HTML attributes
  • Reference: Shopify’s official documentation on Liquid filters

Status: The discussion appears to have a proposed solution (escape filter) but no confirmation yet on whether it resolved the issue.

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

Hi,

The alt tag of thumbnails is being cut off because of unescaped double quote as show in the image below?

pramodraam_0-1699177665179.png
pramodraam_0-1699177665179.png1694×427 51.9 KB

To see this, please visit the product page at https://www.perfectmakeupmirrors.com/products/keuco-axess-ada-corner-rail-3-sizes-3-finishes

I tried to fix this with the code below in product-template. But it is not working. Please suggest how to fix it

title="{{ {% raw %}media.alt{% endraw %} | default: product.title}}"
2

The escape filter could be helpful.