Services

What is the Perfect Shopify Banner Size for Homepage Slideshow?

What is the Perfect Shopify Banner Size for Homepage Slideshow?

Blog
author Maksim Tourou

Shopify Expert, UX/UI Designer, Logo Design

time

8 min

Choosing the best size banner for Shopify depends on the features of the slider on your website. Read below for more information.

The slider in the online store is a block that performs the function of compact content placement. It illustrates the main concept of the site through dynamics, composition, and design, and also encourages the client to perform the target action.

But this article is not about dynamics or design; we will share our expertise on choosing the optimal banner size as well as the rules for placing a composition.

How to choose the perfect sizing for Shopify banner: our step-by-step guide.

AB INITIO: determine your Shopify header image size

This part contains the essential information that your client is looking for on your homepage. What Shopify header size should you choose and what information should it contain? The maximum height of the header block in Shopify themes is 250 pixels. But we recommend using a height of no more than 120 pixels.

The buttons to be placed in the block are the following:

  • logo;
  • catalog sections;
  • personal account of the buyer;
  • search by store goods;
  • cart;
  • contacts.

Determine your Shopify slideshow image size.

First of all, you need to determine what format of the Shopify slider is suitable for your online store. In the settings of the Shopify theme, you can choose either full-screen or fixed height. Each of these formats is designed for a specific purpose.

We have already mentioned in our previous article named 12 Tips to Creating the Perfect Landing Page in Shopify that you are selling not a product, but a value that becomes a part of your buyer’s life. Therefore, if you sell furniture, show your client its advantages and how it fits into his interior. And maybe even into different interiors, that would prove its versatility. Using a wide banner would be the best solution for this product.

If you want to make an advertisement using abstract visual maintenance or using several thematic items, then there is no need to take all the available screen space. It is enough to make a fixed height with a tolerable limit of 50 up to 75% of the visible height of the screen, responsive to the header.

Realize what problem your banner should solve. Should it advertise a product or even goods? Should it manifest originality or versatility of the product?

Calculate your Shopify banner image size

After you have chosen the banner size for Shopify, you also need to select the width of the screen on which it will be placed.

We take into account the size of the devices that are most frequently used by the visitors.

To get what size image for Shopify banner you should focus on, we recommend using gs.statcounter.com.

From the statistics screenshot we have concluded about the four most requested sizesi.e.:

  • 1366✕768
  • 1920✕1080
  • 768✕1024
  • 360✕640

So, by now we have determined the width of the banner. Next, we proceed to the choice of height. If you are using a widescreen banner, we recommend using a suitable height of the screen. If the height of the banner is fixed, then you should choose between 50 and 75% of the screen’s height, taking into account the height of the header. This means that for a screen width of 1366, the height of the banner will be within 384 - 476 pixels.

Place in your banner just high-quality images with support for retina 2✕ screens.

Retina Display is a patented trademark used by HiDPI for high-resolution displays, which they successfully used in their latest devices: iPad, iPhone, and MacBook Pro. Due to this technology, the displays have a much higher pixel density than the previous devices (approximately 300 DPI). And due to this, the screen displays more explicit images and smoother fonts.

Source: https://hostenko.com/wpcafe/tutorials/wordpress-themes-retina-display-ready/

Customize your Shopify banner size to the most popular screen sizes, including retina.

READ ALSO

8 Best Shopify eCommerce Themes for 2018

8 Best Shopify eCommerce Themes for 2018

— by Artur Shevchenko

Fill the space

Due to the variability of the screen width, you should control the banner space, or rather the location of the elements in this format.

There are several ways to solve this problem:

  • place the information on the picture using a graphical editor (for example Photoshop)
  • solve the problem using the front-end.

The version with the graphics editor is the easiest and fastest, but do not forget about the screen sizes. For mobile devices, the type of banner can be completely different than for a computer. Determine the most critical information that your customer should see and compactly place it in the mobile version.

In our practice, there were some cases when it was impossible to find the best Shopify banner size for each screen size. Because this option directly depends on the chosen theme. We solved this problem by placing the information in the center of the banner. We chose the size of 360x640 pixels for a mobile version.

When speaking about the ease of reading information, the top option is to share background images and content text, which can easily be changed in the admin panel. In this case, the text can be flexibly adapted to common screen sizes.

Make flexible banners with the help of front-end. If it is impossible to write code, center the information and check out its readability at the minimal size.

Optimize your images

The page loading speed is a decisive factor that influences the decision of the buyer to stay on your site or leave it. One of the ways of improving site loading is to compress the size of images. To speed up the website we use this service tinypng.com. It can compress png and jpg image formats. Sometimes the compression ratio can reach up to 80%. Just imagine what possibilities in loading speed this method can offer.

Conclusions

A banner is the first thing that a customer sees on the page of your online store. It is designed to produce a “wow effect” for your clients. The primary goal of this element is to interest them in the first 1.5 seconds of viewing the page.

To achieve this goal you need to study the psychology of your target audience, its interests and the logic of the purchase. Even before deciding where to place the banner, conduct a UX-analytics (user experience) of the interface of your online store. The obtained data will help determine what information your client is looking for on your site, where he clicks, whether he focuses on the main page and for how long he stays on it?

Read more about the importance of UX analytics for eCommerce business in our story.

To have wow-effect not distracted from the wrong placement of the banner, follow the following tips:

  • make sure that it corresponds to the main concept of the site;
  • choose the format you need;
  • set it for all screen sizes on which your customers view it;
  • optimize its size for fast loading.

Below we listed all the trend sizes of devices and banner formats that we had explained. Keep this cheat sheet not to forget this info.

What size should banner be on Shopify website

  • 1366✕768
  • 1920✕1080
  • 1024✕768
  • 360✕640

Slider format

  • widescreen
  • fixed height

Best placement of the object on the banner

  • centered
  • on the right

Best text placement

  • on the pictures
  • separately

Image optimization

  • tinypng compression is the most optimal file size for download speed

To determine the ideal size for a Shopify slideshow follow both your business concept and technical theme features. Take a responsible approach to the design of this very item. 70% of your sales depend on what design and Shopify slideshow size you choose.

Convert the design into sales and do not forget to test everything!  

Share with us your idea

Our Shopify Consultant will help you determine the ways of increasing professional growth

CONTACT US

Join us

to receive weekly eCommerce tips, news, researches and methods of increasing business and professional growth.

No more than 5 letters per month.
We appreciate your time!

Related articles

12 Tips to Creating the Perfect Landing Page in Shopify

12 Tips to Creating the Perfect Landing Page in Shopify

— by Maksim Tourou
What is the Perfect Shopify Banner Size for Homepage Slideshow?

What is the Perfect Shopify Banner Size for Homepage Slideshow?

— by Maksim Tourou

We know how to develop ecommerce projects

Thank you!
Your request is sent