How to make product photos sticky on Flex theme?

Solved
srdjank
Shopify Partner
9 0 2

Hi everyone,

 

Could someone please take a look at my site and let me know how to make the product photo sticky so that as the user scrolls down the form on the right, the product photo remains displayed on the screen?

 

I've tried the solutions already offered for this problem for different themes, but none of them have worked for me. I've tried setting various containers to position:relative and the image container to position:sticky, but none of it worked. There's probably something I'm missing, if anyone could take a quick look I would be eternally grateful.

 

https://vibrantwallart.com/collections/animals/products/galactic-lion

Accepted Solution (1)

Accepted Solutions
PageFly-Victor
Shopify Partner
6878 1402 2640

This is an accepted solution.

Hi @srdjank 

This is Victor from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css.

Step 3: Paste the below code at bottom of the file -> Save

 

.product-gallery.product-gallery__thumbnails--false.product-gallery--media-amount-10.slideshow-transition--fade.product-gallery--bottom-thumbnails.display-arrows--false {

    position: sticky !important;

    z-index: 1111;

    top: 0;

}

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

If it’s helpful for you, please let me know by giving it a like or marking it as a solution!


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


All features are available from Free plan. Let’s create unique website design with PageFly here.


View solution in original post

Replies 4 (4)
Cloying
New Member
2 0 0

Same question

PageFly-Victor
Shopify Partner
6878 1402 2640

This is an accepted solution.

Hi @srdjank 

This is Victor from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css.

Step 3: Paste the below code at bottom of the file -> Save

 

.product-gallery.product-gallery__thumbnails--false.product-gallery--media-amount-10.slideshow-transition--fade.product-gallery--bottom-thumbnails.display-arrows--false {

    position: sticky !important;

    z-index: 1111;

    top: 0;

}

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

If it’s helpful for you, please let me know by giving it a like or marking it as a solution!


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


All features are available from Free plan. Let’s create unique website design with PageFly here.


srdjank
Shopify Partner
9 0 2

This worked perfectly, thank you!

PageFly-Victor
Shopify Partner
6878 1402 2640

You are welcome @srdjank 

If it’s helpful for you, please let me know by giving it a like or marking it as a solution!


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


All features are available from Free plan. Let’s create unique website design with PageFly here.