How do I find the banner size in pixels for Impulse Template version 2.5.3

Solved

How do I find the banner size in pixels for Impulse Template version 2.5.3

mfenberg
Visitor
3 0 0

I am using an older version of the Impulse theme (version 2.5.3). I need to tell the graphic designer the  banner dimensions which can be used in pixels. I'm not sure on how to find this information. What is the pixel size for mobile vs desktop?  I told him initially to use the following: 

Shopify banner image dimensions should be 1200-2500 pixels in width and 400-600 pixels in height. The height of the banner will determine how much screen it covers. Banner with 600 pixels height will take up pretty much all of the above-the-fold space the website visitors see upon entering.

I'm not sure if that will work on older Shopify template versions prior to version 2.0? 

Accepted Solution (1)
Starshards
Shopify Partner
45 2 14

This is an accepted solution.

Can you provide a link to your website? If not, you can always inspect the code using Chrome or Safari, If on Mac, Command+Shift+C and click on the image, it'll give you some information and on the side, you'll have the HTML and CSS code.

View solution in original post

Replies 4 (4)

Starshards
Shopify Partner
45 2 14

The impulse theme has 3 styles, which one are you using?

I'm assuming by banner you mean hero on the homepage? If that's the case, the ratio of the image doesn't really matter, what matters most is the focal point. The default theme uses images that are 1900x2569 but that doesn't matter because the rendered image depends on the screen resolution of the user. The theme accordingly loads the best ratio of the image. Ideally, you'd want 3:2 or 1:1 ratio for mobile and a 16:9 for desktop.

mfenberg
Visitor
3 0 0
I believe I am using the Modern. The template version is very old 2.5.3
Starshards
Shopify Partner
45 2 14

This is an accepted solution.

Can you provide a link to your website? If not, you can always inspect the code using Chrome or Safari, If on Mac, Command+Shift+C and click on the image, it'll give you some information and on the side, you'll have the HTML and CSS code.

mfenberg
Visitor
3 0 0

Thanks very much! Will follow your instructions.