Shopify themes, liquid, logos, and UX
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
Please let me know if it works by giving it a like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Let’s create a unique website design with PageFly for free now!
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
Please let me know if it works by giving it a like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Let’s create a unique website design with PageFly for free now!
This worked perfectly, thank you!
You are welcome @srdjank
Please let me know if it works by giving it a like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Let’s create a unique website design with PageFly for free now!
User | RANK |
---|---|
232 | |
150 | |
55 | |
52 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023