Customize product page content display (desktop screens)

How to increase the product description width?

If you don't have a store focused on large images but on lots of content for the product page, you might want to increase the width of the product's description text area on desktop screens, while decreasing the width of the gallery.

For this purpose, please add the following CSS snippet at the end of the theme's main stylesheet file -  assets/theme.css (or assets/theme.scss.liquid file in older theme versions):

@media all and (min-width: 1025px) {
 .template-product .product__text {
    width: 50% !important;
    max-width: unset !important;
 }
.template-product .product-gallery.flickity-enabled:not(.product-gallery--fill) .product-gallery__item img {
    width: 50% !important;
 }
}

If needed, you can edit the values in the code.

How to swap product description and product gallery position?

Again at the end of the assets/theme.css you can use this CSS code to swap the original product description text and gallery on desktop screens:

@media all and (min-width: 1024px) {
  .product { flex-direction: row-reverse; }
  .product-gallery--scroll ~ .product-gallery__thumbnails.product-gallery__thumbnails--thumbnails {
    position: sticky !important;
  }
}

If you are using these custom CSS codes, please select the "Slider" product gallery option for the navigation to display correctly - screenshot.