Choose Your Shopify Banner Image Size in Pixels

By Milan Dhameliya · · 8 min read

Choose Shopify banner dimensions from your theme's image area. Calculate mobile cropping, understand Dawn's second image, and check resolution before exporting again.

For a shallow Shopify banner, 1200 × 400 pixels is a useful starting size; your theme's displayed image area determines the right dimensions for a taller hero or a mobile version. Choose the section's shape first, then supply enough resolution for that shape: uploading a larger copy of the same artwork will not fix a cropped-off product.

Shopify's image-size guide lists that 3:1 banner example, but it is not a universal theme requirement. If you are preparing a campaign, the useful deliverable is a desktop composition and a verified phone composition, with clear instructions about where each belongs. Here is how I would specify those assets before sending a designer back for another export.

Choose dimensions from the space your banner must fill

Start with the image area, excluding any heading or button displayed below it. Record its width and height at your intended desktop and phone sizes. A developer can measure the area in browser inspection tools; a merchandiser can start by comparing the section's desktop and mobile previews.

These are worked sizing examples, not Shopify limits or promises that a particular theme has those settings:

The 2× examples are planning targets, not instructions to send every visitor the largest file. Device pixel ratio describes the relationship between physical display pixels and CSS pixels. Screens differ, and your theme's responsive image delivery should choose an appropriate rendition.

Give the designer the ratio, intended display size, subject placement, and text position together. “Make it 2000 pixels wide” leaves the most important questions unanswered. For example, a campaign featuring three products spread across the frame needs a different mobile composition from a photograph of one centered bottle.

The crop calculation that prevents repeated exports

Consider an illustrative 1800 × 600 photograph placed in a 390 × 500 mobile image area. Assume the theme fills the area while preserving the photograph's proportions, equivalent to CSS object-fit: cover. MDN documents this behavior: the image fills the box and excess content is clipped.

The image must reach 500 pixels tall. Its width at that scale becomes 1500 pixels, but the visible window is only 390 pixels wide. The visible fraction is 390 / 1500 = 0.26, or 26% of the photograph's width. This is geometry for this example, not a measured statistic about Shopify stores.

With a centered crop, that window corresponds to the middle 468 pixels of the original 1800-pixel-wide source. A subject spanning more than that width cannot fit intact just by moving the crop. Doubling the source dimensions leaves the visible percentage unchanged.

Use this result to make a design decision. Reduce the mobile section's height if a shallow banner suits the page. Recompose the photograph vertically if the campaign needs a tall hero. Keep the current artwork if its important subject already fits inside the visible region. Do not keep increasing the export width while expecting the missing edges to return.

Set up the section before approving the artwork

For a conventional editable theme, go to Online Store > Themes > the theme's actions menu > Duplicate, then work on that copy. Shopify documents this duplication workflow. Name the draft clearly, such as “Autumn banner review,” so the person approving artwork knows which version to inspect.

Open the draft's theme editor, select the intended page template, and select its banner or hero section. Shopify's theme customization guide explains the editor's sections, blocks, and settings. Labels and available controls vary by theme; record your theme name and version with the artwork brief.

Height and focal point solve different problems

Shopify's theme-image documentation explains that some sections offer Adapt to first image, allowing the section's shape to follow the source. It also documents focal points: open the image through Content > Files or the theme editor, position the focal point, and save. Support depends on the theme and version.

Adaptation changes the frame; a focal point chooses what stays inside a crop. In the 3:1 example, following the image ratio at 390 pixels wide produces a 130-pixel-tall image area. Decide whether that leaves enough visual presence for your campaign before accepting it as the solution.

A focal point is shared wherever the same image is used. Before changing one, check other placements using that file. I would use a separate uploaded asset when two placements need incompatible compositions, and give each file a name that identifies its role.

Dawn's second image is not a mobile-image switch

In the Dawn image-banner source reviewed for this guide, image and image_2 create two image elements. The section supports displaying the pair and stacking them on mobile. The second picker does not mean “replace the first image on phones.”

If you put your portrait crop there expecting a device-specific replacement, you can end up with two campaign images in the section. Verify the behavior in your installed version before preparing a second asset. For a genuine mobile replacement, use a section with a documented mobile-image setting or have the section customized.

The same source calculates adaptive sizing from the first image's aspect ratio. Give a two-image design an explicit review of both compositions rather than assuming each image independently sets its ideal frame. This is a Dawn example, not a rule for every Shopify theme.

When a customization is necessary, our theme extension versus Liquid guide helps frame who should own it. Someone maintaining the section can use our Liquid guide for the underlying template concepts. A single campaign does not automatically justify adding a page builder.

Check sharpness separately from composition

A banner can show the right subject and still look soft. Keep the original artwork, the uploaded source, and the browser-selected rendition separate in your investigation. Ask the designer to inspect the original at full size before changing anything in Shopify; an enlarged preview alone is not evidence of a platform problem.

For an image element, the browser's currentSrc property identifies the selected image URL when several responsive candidates exist. Have your developer record that URL and check that the request completed. The property identifies a selection; it does not itself prove a successful download.

A narrow phone can still demand a large landscape rendition

Return to the 3:1 source filling a 390 × 500 area. At a device pixel ratio of 2, reproducing the full scaled photograph without resolution upscaling calls for a 3000 × 1000 rendition, even though most of its width is clipped. A 780 × 260 rendition chosen only from twice the visible width has too little height for that target.

A 390-pixel-wide mobile banner can need a 3000-pixel-wide landscape rendition because the crop is driven by height. This follows from the dimensions above; it is not a recommendation to deliver 3000-pixel images to every phone.

A portrait composition at 780 × 1000 can fill the same example area at 2× without carrying the unused landscape edges. Prepare it from an original with enough detail; resizing the 1800 × 600 example to 3000 × 1000 does not recover missing photographic detail. Ask for composition and delivery behavior together instead of asking one person to compress the image while another keeps enlarging it.

Shopify's image_tag reference documents responsive candidates through widths and display hints through sizes. A developer should check those against the actual layout and cover scaling. A correct uploaded file cannot compensate for an inappropriate rendition selected by the page.

Keep the hero discoverable and the message editable

Shopify's theme performance guidance recommends a picture element for separate desktop and mobile artwork, instead of two images toggled through CSS. It also advises against lazy-loading the image responsible for Largest Contentful Paint. Ask for those checks if the hero appears late; reducing dimensions alone may not address the cause.

I would keep the campaign heading, offer, and button in editable theme blocks. Shopify's image guidance likewise recommends adding slideshow and background text through the editor. Ask the reviewer to change the heading to the longest planned wording and check it on a phone. A layout approved only with a short placeholder heading is not ready for the real campaign.

A banner brief your team can reuse

Before approving the next export, put these details in the task beside the artwork:

I would review at 390 pixels wide and at the team's chosen desktop width, then test a narrower phone and an intermediate width. Those are review choices, not theme settings or universal breakpoints. Check a real phone as well as the editor preview, and include the actual promotional text rather than only the photograph.

Keep a single source when it passes those checks. Skip separate mobile artwork if it adds production work without improving the visible result. Request custom development when the required composition is clear but the existing section cannot express it.

If your team needs that implementation, our Shopify theme customization services can turn the artwork brief into a section with defined desktop and mobile behavior. The deliverable should include instructions your merchandiser can repeat for the next campaign, without guessing a new banner size each time.