Liquid code not updating based on "alt" image

Store Design
, , ,

Topic summary

A user is experiencing an issue with Liquid code that displays text based on product image alt tags. The code successfully shows text for the first image (“image_1”) but fails to update when switching to other color variants (“image_2” for black, “image_3” for white).

Technical Issue:

  • The code snippet uses {% assign main_image_alt = product.featured_image.alt | downcase %} which always references the product’s first/featured image
  • When variants change, the alt text doesn’t update accordingly

Explanation Provided:

  • Liquid code executes server-side during initial render
  • Variant changes happen client-side and don’t trigger Liquid re-rendering
  • This causes the text to remain stuck on the first image’s alt value

Proposed Solution:
Implement JavaScript to handle dynamic updates when variants change, since Liquid alone cannot respond to client-side interactions.

A support representative has requested the store link and theme details to provide a specific solution.

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

https://i1hxd88d7pu01fud-61323608109.shopifypreview.com
im trying to make a text update based on the alt text.

the alt are

red color “image_1”

black color is “image_2”

white color is “image_3”

the code writes the first image’s alt but not the other. why? what should i adjust for it to be updated?

{% assign main_image_alt = product.featured_image.alt | downcase %}
{% if main_image_alt == 'image_1' %}
  {{" image number 1 "}}
{% elsif main_image_alt == 'image_2' %}
  {{" image number 2 "}}
{% elsif main_image_alt == 'image_3' %}
  {{" image number 3 "}}
{% endif %}

orhl1234_0-1714833127739.png
orhl1234_0-1714833127739.png2344×1366 153 KB

orhl1234_1-1714833937812.png
orhl1234_1-1714833937812.png2770×1366 202 KB

2

Hi @orhl1234 , it seems like you want to change the label “Image number 1” when you want to change the variant, right? When you render the liquid code, it executes on the server-side, and when you change the variant, the code will be re-rendered on the client-side (depending on the theme you’re using), so the text not being correspondingly re-rendered. Additionally, the code snippet: {% assign main_image_alt = product.featured_image.alt | downcase %} will take the first image of the product, resulting in the text always displaying according to the first image. If you want to fix this, you can use JavaScript code.

3

Hi @orhl1234 , it seems like you want to change the label “Image number 1” when you want to change the variant, right? When you render the liquid code, it executes on the server-side, and when you change the variant, the code will be re-rendered on the client-side (depending on the theme you’re using), so the text not being correspondingly re-rendered. Additionally, the code snippet: {% assign main_image_alt = product.featured_image.alt | downcase %} will take the first image of the product, resulting in the text always displaying according to the first image. If you want to fix this, you can use JavaScript code.

4

hi!
could you maybe help me with that?

5

Hi!

Can you kindly share your store link (with the password, if any), name theme with us? We will check it and suggest you a solution if possible.