How to change the size of the main product image in Shopify’s Dawn theme

As part of the Shopify 2.0 launch earlier in the year, Shopify launched their new base theme called “Dawn”.

Dawn is the new reference default theme for Shopify, replacing its predecessor, “Debut”.

Dawn was created as a faster, lightweight and easy to edit theme for Shopify website owners.

Whilst Dawn and Debut share similarities in terms of their functionalities, one of the big questions we get asked from our clients is around changing image sizes for product images.

In this article, we will show you how you can quickly change the size of your main product images in the Shopify Dawn theme.

What are the main features of the new Dawn theme?

The Dawn theme launched in June 2021 alongside “Online Store 2.0“.

It was designed to offer significantly more customisation options for website owners and provides a much more lightweight design.

Some of the main features of the Dawn theme include:

  • Media optimised product pages – Product pages load quicker and are focused images to showcase your product.
  • Easier to customise than ever – Sections and blocks let you add, rearrange, and edit the content more easily on a page. 
  • Minimalist design –  The modern design allows your products, assets, and content to shine. 

Whilst the new features are great, we are asked a lot by our clients on how they can change their product page image sizes.

The image appears quite large on the product page which isn’t ideal for some businesses where image detail isn’t as important. The page layout is roughly set to a 60/40 split, 60% of the layout used for the product image and 40% for the product information.

There isn’t an option to allow you to change the ratio of your product page, simply within the Shopify admin. Fortunately, with a little bit of coding, you can edit the column widths to suit your store.

How do you change the size of your main product image in the Dawn theme?

In your Shopify admin go to your “Online Store” > “Themes” > “Actions” > “Edit Code” which will take you to your theme customisation screen where you can access the theme code.

Access Dawn Theme Code

Search “section-main-product” in the file search bar and then click on the “Assets” folder to open the file.

Access Main product section in dawn code

Once you have the file open, go to line 41 to find the “@media screen” section. If it’s not here, select “CTRL+F” or “CMD+F” on macOS and search for “product__media-wrapper” to find the settings for the product image width.

Change product__media-wrapper section

You then want to reduce the percentages in this section in order to reduce your product image size to allow more room for the product information. In the below example we have reduced it from 64% to 50% to split the image and content evenly.


@media screen and (min-width: 990px) {
.product:not(.product–no-media) .product__media-wrapper {
max-width: 64%;
width: calc(64% – 1rem / 2);


@media screen and (min-width: 990px) {
.product:not(.product–no-media) .product__media-wrapper {
max-width: 50%;
width: calc(50% – 1rem / 2);

After changing product image width in dawn theme

Select “Save” to keep your layout changes so they appear on the front end.

Save changes in dawn theme editor

Go to your product page and select refresh to see your layout changes pull through.

Before the changes

Image width in dawn theme before

After the changes

Image width in dawn theme after

You can set your width to whichever percentage you wish to have your images. And that’s it! We would always recommend you check mobile and tablet too and not just laptop and desktop viewports to ensure all your changes work as intended.

3. Looking for Shopify Support?

If you are looking for assistance in finding out more about Shopify as a platform, then please get in touch with one of our Shopify experts.

Get eCommerce insights straight to your inbox each month

See an example of what we send out each month

magic42 serves online retailers throughout the UK, delivering first class Magento Development and also as a Shopify partner – we power retail success. 

Get eCommerce insights to your inbox

Sign up for our monthly newsletter.

Expert Magento Developers

We’ll get your systems talking to each other and Magento & Magento 2 neatly integrated into your wider business. From advice on the best Magento & Magento 2 extensions to migrating your data or bespoke development, we’ll work with you to find the best solution for your unique business.

Powered by Retail Success

magic42 is unique in that it evolved from Mobile Fun, an award winning online retailer with 17 years’ experience, 27 international websites and a global distribution network managed from the heart of Birmingham.