Brooklyn theme: sticky description for product page

Brooklyn's style of stacked product page images may certainly come in handy depending of the product you are selling, but having to scroll all the way up again just to read the description may put off some of the laziest customers.

I'll be teaching you in this tutorial how to make a sticky type of description, so your customers can see the images whilst reading the description.

Locating the file to add the code

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Find Asset > theme.scss.liquid or theme.css or timber.scss or timber.css (the name varies depending on your theme)
3. Paste this code at the bottom of the file:
   

@media (min-width: 767px){
[class*='product-single__meta--']{
position: sticky;
top: 0;
}
}

Kindly keep in mind that if you have large descriptions they may be cut off while the user scrolls down. However, once they reach the end of the last image, the description will be "scrollable" and possible to read thoroughly.

You may also be interested in adding a Swipe Slider feature to your Brooklyn theme to improve its UX.