Table of Contents
- Item 1
Table of Contents
8
min read
The choice of a Shopify banner size depends on your specific website slider's features.
What is it? An online store slider is a website block designed for compact content placement. It briefly introduces your website's central concept through design, composition, and branding elements. Also, a slider usually includes a specific call to action (CTA) button.
But here, we will focus on optimizing the size of your custom banner for Shopify and the core composition rules for such blocks.
So, if that's what you want to improve on your store page, keep reading this article – explore valuable insights and pro tips from our team!
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:
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 sizes, i.e.:
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.
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:
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.
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 the 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.
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:
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
Slider format
Best placement of the object on the banner
Best text placement
Image optimization
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!
.jpg)
Elena, part of MakeBeCool since 2021, brings 4 years of e-commerce and IT project management expertise. A performance-driven professional, she managed multiple site developments for international projects. Outside the tech world, Elena sharpens her skills through reading and courses, enjoying travel, loud music in the car, and cherished moments with family and friends.
View Author's PageOur Shopify Consultant will help you determine the ways of increasing professional growth
%20copy.webp)
