What Is Shopify Checkout Banner Size?

The checkout banner might seem like an irrelevant aspect of your Shopify ecommerce website, but it's actually an important factor for a successful online store. A checkout banner is essentially an image that displays at the top of your shop's checkout page. It precedes the order summary, payment methods, and payment information, and it’s like a header for the checkout page.

The Shopify checkout banner size is typically 1200 pixels wide by 400–600 pixels high. This size is optimized for functionality across both desktop computers and mobile devices.

In this article, we'll discuss why having an optimized checkout banner size is important and how to ensure the right size for the one on your Shopify store. We’ll consider image formats, choosing your checkout banner image, as well as how to customize checkout with a banner on your Shopify store.

Why Does Shopify Checkout Banner Size Matter?

Having an appropriate Shopify checkout banner size helps you ensure that your logo, message, or store name is visible to shoppers without taking up too much of their screen space. This improves the overall customer experience, a contributing factor to the customer completing the purchase and to higher conversion rates in general. The size is chosen to avoid stretching or pixelating it, which can make a logo or message look unprofessional.

If your image is too large, it might make it difficult for them to view the order summary or even complete their purchase. If it's too small, then your logo or call-to-action message might be lost amidst all the other details on the page. We also know that image size affects value perception, as evidenced in this report by CXL.

A smooth checkout process can lead to higher engagement rates on post-purchase pages, where you might do upsells and product recommendations.

What Image Format is the Best for Shopify?

Commonly, there are four image formats that you might use for your Shopify checkout banner: JPG, PNG, GIF, and TIFF. In this section, we'll discuss the four commonly used formats for Shopify banners. Keep these features in mind when customizing your checkout functionality in the theme editor.

Smaller images take up less space and load faster. It’s also good to ensure any images in your checkout process have a similar look and feel to your product pages – ensuring a consistent customer experience. 

JPG

JPGs are the most common type of image format used for Shopify banners. They're great because they can be compressed to a small file size without losing much quality, allowing your banner to load quickly and take up less space on the page.

Pros:

- Compress to a small file size.

- Great for photographs and artwork with lots of colors.

- Can be optimized easily.

Cons: 

- Not ideal for logos or images with sharp edges.

Best for: Photographs or artwork with lots of colors.

PNG

PNGs are also a popular format for Shopify banners because they're optimized to take up less space than other image formats. They're great for logos or images with sharp edges that you don't want to distort. PNGs also feature an alpha channel, which allows for transparency when used with a solid background.

Pros: 

• Optimized to take up less space than other image formats.
• Great for logos or images with sharp edges.
• Alpha channel allows for transparency.

Cons: 

• Not ideal for photographs or artwork with lots of colors.

Best for: Logos or images with sharp edges that you don't want to distort.

GIF

GIFs are the best option for animated banners, as they can be optimized to take up less space than video files at a considerably smaller file size. They're also great for small logos or icons with a limited range of colors. 

Pros: 

• Perfect for animated banners. 
• Can be optimized to take up less space than video files at a considerably smaller file size. 

Cons: 

• Limited to a maximum of 256 colors.
• Not ideal for photographs or artwork with lots of colors.
• Slightly more difficult to create – can require 3rd-party software.

Best for: Animated banners, logos, and icons with a limited range of colors.

TIFF

TIFFs are the best format for high-resolution images, such as digital paintings or large photographs. They can be compressed to a relatively small file size but maintain clear image quality. Like PNGs, TIFFs also feature an alpha channel, which allows for transparency when used with a solid background color or background image.

Pros: 

• Perfect for high-resolution images.
• Can be compressed to a relatively small file size but maintain clear image quality. 
• Alpha layer allows for transparency when used with a solid background color.

Cons: 

• Not suitable for logos or icons with a limited range of colors.
• Relatively large file size.

Best for: High-resolution images such as digital paintings or large photographs. 

Choosing Your Checkout Banner Images

Ultimately it's up to you to choose what to display in the checkout banner for your online store. There are, however, a few best practices for choosing the contents of the image. In this section, we'll consider four things to keep in mind when you're creating your banner image and adjusting theme settings.

Keep Them Consistent With Your Brand Image

Your checkout banner is a great opportunity to reinforce your brand message and create a consistent look across your website. Use colors, typography, headings, and imagery that align with the other elements on your site to create an immersive experience for customers.

An important element of color psychology is that it can influence customer decisions. In general, your brand should stick to colors, fonts, and images that evoke the feeling you want customers to have when interacting with your online store. A disjointed design can be distracting and turn off customers, so make sure you're creating a consistent look across all your pages.

This is a good opportunity to ensure you have a clear set of brand guidelines. This is a reference document that outlines all the elements of your brand – from colors to headings, form field styles, typography, and imagery.

Use A/B Testing to Determine the Best Choices

A/B testing is a way to test different designs to see what works better. Also known as split testing, it works by splitting your audience into groups (e.g. group A and group B, but it's not necessarily limited to two). Group A sees one design, and group B sees another. You choose the metric you want to measure (for example, conversion rates), and the winning design is the one whose group has higher conversion rates.

This is an effective, scientific, and yet underused method of determining the optimal design or functionality of a website element. It’s a great way to see what designs and content get the best response from customers. Once a winning design emerges, you can use it as a template for any future checkout banners.

Pay Attention to Their Loading Time

The checkout banner should load quickly, as customers don't want to wait for it. To ensure fast loading times, be sure that the image is optimized for web, meaning it's saved in a format that has been compressed and resized appropriately. If you're using an image editing program like Photoshop or GIMP, make sure you export the image in the correct format and size. Refer to the guidance in the previous section to choose the appropriate image format.

Always Include Alt Text with the Image

Alt text is a way to describe an image in plain text. It has two primary purposes: improving accessibility for visually-impaired people, and SEO.

For the visually-impaired, screen readers and search engines will use the alt text instead of the image. For SEO, search engine algorithms use the alt text to understand what is on the banner and assign a relevance score accordingly.

Alt text should be concise, descriptive, and no more than 125 characters long. It should include keywords related to your brand or product when appropriate. Check out this Shopify Help guide for how to add alt text to theme images from Shopify admin.

How to Change the Shopify Checkout Banner

There are two ways to change the Shopify checkout banner on your online store.

Without Shopify Plus

If your store isn't on Shopify Plus, you can customize your checkout settings using the theme editor:

1. From your Shopify admin, go to Settings > Checkout.
2. In the Style section, click the Customize checkout button to open the Shopify theme editor.
3. In the BANNER section, click Upload image, or select an image that you have already uploaded to your library.
4. Click Save.

Changing Checkout Banner with Shopify Plus

If you are a Shopify Plus merchant, you have access to additional customization by editing the theme's underlying code. This code is a blend of HTML, CSS, and Javascript and it can be a little intimidating. Follow the instructions below carefully and you’ll be fine!

Navigate to your Shopify admin and go to the "Themes" section. From there, select "Edit Code" and open the file called “checkout.liquid” in the drop-down list. In the main content area, you'll find a line of code like this: 

<img src="{{ 'checkout_banner.png' | asset_url }}" alt="">

This is the code that sets the image for the checkout banner. To change it, simply replace 'checkout_banner.png' with the name of your desired image file. Add alt text by inserting it between the quotation marks after “alt”.

Make sure to complete any necessary optimizations such as resizing or compressing the image before uploading it. Click Save and then preview your banner image by visiting your store, adding something to the cart and progressing to checkout.

Customize Your Shopify Checkout Page With Conversion Bear

Optimizing your Shopify checkout banner can help improve user experience, reduce cart abandonment, and increase conversions. In this article, we've covered the basics of Shopify checkout banner optimization, including size and file format guidelines, alt text considerations, and how to change the banner. The banner image is just the start of a range of important changes you can make to your checkout.

If you want to take your Shopify store's checkout page further, consider using Conversion Bear. Conversion bear is a Shopify app that allows you to customize the entire checkout experience with ease. You can also add elements such as trust badges and customer testimonials to increase the likelihood of a successful conversion. Learn more about Conversion Bear here to see how our app can help you optimize your Shopify checkout page.