How To Change Image Size In Shopify

As part of the Shopify two.0 launch earlier in the twelvemonth, Shopify launched their new base of operations theme called "Dawn".

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

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

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

In this article, we will evidence yous how y'all can quickly change the size of your principal product images in the Shopify Dawn theme.

What are the chief features of the new Dawn theme?

What are the chief features of the new Dawn theme?
How do y'all change the size of your main production image in the Dawn theme?
Looking to customize your Shopify website?

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

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

Some of the main features of the Dawn theme include:

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

Whilst the new features are great, we are asked a lot by our clients on how they can modify their production folio image sizes.

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

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

How do you alter the size of your chief 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 lot tin can admission the theme code.

Search "department-chief-product" in the file search bar and then click on the "Avails" folder to open up the file.

Once you accept the file open, go to line 41 to find the "@media screen" section. If information technology'south 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 so want to reduce the percentages in this section in social club to reduce your product image size to allow more room for the product information. In the below instance we take reduced it from 64% to 50% to split the epitome 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);

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

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

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

Before the changes

Yous can gear up your width to whichever percentage you wish to take your images. And that'due south information technology! We would always recommend yous cheque mobile and tablet too and not just laptop and desktop viewports to ensure all your changes piece of work every bit intended.

3. Looking for Shopify Back up?

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