Code of using product title as image alt text

[hawkridgefc]

I have about 1k products, but product images do not have alt texts. I read that there might be a code that can assign product titles to be alt texts, such as this one, "<div class="image_alt_text"> {{product.title}} - {{media.alt}} </div>". I tried to add it to a few spots but it didn't work.

Can any one help to show me how to automatically assign product title to be the alt text for product images automatically? Thank you.

[Dan-From-Ryviu]

Hi @hawkridgefc 

What's theme you are using? 

[hawkridgefc]

Dawn 15.2.0

[Dan-From-Ryviu]

Go to your store admin > Sale channels > Online Store > Themes > Edit code > open product-thumbnail.liquid file, file those lines of code around line 80 to 90. 

    <div class="product__media media media--transparent">
      {{
        media.preview_image
        | image_url: width: 1946
        | image_tag:
          class: image_class,
          loading: lazy,
          sizes: sizes,
          widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
      }}
    </div>

Replace it with those codes

    <div class="product__media media media--transparent">
      {%- assign img_alt = product.title -%}
      {{
        media.preview_image
        | image_url: width: 1946
        | image_tag:
          class: image_class,
          loading: lazy,
          alt: img_alt,
          sizes: sizes,
          widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
      }}
    </div>

[hawkridgefc]

I followed the instructions but the alt text didn't show up (It's still blank). Here is what I did:

[Dan-From-Ryviu]

Could you share your store link so I can check?

[hawkridgefc]

[Dan-From-Ryviu]

This code will apply alt tag to image on frontend, not backend. 

[hawkridgefc · Accepted solution]

I inspected the page and saw that the the product title is indeed listed as the alt text. Does it mean it works even if the media setting in Shopify is still blank? Is there another way to see whether it works or not?

[Dan-From-Ryviu]

Yes, it will works even in media settings in Shopify admin is blank

[hawkridgefc]

Fantastic! Thanks so much, and this has saved me at least a few days' time to manually update each product.

I have manually updated some image names to make them similar to the product title. Could you explain what code I can use to assign product titles as image names? Or should I start another post? Thanks a lot. Store URL is https://www.hawkridgefabrics.com/

[Dan-From-Ryviu]

You may need to use the app to edit image names because they belong to the shopify backend source.

[hawkridgefc]

I am quite new to shopify. Can you explain which app to use to edit image names? How about each product page's meta description? Can I use code to assign each product title as the meta description?

[Dan-From-Ryviu]

You can try to find app fit your requires from here 

https://apps.shopify.com/search?q=edit+image+names&show_store_picker=1

[hawkridgefc]

I posted another question but it was repeatedly removed. Hope you can help me with this. I noticed that many of my products' URLs end with random code, and those pages are not indexed by search console. Is there a way for me to remove those random code at the end of the URL like this one? Thank you.

[suyash1]

@hawkridgefc - you need to find code for image of the product, it would be something like <img src="....."> and then change it to 

<img src="....." alt="{{product.title}}">

[hawkridgefc]

I tried main-product.liquid, product-media-gallery.liquid, product-media.liquid, and product-thumbnail.liquid, but I couldn't find "<img src=".....">. Is there another spot that I should look for?

[hawkridgefc]

My theme is Dawn 15.2.0

[suyash1]

@hawkridgefc - check above solution given by @Dan-From-Ryviu , if you can add me as collab then I can do it, you can send collab code on my email below, or you too can do it

[hawkridgefc]

Hello! I posted another question but didn't get any responses. Can you help?
Some of my products' URLs end with random code, and those pages are not indexed by search console. Is there a way for me to remove those random code at the end of the URL like this one? Thank you.