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

[Dek]

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.

[Ratchet_Nerd]

I’m probably super late but I have the answer you guys!

Personally, I wanted to create a banner using a logo (made transparent). I set the entire image size to 2000 x 800 px but made the logo take up only a small area of the banner in the center (about 500 x 500 px).

When I added the image to square, I customized the banner size to be “small” to ensure it shows up correctly for both desktop and mobile version (but you may have to play around with it to determine which size fits best for your situation).

I hope this helps!

Follow me on IG if you appreciate my input: @RatchetNerdGroup

[nancy67]

This is the best answer on here..  

[lotusflowerom]

Hey @Ratchet_Nerd Thanks for the suggestion.  Mind sharing your website so I can take a peek.

[tilorfire27]

I am still having this issue.

Here you can see the image as shown in the Desktop preview:

"Desktop" Preview

And then when I switch to the Mobile preview:

"Mobile" Preview

Is there any way to fix this?

[PM1973]

• Large rectangle (336 x 280 pixels)

• Medium rectangle (300 x 250 pixels)

• Leaderboard (728 x 90 pixels)

• Half-page (300 x 600 pixels)

Information provided by the following website link:

https://blog.avada.io/resources/effective-website-banner-size.html

[PM1973]

For Mobile devices from the same link:  https://blog.avada.io/resources/effective-website-banner-size.html

• Mobile Leaderboard (320 × 50 pixels)

• Mobile Full Page (320 × 320 pixels)

• Square (250 × 250 pixels)

• Small Square (200 × 200 pixels)

[tilorfire27]

While these are helpful guidelines, the issue is not the image size itself. The problem is that we get one banner image, and it doesn't re-scale based on platform (Mobile vs Desktop) on the Square website builder as shown in my previous images.

[Kassi_]

Hey @tilorfire27, 

Thanks for reaching out to share your feedback about Square Online store images. If you have a moment, please share your suggestions on our Ideate board. Our Product Team keeps an eye on these, since they are constantly improving our products based on our seller feedback

Please let me know if you have any other questions.

[UncleDusty]

I hide the header section and just use an image gallery with one image. It looks the same on mobile and desktop. Not as many games to make it look nice. Best solution I have found so far.

[caitesajwaj]

Ughhhh thank you for this idea. It's so frustrating that this is the only way, but I'm grateful for your answer! I just wasted so many precious minutes trying to mess around with images.

[olcc]

Thank you so much! That just saved me from more headache! Definitely best answer!

[cccmuseum]

wouldn't a little css coding fix the issue

[olcc]

Edit: Thanks to another member's suggestion, I am just using the main banner feature as my header instead.

Is there a solution to this issue yet? I have spent a ridiculous amount of time trying to figure it out since I've been unable to find a correct answer anywhere on the site and still can't get an image to work properly after trying around 50 different images.

[Juicy]

Has anyone figured this out? Is there a way to have a different image for mobile and PC???? This is very frustrating. 

[RobynR]

Hey @Juicy,

Welcome to the Community.

Checkout this best answer here. Feel free to also share your suggestions in our Ideate Room here: squ.re/ideate - Our Product Team keeps an eye on this forum as they are constantly improving our products based on feedback like this.

Please let me know if there is anything else that I can help you with!

[TFOIN]

I added an image rather than a banner. Feel free to view my website for reference www.TFOIndiana.com 

additional text to avoid the same message posted multiple times within 3,600 seconds lol: Aalslndjieen 

[northwoods361]

I cracked the code! to fill the desktop banner, it is 219x2000 pixels 🙂

[PeckerHead]

For the header I use 1440 by 620 and the image is pretty spot on.

I use Command + Shift + 4 (screen grab option) on my Mac to get the pixel dimensions off my website.  I just insert a filler picture and screen grab the space it fills to find the right size for my images.  

[PeckerHead]

As far as the mobile size goes, all you can do is set the image subject using the (...) menu next to the image you upload.  

What square needs is the option to upload a different photo for mobile viewing.  Hopefully that is coming! 

[gregnikas]

I have the same issue with the banner image, but fixed the computer version by extending the banner image canvas size to 2000 x 620 (the image is 1440 x 534) and making it gray. I combined your 620 dimension with NORTHWOODS361 2000 dimension, and the image now appears in its original size. You can make the canvas extension color anything you want to match your logo/image /graphic. I still have the same issue with the mobile image getting cut off left and right but I can live it. This is obviously a workaround, but I like the effect. But this isn't going to work for GOLDNEYE at The Café at Everybody's or TILORFIRE27 at Meeples Woodworking, because the mobile image still gets cut off. Hers's what my fix looks like, Sweethaven Gallery Store. 

[richbaranow]

1:1 ratio HxW (inches) for the banner works perfect for the mobile and a 3:1 ratio (inches) works perfect for the desktop. There needs to be a way to save both images, I agree with everybody else, very frustrating