How to Change the Orientation of Images on the Product Page

I want the images on the product page to be next to the product description, like this.

This is what my product page looks like currently, with the images above the product description.

1 Like

@preqc

thanks for post yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 1025px), (orientation: landscape) {
.product-content .product-gallery {
    width: 100vw;
    margin-left: 0;
}
.product-content .product-details {
max-width: 30.625vw;
    margin: 0px auto;
padding-left: 0;
}
}

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
    .product-template{
    display: flex;
    width: 100%;
    justify-content: space-between;
    zoom: 1;
    max-width: 980px;
    padding: 0 20px;
    margin: 0 auto;
    align-items: flex-start;
    flex-wrap: wrap;
    }
    .product-template__media{
    flex: 0 0 40%;
    }
    .product__content{
    flex: 0 0 60%;
    }
    @media only screen and (max-width:989px) {
    .product__content,
    .product-template__media{
    flex: 0 0 100%;
    }
    }
1 Like

Anyway to make this work with multiple images?

This is what it looks like with more than one picture, I want every image to be next to the product descriptions.