Flying Spares, provider of spare parts for vintage cars and high quality marques, displaying a Rolls-Royce from their eCommerce Shopify development from magic42

Flying Spares

International B2B Magento with 240k catalogue, Khaos Control Integration and digital marketing.
See our work
Stone Computers Case Study by magic42

Stone Computers

Adobe Magento Commerce B2C, B2B portal and PunchOut sites and bespoke loan payment solution.
See our work
Alan Paine quality clothing retailer showing their brand, as featured in their case study for their eCommerce website with magic42

Alan Paine

Multisite, B2C migration from Magento to Shopify Plus with ERP integration.
See our work
Haws Watering Cans case study after eCommerce development agency, magic42, migrated their site to Shopify

Haws Watering Cans

B2C eCommerce strategy, UX improvements, AdWords and Klaviyo email marketing management.
See our work
Alan Paine quality clothing retailer showing their brand, as featured in their case study for their eCommerce website with magic42

Alan Paine

Multi-site, B2C migration from Magento to Shopify Plus with ERP integration.
Find out more
Roger Clark Motorsport automative eCommerce client case study from magic42, showing high quality silver cars in a slick garage

Roger Clark Motorsport

B2C and B2B migration of bespoke, global automotive parts website to Shopify.
Find out more

Call Us

Speak to a Shopify expert:

0121 663 6360

Get in touch 
magic42 - eCommerce development experts born from retail success

Born from a retailer

Read the full story of how our award-winning retail business developed into magic42.
Find out more
Envision Workshop documents as an outcome from our replatforming and migration meeting for your eCommerce website

How we'll work with you

Find out what it's like to partner with us and the steps involved for your eCommerce project.
Find out more
Alex Ashman, director of magic42, in a bumper car with a huge grin on his face as he mingles with his eCommerce development team at magic42

Looking to join us?

Take a look at what it's like to work at magic42 and the opportunities we offer.
Find out more

Call Us

Speak to our eCommerce experts:

0121 663 6360

Get in touch 

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

Author: 
Alex Ashman
Published: 
November 25, 2021

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?

  1. What are the main features of the new Dawn theme?
  2. How do you change the size of your main product image in the Dawn theme?
  3. Looking to customize your Shopify website?

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.

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

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.

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.

Before

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

After

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

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

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

Before the changes

After the changes

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.

magic42 is a UK-based eCommerce development agency, born from an award-winning retailer. Having grown with the industry since the year 2000, we provide our unique perspective to help clients get the best from their eCommerce platforms.
Company No. 11572347 VAT No. 310 2436 61
Shopify Partners Logo (as used by Shopify Development Partners)
© Copyright 2024 magic42 Limited - All Rights Reserved
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram