Broadcast theme- sticky product photo

Technical Q&A
,
1

I have been trying to get my photos on this product page to stay sticky while scrolling until it reaches the next section. It seems that broadcast only does sticky form not the other way around and can’t seem to get the custom code edits to work. Anyone have any luck or know how to do this?

page that I am trying to edit. thanks

2

It sounds like you want to make the product images sticky while the user scrolls until they reach the next section. This should be achievable with some custom CSS and JavaScript.

Here’s a basic solution you can try:

  1. CSS: Use position: sticky with a top value to make the images stick as you scroll. Here’s a sample:

    .product-image {
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* Adjust to where you want the image to start sticking */
}

JavaScript: If you need the images to stop being sticky once the next section reaches, you can use JavaScript to detect the scroll position and adjust the sticky behavior. Something like this:

const stickyElement = document.querySelector(‘.product-image’);
const nextSection = document.querySelector(‘.next-section’); // Replace with your next section class

window.addEventListener(‘scroll’, () => {
const nextSectionTop = nextSection.getBoundingClientRect().top;
if (nextSectionTop <= window.innerHeight) {
stickyElement.style.position = ‘absolute’;
stickyElement.style.top = ${nextSectionTop - stickyElement.offsetHeight}px;
} else {
stickyElement.style.position = ‘sticky’;
}
});

1 Like
3

Hi @user367,

Please go to Customize > Theme settings > Custom CSS and add code:

@media only screen and (min-width: 750px) {
    .product__page {
        align-items: start;
    }
.product__images {
    position: sticky;
    top: 121px;
}
}

If I helped you, then a Like would be truly appreciated.

1 Like
4

thank you. This worked perfectly and so simple. Appreciate everyone’s help!

5

Hi @user367,

It’s my pleasure :blush:

6

another question. I have your code impletemented and it works for my bundle templates. But my single product template. it does not. Any thoughts?

7

Hi @user367,

I checked and the Custom Code section included root CSS declarations and caused this.

Can you send me the code of the section? I will check and guide you