Stuck product image while scroll

Topic summary

A user is experiencing excessive white space on their product page due to lengthy product descriptions, while the product image scrolls normally. They want the product image to remain fixed (sticky) during scrolling until reaching the “You may also like” section.

Proposed Solution:

  • Add CSS code to the theme.css file
  • The code applies position: sticky to the product image container (.product__primary-left)
  • Sets a top offset of 100px and applies only on desktop viewports (min-width: 990px)
  • A screenshot demonstrates the expected result with the image staying fixed while content scrolls

Status: Solution provided but not yet confirmed as implemented or tested by the original poster.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

Hello everyone, I need help with my product page. When I scroll through the page, the description and product details is quite lengthy, which creates a lot of white space. I’ve attached a screenshot for reference. Is it possible to make the product image stay fixed (sticky) until I reach the ‘You may also like’ section? Thanks in advance

Strore URL: https://agaati.com/products/gold-raizes-vera-2021

Hi @Digital_Imran

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

@media (min-width: 990px) {
.product__primary-left {
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
}
}

Result

Best,

Liz