• Priority: 0
  • Status: Waiting on customer
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 06.07.26, 17:49
  • Opened by: Alberto trevisiol

Ticket #26530 - Sticky bar in the product page

The product page is very long, expecially from mobile, the visttor that scrolls the page must return in tthe top to see the “add to cart” button.
Is it possible to insert a Sticky bar featuring the product name, price, selected size, and an “Add to cart” CTA that appears after scrolling past the initial purchase box?
thank you in advance for your kind help.
Ezio
dogbauer.it

Comments

Fred 06 Jul 2026, 22:12

Hi, Alberto.
You can move the button up like this https://mega.nz/file/IB4knIpZ#vYhTfUS6wC71Z5oA1HJefQ7iPustNnDi5zWGungcFmA using this CSS 

@media (max-width: 768px) {
    .product-information {
        display: flex;
        flex-direction: column;
    }
    .short-desc {
        order: 2;
    }
    .product-actions {
        order: 1;
    }
    .blockreassurance_product {
        order: 3;
    }
}
Alberto trevisiol 06 Jul 2026, 22:34

Hi Fred, I don't understand what I'm supposed to see in the screenshot; also, I'm not a developer and wouldn't know where to insert the CSS script.

Fred 06 Jul 2026, 22:36

you said that the Add to cart button is too far under the description. I gave you CSS that move it up. On the screenshot you can see the button ring under the images

Alberto trevisiol 06 Jul 2026, 22:43

I didn't say the button is positioned too low. It is actually at the top, in the right place; however, the product page is long on mobile devices. When a customer scrolls down to read the description, they have to go back to the top to find the "Add to Cart" button. That button needs to remain visible at all times, even as the user scrolls.

Fred 06 Jul 2026, 22:47

You already have many "sticky" blocks there, do you really need one more?

Alberto trevisiol 06 Jul 2026, 22:52

I know… but the add to cart is te most important of all. Are there other solutions?

Fred 06 Jul 2026, 23:18

Try this:

@media (max-width: 768px) {
  #header {
    position: relative;
    z-index: 10;
  }
  .product-quantity {
    position: fixed; top: 0; background-color: #fff; width: 100%; left: 0; display: flex; justify-content: center; padding: 10px; z-index: 9;
  }
}
Alberto trevisiol 07 Jul 2026, 09:03

Have I to involve the developer or can I insert this code somewhere in the backoffice prestashop?

Fred 07 Jul 2026, 11:39

Just add this code into the Customer CSS in the Theme Settings

Alberto trevisiol 07 Jul 2026, 16:51

It's almost perfect, there is only a problem: if the user don't scroll the button doesn't appear.
I'm working for movin in other position the stiky "PAGA MENO CON WORLDZ", if possible I could put the add to cart botton in the bottom.
Can you tell me which could be the css script in this case?
Thank you in advance for your kind support.
Ezio

Fred 07 Jul 2026, 21:34

Ok, here is updated CSS 

@media (max-width: 768px) {
  #header {
    position: relative;
    z-index: 10;
  }
  .product-quantity {
    position: fixed; bottom: 0; background-color: #fff; width: 100%; left: 0; display: flex; justify-content: center; padding: 10px; z-index: 999999;
  }
}
Alberto trevisiol 08 Jul 2026, 11:23

Thanks a lot,
I think it's perfect now; I tweaked your code a bit.
Could you take a look at it?
There's just one problem left.
Below the "Add to cart" button, on the right, the reCAPTCHA logo appears. Do you have any idea how I can get rid of it?

Fred 08 Jul 2026, 22:59

I see it like this https://mega.nz/file/BIZhybgR#mlU3lemjZErkF7OCEkgci7scJzppxPyz4t5j7H6wWjs

There is no captcha, but there is a chat button. Do you want to hide the chat button?

Alberto trevisiol 09 Jul 2026, 09:10

No, the chat can be closed with the cross, there is another icon on the right but isn't impossible to eliminate, it's not important. https://prnt.sc/C64z2uDP8YVN You can consider closed this ticket.
Thank you very much
Ezio

Fred 09 Jul 2026, 23:06

Ok, I see.
Glad to help