Collection image dimensions

Joshua_Malave
New Member
10 0 0

Does anyone know the exact sizes for the collection image? I want to make a perfect fitting image on canva.com 

0 Likes
Maris
Shopify Partner
305 5 58

Hi, Joshua!

If you are open to an app suggestion, then this one will export the Image Width and Image Height fields for images of Collections and Products.

https://apps.shopify.com/excel-export-import

Maris

Excelify.io | Bulk Import Export Update Migrate | https://excelify.io
0 Likes
Joshua_Malave
New Member
10 0 0

I don't understand... You sent me an excel related app. I really want to know the collection page dimensions so I can make my own backrounds for my collection pages on canva.com

0 Likes
Maris
Shopify Partner
305 5 58

Sorry, I maybe misunderstood what you are looking for.

I thought you can export your Collection to Excel and look into the Image Width/Height columns for the collection images. That way you could find out image dimensions of an existing collection image and will be able to fit that image into the size of your "perfect fitting image".

But I realize that if you don't have ANY image yet for the collection, then you don't need existing image dimensions, you need the dimensions that are required in that place, in that theme.

I guess this question is best asked then the author of that theme.

Maris

Excelify.io | Bulk Import Export Update Migrate | https://excelify.io
0 Likes
Roy23
Tourist
9 0 3

That is a pitiful response.  

0 Likes
PaulNewton
Shopify Partner
2576 134 438

@Roy23 wrote:

That is a pitiful response.  


It was a legitimate response even if you dont understand the context of the TWO answers to a loosely formed question about trying to get such data out of shopify to then be put into another system and that was BEFORE width and height were added to image objects in liquid for use in templates.

 

If you need the size of an image on a website: on desktop try right clicking in chrome browser and opening the image in a new tab the dimensions will be part of the tab name.

If you need the size of an image in the context of it's display on a website: on desktop using chrome browser press F12 to open developer tools, then ctrl+c to active inspector selector to examine the layout of the page and figure out your sizes. Though note without and understanding of CSS your display sizes will affect numbers given.

 

If you need to get the size of an image in liquid height and width are now available on image objects

For example in a collection template try, then navigate to a store collection you've added an image to via the admin :

 

{{ collection.image.width }}

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
BrianElton
New Member
1 0 0

Did you actually get a usable response to your question?

All information points to it being square bigger than 2mb and smaller than 20mg.

 

Cheers

0 Likes
UPLONE
Shopify Partner
8 0 7

It will differ slightly by theme, but for example, in Avenue theme with the collection image set to 50% height, the ratio of 1366x260 works well on a popular screen resolution of 1366×768.

Make sure to check image responsiveness then on mobile, at least, so all the desirable objects in the image stay on screen as the resolution changes. The center mostly remains center.

No matter what, you can always use the ruler in Firefox to measure the dimensions on the screen you are targeting and then make the image to that size in Photoshop.

— Was my reply helpful? Click Like to let me know! ✔
— Was your question answered? Mark it as an Accepted Solution! ★

UPLONE | Create Reach
0 Likes