Venture Theme - Make Product Images Sticky

Store Design
1

Hi!

Please can someone assist me.

I’ve seen some other posts regarding this issue but the code hasn’t worked well on my site.

I use the Venture theme and would like to make the product images sticky (see screenshot below).

https://electricrideco.com/products/eunorau-g20-cargo-48v-500w-mid-motor-dual-battery-cargo-electric-bike

Thanks in advance!

Screen Shot 2022-03-19 at 2.07.47 PM.png
Screen Shot 2022-03-19 at 2.07.47 PM.png691×633 82.4 KB

2

Try adding this code to the bottom of your stylesheet. It uses position: sticky, so may not work on old browsers, but should not do harm.

.product-single {
    display: flex;
    flex-wrap: wrap;
}

.product-single .photos {
    position: sticky;
    top: 70px;
    margin-bottom: 25px;
}

.template-product .page-container {
    overflow: initial;
}
1 Like
3

@tim_1

Hi Tim,

Thanks again for your help!

Your solution is almost perfect but there is a gray bar that has been added which I would like to remove (see screenshot below).

https://electricrideco.com/products/eunorau-g20-cargo-48v-500w-mid-motor-dual-battery-cargo-electric-bike

Thanks!

Screen Shot 2022-03-20 at 12.44.35 PM.png
Screen Shot 2022-03-20 at 12.44.35 PM.png1280×671 183 KB

4

Ok, let’s try to change the code slightly:

@media (min-width: 750px) {
    .product-single {
        display: flex;
        flex-wrap: wrap;
    }
    .product-single .photos {
        position: sticky;
        top: 70px;
        margin-bottom: 50px;
    }
    .template-product .page-container {
        overflow: initial;
    }
    .template-product #MainContent {
        margin-top: 0;
        padding-top: 60px;
    }
}
1 Like
5

@tim_1 Perfect! Thanks so much! Very happy with this design change.