Shapes Theme: Sticky Product Images

Store Design
1

Hi - can anyone help me make the product images sticky for the Shapes theme? I’ve tried all of the simple css customisations on-page I can find - nothing seems to work. Cheers

3

Hi there,

The Shapes theme doesn’t include sticky product images out of the box, but you can add the effect with a small Liquid/CSS adjustment. The general idea is:

  1. Wrap the product image container in a div with a fixed height.

  2. Apply position: sticky; top: 0; to the image wrapper.

  3. Make sure the parent container has enough height so the sticky effect works while the user scrolls through the product details.

For example:

.product__media-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 20px; /* adjust spacing from top */
}

You may also need to adjust the product form’s layout (grid or flex settings) so the sticky image and product info scroll side by side smoothly.

If you’d like, I can help fine-tune this directly in your theme so it works seamlessly across desktop and mobile without breaking the layout.

4

Looked at the themes demo store.
Try this code in the product info Section “Custom CSS” setting (or theme settings=> custom css, if does not work in section settings)

.product-media > div {
  position: sticky;
  top: 0;
}
.overflow-hidden:has(.product-media) {
  overflow:clip;
}

overflow:hidden; on the product media ancestor element prevents sticking, so need to fix that.

Screenshot 2025-09-13 at 12.17.32 PM
Screenshot 2025-09-13 at 12.17.32 PM998×858 121 KB

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
5

Hi @Raised

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

6

Thanks Tim - much appreciated - I’m a bit simple when it comes to this - I’ve added the code to Custom CSS on the product page - what do i need to do re: overflow:hidden; ?

7

Overflow already addressed in the code, should be fine.

It was just a comment to others who would be looking at the code and ask why it it there…

Does it work though?

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
8

No - hasn’t worked sorry

9

Hi @Raised

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

10

Could be your settings do not match demo store ones.
Share (preview) link to your store (and a storefront password if set) to look further.

11

Sorry Tim - not sure how I missed this last reply - this is currently a live URL: The Collagen Bar Mixed Box – Raised

12

Try the code in the “Theme settings”-> “Custom CSS” as I suggested above.

Why: overflow: hidden is also set on main, and adding this code to the Section settings-> “Custom CSS” makes it not apply to the main.

So the code (with slightly amended top value ) should go to the “Theme settings”-> “Custom CSS”:

.product-media > div {
  position: sticky;
  top: var(--header-height, 0);
}
.overflow-hidden:has(.product-media) {
  overflow:clip;
}
13

Mate, works perfectly - thank you very kindly. I actually have a few little tweaks like this piling up - any chance we could have a chat about getting your help on a couple of other things?