Sticky product info (dawn theme)

[voodoowww123]

Hi! I would like the product information section to stay sticky while I scroll down. Can anyone give me a hand?

url: www.voodoo-warehouse.com

Thanks

[The_ScriptFlow]

Hey @voodoowww123,

Are you able to share the main-product.liquid file with us. Because the current division is not applicable to make it sticky with the help of css.

Share the whole code here.

[voodoowww123]

it’s too long to share but I managed to create this link: main prod liquid - Online Notepad

[PaulNewton]

SEARCH first https://community.shopify.com/search?q=dawn+sticky+product
This type of thing can often need work beyond the scope of the forums.

Reach out to one of use contributors for custom theme services if you can’t DIY it from existing sources or the lack of them.

[tim_1]

This is a popular problem.
Code to sticky your product description is already in the theme, but it does not work because some of product description ancestors has overflow: hidden; CSS property set.

In your case, there is this code towards the bottom of the assets/base.css:

body,html {
  overflow-x: hidden;
}

It is a popular recommendation when one has some elements extend beyond right screen margin, but do not want to spend time taming those exact element(s).

Quick solution would be to replace hidden with clip. While looking similar, clip does not break sticky on children.

body,html {
  overflow-x: clip;
}

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[Dan-From-Ryviu]

Please go to your store admin, open base.css file. Change this code

body, html {
    overflow-x: hidden;   /* evita que la web se desplace hacia los lados */
}

To this

@media (max-width: 749px) {
body, html {
    overflow-x: hidden;   /* evita que la web se desplace hacia los lados */
}
}

[voodoowww123]

Thank you so much. That fixed the problem

[Dan-From-Ryviu]

Happy I could help !!