I want to achieve this in my focal theme! Can anyone please help me with this? Thanks in advance!
Preview link of my website - https://upthv3rblkypasxx-63517819136.shopifypreview.com
@ridhi_jain . Please provide the URL of your store and if it is password protected please share the password too. Thanks
Hey, this theme is a paid one! I haven’t purchased it yet. Should I purchase and apply this theme to live, in order for you to help me? Anyways I was gonna buy it today.
This is a preview link btw. Is this helpful - https://upthv3rblkypasxx-63517819136.shopifypreview.com
Will this preview link work- https://upthv3rblkypasxx-63517819136.shopifypreview.com
?
@ridhi_jain Thanks for sharing the URL, I can see the preview. I think you need to purchase the theme in order to edit the code if it is not allowing you. If it do, please add this code in your theme CSS file. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of theme.css file
@media screen and (min-width: 1000px){
.product--thumbnails-left .product__media{position:sticky; top:0;}
}
Let me know if it works.
@ridhi_jain Actually the preview link you gave has expired. Can you share the URL again? Thanks. Or you can send me direct message too here.
Sure, here it is - https://qk1jm58nvumnywo9-63517819136.shopifypreview.com
Here is the new preview link - https://qk1jm58nvumnywo9-63517819136.shopifypreview.com
@ridhi_jain Please update the previous code that I gave to this:
@media screen and (min-width: 1000px){
.product--thumbnails-left .product__media{position:sticky; top:90px;}
}
Hi,
That code works beautifully for my site (same Focal theme) however there is an unwanted interaction on desktop when you enlarge a product image. The previous/next image buttons and the X to close the large preview are missing. The buy buttons are also visible above the image preview.
Adapted code slightly to:
@media screen and (min-width: 1000px) {
.product–thumbnails-bottom .product__media {
position: sticky;
top: 180px;
}
}
Any suggestions to help resolve? I have removed the code snippet temporarily. Url: luminetic.com.au
