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

coffeebros
Visitor
2 0 1

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?

 

coffeebros_0-1677114152057.png

 

Any help would be appreciated!

 

Thanks

 

Replies 4 (4)

Mike-Omega
Shopify Partner
157 27 30

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

If it’s helpful to you, please give it a like or mark as a solution.
Need any help for Shopify Design or Custom task, please contact via email: locdt@omegatheme.com
Consentik GDPR Cookie Banner: Effortlessly stay compliant with EU GDPR, CCPA

flareAI
Shopify Partner
2405 223 535

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

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing
coffeebros
Visitor
2 0 1

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
Shopify Expert
718 76 112

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here