Shopify themes, liquid, logos, and UX
HELP! I've tried everything but i cant seem to get it to work. My product image wont become sticky. my url is faveza.com i only have 1 product so you can see the issue clearly pls help nothing works!!!!! I wanr the left side to stay while the right side scrolls
Solved! Go to the solution
This is an accepted solution.
For a sticky element to work its parents must have oveflow:visible;
Your theme has
.main-content__inner-container, .footer {
overflow: hidden;
}
rendered in the <head> portion of the layouts/theme.liquid
I do not know whether it was there originally (in this case you can contact your theme developer with complaint) or was added later to fix some problem.
Ideally this should be removed.
Alternatively, you can fix your problem by adding the following CSS code to the Theme Settings => Custom CSS:
.main-content__inner-container:has(.product) {
overflow: visible;
}
The idea for this code is to override the first one, but only on the product page (just in case).
my url is Faveza.com there is no password!
There should be an option to make sticky on your product OFF on customize page. If you go to Themes->Customize and go to products.
Alternatively make it so you have a image carousel instead of product media stacked up. You can also make your description shorter for users to read and then add extra content down below.
still doesnt work. I just want the description on the right side to scroll when i scroll down the page. I want to get rid of the huge white space if you get what I mean, hope you can help me im really lost here, maybe something in the code?
its only on the desktop. I think my old theme was still up but if you check now, my current theme where the problem occurs is on faveza.com.
This is an accepted solution.
For a sticky element to work its parents must have oveflow:visible;
Your theme has
.main-content__inner-container, .footer {
overflow: hidden;
}
rendered in the <head> portion of the layouts/theme.liquid
I do not know whether it was there originally (in this case you can contact your theme developer with complaint) or was added later to fix some problem.
Ideally this should be removed.
Alternatively, you can fix your problem by adding the following CSS code to the Theme Settings => Custom CSS:
.main-content__inner-container:has(.product) {
overflow: visible;
}
The idea for this code is to override the first one, but only on the product page (just in case).
omg thank you SO MUCH it finally works ur a life saver!!!!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024