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 both these custom CSS codes, please also use the "Scroll" gallery slider - screenshot. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.