sticky product image on my store

nynkejosephien · ‎10-27-2024

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

tim · ‎10-27-2024

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).

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Taknify · ‎10-27-2024

Please share your store url and password if it's locked. We can't see what you are having issue with.

Need to tweak your store for Black Friday? Simply, send me a message.

nynkejosephien · ‎10-27-2024

my url is Faveza.com there is no password!

Taknify · ‎10-27-2024

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.

Need to tweak your store for Black Friday? Simply, send me a message.

nynkejosephien · ‎10-27-2024

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?

nynkejosephien · ‎10-27-2024

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.

tim · ‎10-27-2024

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).

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

nynkejosephien · ‎10-29-2024

omg thank you SO MUCH it finally works ur a life saver!!!!

sticky product image on my store

sticky product image on my store

Community Blog Articles