How to set Image and Width for all images on our site

[coffeebros]

It seems like one of the areas causing Lighthouse scores and Google Search Console issues is due to images without a set Height and Width. I have read we should potentially set these to auto but also not quite sure where this needs to be done in the theme.

Most of the issues are occurring on our product pages, and again, not sure where within the theme this should be addressed.

See below for an image of the code within our product theme file. Is this where we should be adding those height and width requirements?

Any help would be appreciated!

Thanks

[Mike-Omega]

Hi @coffeebros ,

This is Mike from Omega

You could try this solution:

1. Open Online Store -> Theme -> Edit code.

2. Open Assets -> base.css, then paste this code to bottom of this file:

img {
  max-width: 100%;
  height: auto;
}

Hope my answer will help you.

Mike from Omega

[flareAI]

Hello @coffeebros ,

I am Gina from flareAI app, and I am here to support you.

To set the height and width for all images on your Shopify store, you can modify the CSS code in your theme. Here are the steps to do so:

1. Log in to your Shopify store and go to Online Store > Themes.
2. Click on the Actions button next to the theme you want to edit, and select Edit code.
3. In the left sidebar, click on Assets and select theme.scss.liquid or styles.scss.liquid, depending on your theme.
4. Scroll down to the bottom of the file and add the following CSS code:

img {
width: 100%;
height: auto;
}

This code sets the width of all images to 100% of their container and automatically adjusts the height to maintain the aspect ratio.
5. Save the changes to the file and check your product pages to ensure that the images are displaying correctly.

If you have a different theme or need more customized changes, you may need to consult your theme documentation.

Gina

[coffeebros]

We don't seem to have theme.scss.liquid or styles.scss.liquid within our theme. Our theme does have a theme.liquid but I am not sure if this is where we should place the code.

[Cedcommerce]

Hello @coffeebros, 

It seems that the screenshot shared here is of the product template file.

You don’t need to make any changes to this file. 

Instead, add the below code in your base.css or theme.css file in the assets folder to resolve the issue. 

img {

   max-width: 100%;

   height: auto;

}

Hope it helps, let us know if you need any further help.

Regards, 

CedCommerce