Error when adding title

Store Design
, ,

Topic summary

A user encountered a Liquid syntax error when attempting to manually add a title attribute to product images in Shopify’s Dawn theme. The error occurred in the product-media-gallery snippet because the title attribute was incorrectly placed before the image_tag filter.

Two solutions were provided:

  • Replace the image_tag filter with a standard HTML <img> tag, allowing direct control over attributes including the title
  • Reorder the Liquid code to call the title attribute after defining the image, along with other attributes like sizes, widths, and alt text

Additional note: If adding the title attribute to all slider images, the same modification needs to be applied within the product media loop.

The discussion remains open pending confirmation from the original poster on whether either solution resolved the issue.

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

Hello i want to add title to my image but with the dawn theme the title is not there so i’m trying to add id manually but i’m getting the error :

Liquid syntax error (snippets/product-media-gallery line 234): Expected end_of_string but found colon in “{{ title: featured_media.alt | escape, featured_media.preview_image | image_url: width: 416 | image_tag: loading: ‘lazy’, sizes: sizes, widths: ‘54, 74, 104, 162, 208, 324, 416’, id: thumbnail_id, alt: featured_media.alt | escape }}”

The code:

<button
              class="thumbnail global-media-settings global-media-settings--no-shadow"
              aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
              aria-current="true"
              aria-controls="GalleryViewer-{{ section.id }}"
              aria-describedby="{{ thumbnail_id }}"
            >
              {{
//this part -----------
                **title: featured_media.alt | escape,**
------------
                featured_media.preview_image
                | image_url: width: 416
                | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: featured_media.alt | escape
              }}
            </button>
2

@groudse

Using image_tag, it will be difficult to add title attribute. Instead, you can use tag directly. So the above code can be like this:

If you want to add the title attribute to all slide images, you need to do the same thing in “{%- for media in product.media -%}” loop.

Hope it will help you.

Regards,

Vinh

3

Hi @groudse ,

The Liquid syntax error occurred because you added title for the image before calling the image. You can fix the issue by replacing the below code instead of your current one:

Note: You need to call the title with the attributes like sizes, widths, alts, etc after defining the image.

I hope this helps! If not, please provide password of website.

If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans