Shopify header size: Ultimate guide

Images are essential to your Shopify store. The right images will help your store stand out and showcase your catalog perfectly. 

Posted 2 months ago by Jonathan Kennedy

The most important image might be the header image. But what is the best Shopify header size and how do you edit it? 

This ultimate guide will help you demystify the Shopify header by showing you what it is, how it has an impact on your store, and how to edit your header image to optimize responsiveness. 

What is the Shopify header? 

Before we dive into how to optimize your Shopify header, it’s important to establish what the header is. 

A Shopify theme is divided into three main sections: the head, body, and footer. 

• Header: The header takes up the topmost section of the website. The content block usually holds the navigation, the sign-in option, news, shopping carts, and the hero or header image. You can also add your Shopify logo to your store and it will likely show up here. The header is static, which means it doesn’t move. 
• Body: Next, you have the body. As the name suggests, the body holds the body of the content and is sandwiched between the header and the footer of the page.  Unlike the header and the footer, the body is dynamic. 
• Footer: The footer is static like the header and sits at the bottom of the store. The footer usually contains other links, contact information and forms, and social media links. 

As you can see, the header – the first thing a client sees – plays an important role in your store. 

Why is the header size important?

Now that you know what exactly the header is, let’s cover why optimizing your header size for maximum impact is good for your Shopify store. 

First impressions

The header is the first interaction a client has with your store. When they enter your web address, the header, and its associated information load first. It introduces consumers to your brand name, your brand logo, deals, and other relevant details about your store. 

If the header does not look good or isn’t the right size, it sends a message of sloppy work that consumers subconsciously translate into bad products. 

But the opposite is true as well. If the consumer opens your store and sees a beautiful header with great graphics, the right ratio, and catching information, they’ll feel reassured about purchasing your products. 

If you want to send a message of professionalism and quality products or services, make sure the first impression of your store is impressive.  

Mobile responsiveness 

Mobile responsiveness is a must for any online store. Most of the internet’s daily users browse the web from their phones. Search engines have noticed this and made it a compulsory aspect of any online store. Websites and themes that aren’t responsive to all screen sizes have found themselves falling behind. 

If your header cannot adapt to the user’s screen size or causes glitches because it’s too big, you run the risk of losing customers.

Page load speed

Similar to how a header that isn’t responsive can cause glitches on your store, it can also affect the page load speed. If the image does not have the right aspect ratio or is not compressed to optimize, the page can take more than the preferred 1 to 4-second load speed. 

Any longer and you risk losing customers or worse, having abandoned carts because of site load speed frustration. 

SEO improvement

With a faster page load speed, mobile responsive design, and visitors who stay on your website for longer, your SEO will be great. And as we all know, an optimized store does better on rankings. The higher ranked you are, the higher your clicks and the more sales you’ll make. 

What are the Shopify header image dimensions?

The header image dimensions might differ from theme to theme. Some Shopify themes have a small, limited header and others feature a header or hero banner image. The dimensions you choose will depend on the size the theme can handle. 

As a general rule of thumb, the header image dimensions should be in the 16:9 aspect ratio. 

For the header bar, most themes allow a header of 250 pixels but we’d recommend keeping the header no more than 120 pixels. This way you have enough space for the navigation, logo, and other links without it being cumbersome for store visitors. 

For a header image, the aspect ratio should also be 16:9. How much of a hero image you can show again depends on the theme but should not exceed more than 600 pixels in height. The width will be set by the store. 

What does Shopify recommend for image dimensions?

Figuring out the right dimensions for the header can be hard. Luckily, Shopify has released a statement on the recommended dimensions for the header and the dimensions for product images. 

To optimize product images, the image resolution should be around 72 dpi and never more than 20 MB. The image also cannot exceed 4472 x 4472 pixels. 

What is the best size for a Shopify header image?

Before you load your header image, follow these best practices to ensure your store is optimized. 

Check the Shopify theme specifications

First, check the theme specifications. Themes are not all created equal; the Shopify Debut header image size will support different image dimensions than the Shopify classic. 

If your theme can only support a certain pixel width and height, rather stick to it or get a different theme instead of trying to stretch it further. Or, if you have a theme you like but want to make customizations like the header size, you can submit a task for professional design and developer help. 

What is best for mobile responsiveness?

When you choose your theme and the images, make sure they will work with your store when it’s shown on mobile. An image that looks great on a desktop might be zoomed in on a mobile device. 

Always check your images from different devices and make changes accordingly. 

Consider image size

As mentioned earlier, Shopify prefers images under a certain pixel limit and ones of a certain image size. If the image is too big, it could refuse to add the image to your store or refuse to load when users visit your Shopify store. 

To avoid this, compress the images. Download your Shopify images and download free compression software. You can also use an online image compression website for quick and free compressions. 

The software will lower the image size without damaging the picture quality too much. For example, it will take a 60 MB image, compress it, and leave you with a high-quality image that is now 15 MB. You’ll still have high-quality images but with a much faster load speed. 

Original image dimensions

Another best practice is keeping the original image dimension as close to the original as possible. We know this isn’t always possible; sometimes you do need to crop an image. 

But if you are taking professional photos for your header image, let your photographer know. They’ll take the image in landscape mode with a 16:9 ratio, which will preserve the image when you load it to your banner and look much more professional. 

How to add a Shopify header image

Step 1: Log in to Shopify

First, log in to Shopify. This will take you to the Shopify Merchant Dashboard where you can make powerful changes to your store, including changing the Shopify favicon. From here, we’ll show you how to add an image to your header. 

Step 2: Go to the theme customization 

• On the Shopify Merchant Dashboard, go to the left-hand side menu. Scroll down the menu and click on the Online Stores option. 
• Next, go down the list and click on the Themes section. 
• On the new page, you’ll have access to all your downloaded themes, including the theme that is currently published in your store. Go to your published theme and click on the Customize button. 

Step 3: Add the image and customize

• The above steps will take you to the theme editor. Here you can make all sorts of changes to your theme according to its customizability. To make changes to the header, go to the left-hand menu and look for the Header option. It’s usually the first option on the list. Click on it. 
• The header settings will allow you to add and change the logo, the announcement bar, and much more. But for now, look for the option that reads Add Image. This should be different from the Add Logo option. If there is no Add Image option, your theme might not support header images. 
• Next, choose from your internal storage the image you want to add to the header. Make sure it meets the above requirements and helps your store instead of harming it. 
• Use the Image Settings to make adjustments to the image. 
• Click Save when you are satisfied. 

Exit the editor and load your store as a visitor and make sure it works on both desktops and mobile devices. 

How to edit the Shopify header to fit your brand better

Next, we’ll show you how to make customize your header to fit your brand. 

Step 1: Log in to Shopify

Log in to Shopify with your unique login details. 

Step 2: Go to theme Customise

• On the Shopify Merchant Dashboard, scroll down the menu, and click on the Online Stores option. 
• Next, click on the Themes section. 
• On the new page, go to your published theme and click on the Customize button.

Step 3: Add an announcement bar

• You will now have access to your theme editor. Go to the left-hand side menu and click on the Header option. 
• To change the announcement bar, scroll down and enable the Show Announcement option. Choose whether you want this on the home page only. 
• Add your announcement to the text field and add a link if you have one. 

Step 4: Add your logo

• At the top of the section, click on Select Image under the Logo Image option. Choose the image you want to add as your logo. 
• Change the logo size with the toggle and choose the pixel width. 
• Choose what the logo alignment should be. 
• Click Save when you are done. 

Step 5: Edit the header main menu

• Go to the main menu section on the header section. Click on Edit Menu. 
• Choose the menu title. 
• Next, choose the menu items you want available on your header. 
• Click Save Menu when you are done. 

Conclusion

The Shopify header and the header image are extremely important to your store’s health and growth. Not only does it look good, but the right header image and header image size can be the difference between ranking first on search engines or on page 10.

With this ultimate guide, you’ll be able to add your header image and edit the header to perfection. And you’ll be able to do so while optimizing the image for SEO.