How to Make Product Image Full Width in Dawn theme

December 20, 2023

 I found the below code in shopify forum. But this will make the entire website full width.


@media screen and (min-width: 750px) {

  .page-width {

    max-width: 100% !important;

  }

  .product--small:not(.product--no-media) .product__media-wrapper {

    max-width: 65% !important;

    width: 65% !important;

  }

  .product--small:not(.product--no-media) .product__info-wrapper {

    max-width: 35% !important;

    width: 35% !important;

  }

}

What I need is to set full width image inside the container. If need you the same, you can follow these steps.


1). Login to Shopify store's admin panel and click on Online Store in the left-hand menu.

2). Click on Themes and then click on the Custamize button for the Dawn theme.


Custamize shopify


3). Click on the dropdown menu and click on the Product > Default Product > Click on the product information tab. In the right side of the page, you can see Desktop media width > Select Large


Product information shopify


Also select the following also.

  • Constrain media to screen height.
  • Media fit >  Fill

If you need you can select the Carousel option also.

Desktop layout > Thumbnail Carousel

No comments:

Powered by Blogger.