Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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
Solved! Go to the solution
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 to 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.
Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.
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 to 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.
Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.
This worked perfectly, thank you!
You are welcome @srdjank
If it’s helpful to 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.
Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.
User | RANK |
---|---|
116 | |
93 | |
73 | |
71 | |
45 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022