Liquid code not updating based on "alt" image

orhl1234
Shopify Partner
87 0 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_1-1714833937812.png

 

 

Replies 4 (4)

BSS-TechFusion
Shopify Expert
149 26 15

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-TechFusion
Shopify Expert
149 26 15

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.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

orhl1234
Shopify Partner
87 0 1

hi!
could you maybe help me with that?

BSS-TechFusion
Shopify Expert
149 26 15

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development