CODEWITHSUNDEEP
htmlshopifyalt
Daniil P.
Daniil P.

Reputation: 5

What would be the correct syntax to add the 'alt' attribute in Shopify?

I am trying to add alt text to my images, however, I am a bit confused because of syntax. Basically, every website says to do 

img src=logo.png alt="Something.com | The best something ever"

However, because I was building on Shopify, my code looks like this:

img src="{{ '3Y9C5514.jpg' | asset_url }}"

I'm a noob so the brackets and the "| asset_url" are confusing me. Where should I be including the alt="my alt text"?

Upvotes: 0

Views: 487

Answers (2)

William
William

Reputation: 1

To add an alt to your image element in 2025, use the liquid filter image_tag: alt: "your alt"

So like this:

{{ settings.logo | image_url: width: 150 | image_tag: alt: "logo alt" }}

In this case there's no need to add:

<img src="{{ settings.logo | image_url: width: 150| image_tag: alt: "logo alt"}}"/>

As this will create 2 image elements and break your output:

<img src="<img src=" domain.com="" cdn="" shop="" files="" logo.png?crop="center&amp;height=55&amp;v=1740152459&amp;width=150&quot;" alt="logo alt" srcset="//domain.com/cdn/shop/files/logo.png?crop=center&amp;height=55&amp;v=1740152459&amp;width=150 100w" width="150" height="55">

Upvotes: 0

Subhrajyoti Das
Subhrajyoti Das

Reputation: 2710

Following is the way you put your alt text with image URL.

<img src="{{ '3Y9C5514.jpg' | asset_url }}" alt="Alt text goes here"/>

"|asset_url" returns the URL of a file in the "assets" folder of a theme. So, if your image file is present in the folder it will fetch the image url.

#Input
{{ '3Y9C5514.jpg' | asset_url }}

#Output
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/3Y9C5514.jpg?28253

However, if you are inserting an image my suggestion would be to use - "| asset_img_url". This will return the asset URL of an image in the "assets" folder of a theme. asset_img_url accepts an image size parameter.

#Input
{{ 'logo.png' | asset_img_url: '300x' }}

#Output
//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_300x.png?42

Source: URL Filters

Upvotes: 0

Related Questions