x

What is the recommended image size for my Square Online Store banner?

The title of this post has been edited from the original: Square Online: Mobile view looks oddly big.

 

When I toggle between Desktop view & Mobile view, the banner images looks big and cropped out or cut off on the mobile. What size banner do we need? Pixel? Help. Thank You.

50,316 Views
Message 1 of 110
Report
1 Best Answer
Square Community Moderator

Best Answer

Hey @Dek and welcome to the Seller Community! The typical image size for the banners is around 2000 pixels by 1000 pixels but can vary depending on the content of the header image itself. 

 

Let me know if those image sizes help at all!

AshleyK
Community Moderator, Square
Sign in and click Mark as Best Answer if my reply answers your question.

View Best Answer >

50,280 Views
Message 2 of 110
Report
109 REPLIES 109

HI, thank you @ashc for tagging me in.  Have you published your site with that image in the banner?  Have you tried any of the other 17 layouts shown (in the red circle)?  From what I see in the screenshot it is displayed as it should be, the red box I included is the edges of the webpage.

 

Screen Shot 2021-03-12 at 4.57.09 PM.png

 

Hope This Helps!
TERRI
5,125 Views
Message 64 of 110
Report

@Goldneye Thank you for responding. The image does appear correct in the first screenshot, which you attached. Our concern is not with the layout, but with the scaling at both maximized window size and lower. The scaling cuts off the image as seen in the second screenshot here.

 

The same settings that produce the first screenshot produced the second. 

5,083 Views
Message 65 of 110
Report

HI, thank you for attaching the second screenshot.  You need to "Set the Image" meaning adjust the placement.

 

Here are the breadcrumbs and screenshot to adjust.

Online Dashboard, Website, Edit Site, Main Banner, click Banner Image, hover over the name of the image, click the 3 dots, popup with Set Image Object click and you will see a blue dot on the image, move the dot to adjust the image placement, Save

 

Screen Shot 2021-03-15 at 4.18.26 PM.png

 

Placement may not be 100% what you want but will adjust.

 

The 17 different layouts offer different versions.  You can click on each to see how the image will look.  It may even have better placement with another layout.

Hope This Helps!
TERRI
4,999 Views
Message 66 of 110
Report

@Goldneye 

 

Thank you for responding. After trying Set Image Subject and a couple different layouts, a 2000x1000 image will be cut off in a maximized window regardless of those settings.

 

Here's a link to our site so you can see: everybodyscafe.square.site

4,926 Views
Message 67 of 110
Report

HI, thank you for sharing the link.  What exactly is being cut off?  I'm on 11" MacBook Air and it loads and looks great.

Hope This Helps!
TERRI
4,599 Views
Message 68 of 110
Report

So how do we stop our banner images from being cropped when viewed on a mobile? 

4,422 Views
Message 69 of 110
Report

HI, can you please share a screenshot? or Link?

Hope This Helps!
TERRI
4,344 Views
Message 70 of 110
Report
Beta Member

Same issue im having there should have been a valid answer by now.

3,094 Views
Message 71 of 110
Report

Hi,

I'm trying to put a banner on my website. What is recommendation for the sizes?

I tried similar size but still blurry when it was uploaded.

4,215 Views
Message 72 of 110
Report
Square Community Moderator

Hi @QL1 👋
Take a look at this thread and try resizing your banner to the size that AshleyK suggests above. Please let me know how you go!

4,644 Views
Message 73 of 110
Report

2000 x 1000 pixels 

3,474 Views
Message 74 of 110
Report
Beta Member

Hi 

The photos I have are sharp but when i upload them to square they seem out of focus and not crisp. Anybody know what to do? what size image is best to use?

 

4,646 Views
Message 75 of 110
Report
Square Community Moderator

Welcome to the Community, @sharp11

 

Checkout this Best Answer by AshleyK on the perfect pixel size for your images. 

 

I went ahead and moved your post to this thread. 

 

If you have any issues, please let me know. 

Kassi
Community Moderator, Square
Sign in and click Mark as Best Answer if my reply answers your question.
4,633 Views
Message 76 of 110
Report
Beta Member

This is a circular reference back to the same thread. Its very disheartening to see that Square again fails to make clear the required photo dimensions for the website sections such as banners, testimonials, etc. This particularly looks bad for Square because you are trying to encompass all of your customer needs into one platform but the real work of making these websites function properly has not been done. This isn't the first time I have seen this with Square. How about you (Square Developers) produce a reference of photo sizes (pixels) that is linked to each Square website template? Is that really so hard to do versus reading all of these frustrated users (including myself) posts over something that is so commonly addressed in the web development market?

4,547 Views
Message 77 of 110
Report

I don't know that the issue is with the actual image size-- the problem, as I'm seeing it in my shop, is that the banner image is not being transitioned to a RESPONSIVE mode as the rest of that page's contents are.  For instance, as uploaded, banner images look perfect on a full-size computer screen in all the templates I tried;  BUT, when viewed on a cell phone screen, in either horizontal or vertical orientation, part of the banner image is cut off to fit the screen rather than automatically resizing responsively.  I gather that this is what others are experiencing??  I agree that it would be VERY NICE to have a solution! 

4,407 Views
Message 78 of 110
Report

This is exactly the problem I am having as well. I design most my sites in Wordpress with Elementor and there is a setting that allows me to select specific image sizes for responsiveness between mobile and desktop. Considering most people use their phones for browsing now I will be sizing for mobile on here but it sure is frustrating not having an option for both. I've spent wayyy to much time trying to resolve this. 

4,034 Views
Message 79 of 110
Report

why does the answer have to be so elusive? Square knows **bleep**well the banner sizing. They should just rite a line that states the best sizes in the same box where you upload your image. Simple.

3,933 Views
Message 80 of 110
Report

The longer the text is on the banner, the larger the image will become. I hope this helps. 

3,682 Views
Message 81 of 110
Report

hi! did this ever get solved? it's 2022 and I am genuinely BEGGING for an optimised image size guide for each theme. Please god! 

3,476 Views
Message 82 of 110
Report

The website builder is a joke. Images should be fully responsive and they could be if the code was correct. The store is useless to us. Will probably continue to use PayPal for online store integration. This is the problem with "templates" you can't edit the code.

3,446 Views
Message 83 of 110
Report

AGH this sucks so much. SQUARE!!! FIX YOUR PLATFORM!! 

3,381 Views
Message 84 of 110
Report