How can I make product images sticky in the Rubix theme?

Store Design
1

Hi,

I really need some assistance with making product images sticky on the Rubix theme. I’ve tried a multitude of codes and I’m starting to wander if the theme just isn’t able to do this.

This is the code I’m trying (I have very limited coding experience) however the code just seems to break my website.

@include media-query($medium-up) {
.proBoxImage.col-xs-12.col-md-6.mb30 {
position: -webkit-sticky;
position: sticky;
top: 100px;
}
}

Link to a product page: https://infinitihome.co.uk/products/shoe-storage-bench-and-basket-set-halifax

I’d really appreciate any help anyone is able to give me.

Thank you.

Screen Shot 2021-09-08 at 13.24.03.png
Screen Shot 2021-09-08 at 13.24.03.png1440×662 196 KB

Screen Shot 2021-09-08 at 13.20.18.png
Screen Shot 2021-09-08 at 13.20.18.png1439×717 219 KB

2

Hi @AdamStokes2021
You can try follow this path:
Themes => edit code => asset => vela-site.scss.liquid
and add this code to bottom of the file vela-site.scss.liquid

body, #pageContent{
	overflow: visible;
}

.proBoxImage {
	position: sticky;
	top: 55px;
	z-index: 8;
}
1 Like
3

This works! Thank you very much! I had to add:

@media all and (min-width: 968px) {
body, #pageContent {
overflow: visible;
}
}
.proBoxImage {
position: sticky;
top: 55px;
z-index: 8;
}

So that it didn’t stick on anything other than laptops.