Product Images Need Colour in Alt Tags to Display – How Can I Use Custom SEO Alt Text?

[Tom_Kingham]

Hey everyone,

I’m running into a problem with a Shopify theme and could use some guidance.

The theme is set up so that product images only show if the alt tag contains the product color (e.g., “Navy”). Because of this, I can’t put proper SEO-friendly alt text on product images, which is hurting Google image search visibility.

I’ve created a custom metafield (custom.seo_alt_text) on variants to store descriptive alt text, e.g., “Navy Mottled Hand-Burnished Belt Strap by Elliot Rhode.” But no matter what I try in the Liquid template, the alt tag still only shows the color.

Here’s an example of what I tried in main.product.liquid:

<img src="{{ preview_image | img_url: '400x' }}" alt="{{ product.selected_variant.metafields.custom.seo_alt_text | escape }}">

…and the alt tag still shows just “Navy.”

I need a way to:

1. Keep the theme working so images display with the color requirement.

2. Use my custom.seo_alt_text metafield in the alt attribute for SEO purposes.

I’ve tried variant loops, selected_variant and modifying preview_image.alt, but nothing works.

Is there a clean way to get this working without breaking the variant-image functionality? Any advice or code snippets would be hugely appreciated.

Thanks,
Tom

[Liam-Shopify]

Hi @Tom_Kingham

When you say:

The theme is set up so that product images only show if the alt tag contains the product color (e.g., “Navy”)

Can you provide context on why that is? It sounds like it might not be forward to override the native method that an images alt text is defined, using the image.alt property.

[Tom_Kingham]

Hi Liam,

Thanks again for looking into this.

Current setup

The way the site was built, we have to use the colour name in the alt tag for the photos we upload in order for them to display. Without putting the colour name that matches the product colour, the product image doesn’t show at all on the product page. Because of this, we can’t use the alt tag space for proper descriptive text, which means none of our photos are showing up in Google Image Search. With search being so image-sensitive nowadays, this is a real issue.

What I tried

I followed the ICON theme developer’s suggestion to wrap the colour in square brackets within the image alt text, for example:
"[Brown] Mottled Bitter Choc Belt – versatile textured leather, smart and casual, aged brass buckle, ideal for earthy tones and navy"

And in Liquid:

alt="{{ preview_image.alt | remove_first: '[' | split: ']' | last | strip | escape }}"

You can see this in action here: Preview Link.

The issue

Unfortunately, as soon as I update any alt text, even formatted this way, the associated image disappears from the product page. So the suggested workaround effectively breaks the theme logic.

The problem is that the theme requires the colour text in image.alt for variant-image mapping, while for SEO I need the rendered <img> alt attribute to use a full descriptive text such as “Brown Mottled Hand-Burnished Belt Strap by Elliot Rhodes”. At the moment we can only do one or the other, not both.

What I need

What I need is a way to decouple the two so that image.alt continues to hold the colour reference for the theme’s internal logic, but the alt attribute in the front-end HTML instead pulls from my custom.seo_alt_text metafield for SEO. That way the images remain visible to customers, and the descriptive alt text helps the images index properly in Google.

Many thanks,
Tom

[Shreyh_Solutions]

Hello
The issue was that your theme was using the alt tag both for SEO and for variant-image logic, which conflicts with Google best practices.

I’ve adjusted the code so that:

• The alt attribute now pulls from your custom metafield seo_alt_text, e.g. “Navy Mottled Hand-Burnished Belt Strap by Elliot Rhode”, ensuring proper SEO visibility.

• The variant color matching logic now uses a separate data-color attribute, so the theme continues working without breaking the image switcher.

Here’s the updated snippet:

<img 
  src="{{ preview_image | img_url: '400x' }}" 
  alt="{{ product.selected_or_first_available_variant.metafields.custom.seo_alt_text | escape }}" 
  data-color="{{ product.selected_or_first_available_variant.option1 | escape }}">

This way, you get correct SEO alt tags for Google, and your product images still display/swap by color as before.

[Tom_Kingham]

Hi Shreyh_Solutions,

Thanks again for the update. I’ve added the snippet to main.product.liquid for the MOTTLED BITTER CHOC BELT as suggested. However, I’m unable to test it fully at the moment because the product image is now missing. This is likely because the alt attribute is now pulling from seo_alt_text rather than just the color.

I’ve attached three images for reference:

1. Where I updated the code in main.product.liquid.

2. Where I used the new ALT text within the Shopify product.

3. The product page showing the image now hidden, which happened after updating the ALT text from “Brown” (the color) to the new SEO friendly ALT text.

Could you please advise on the best way to ensure these product images display correctly (without hiding), taking into account Shopify’s variant image configuration, while also making sure Google picks up the new ALT text?

Here’s the new preview link for reference:
https://fjw3seopiedyktjn-61037314247.shopifypreview.com/products/mottled-bitter-choc-belt

Many thanks,
Tom

[Tom_Kingham]

To add to this Shreyh_Solutions, I’ve also tested this alternative solution which you may be referencing. I updated the variant metafield I created under the Navy Mottled belt. Please see the attached images:

• Image 1 shows the image displaying because the ALT text is “navy,” but the variant metafield SEO alt text is longer, as seen in the picture.

• The preview link still shows the image because it has the ALT text, and if you inspect the element, the ALT text is “navy.”

However, I want to ensure Google picks up the SEO alt text from the metafield rather than the short ALT text, whilst also making sure the image pulls through. Like it does in the example but not the one above. Could you advise on how to implement this so that the SEO alt text is recognised by Google?

Many thanks,

Tom

[Shreyh_Solutions]

Hii
yes i help you Can you share the store access i will check

[Tom_Kingham]

Are you able to help guide me with the solution?

Many thanks,

Tom

[Shreyh_Solutions]

<img
  src="{{ preview_image | img_url: '400x' }}"
  alt="{{ product.selected_or_first_available_variant.option1 | escape }}" 
  data-seo-alt="{{ product.selected_or_first_available_variant.metafields.custom.seo_alt_text | escape }}">

document.addEventListener(“DOMContentLoaded”, function() {document.querySelectorAll(‘img[data-seo-alt]’).forEach(img => {let seoAlt = img.getAttribute(‘data-seo-alt’);if (seoAlt && seoAlt.trim() !== “”) {img.setAttribute(‘alt’, seoAlt);}});});

try this code and I can help you but I need to check the code in your theme and for that I need access to the store

[Tom_Kingham]

Please see image, this still doesn’t work. Please confirm who you are and also what solution is this solving? Updating it from the ALT text or the seo.alt.text?