Vertically centered product page description and item name not disappearing on scroll down (Dawn)

Store Design
, , , ,

Topic summary

A user requested help making product page descriptions and details vertically centered and sticky during scrolling, while keeping the product name visible on scroll. They provided a reference image and store credentials.

Solutions Provided:

Two community members offered CSS solutions:

  • One suggested adding position: sticky with top: 50% and transform: translateY(-50%) to .product__info-container
  • Another provided similar code to be added in theme.liquid above </head>

Resolution:

The user initially implemented the code but encountered an issue where the sticky text overlapped the banner during scrolling. They successfully resolved this themselves by:

  • Adjusting the transform value to account for banner height
  • Changing z-index from 10 to 1

The issue is now resolved.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hey all,

I would like the product page description and details to always be vertically centered on the screen (for all screen width - example is set to 1400px) and to stick to its position during scroll down.

Also, I would like the name of the product to not disappear on scroll down.

I would hugely appreciate any help with this. Picture for reference.
Website - maisonmagdalena.com
Password - MaisonMagdalena.222

Snímka obrazovky 2025-02-04 130644.png
Snímka obrazovky 2025-02-04 130644.png1245×837 147 KB

2

Hey @MagdalenaBB

Please add this CSS to you theme
Go to Online store > Theme > Edit code> Locate theme.css or base.css and this add the bottom of the file

@media (min-width: 768px) {
  .product__info-container {
    position: sticky!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
    z-index: 10!important;
  }
}

Give it a try and please feel free to reach out if you need any further assistance

Cheers,
Shreya

3

Hi @MagdalenaBB

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

1 Like
4

Hello, Richard. Thank you very much! The code works, but unfortunately it doesn´t account for the banner and thus it looks awkward, when scrolling down, the text is overlaying the banner at some point, as shown in the screenshot

MagdalenaBB_0-1738748212014.png
MagdalenaBB_0-1738748212014.png1900×875 229 KB

I believe a little change in the code is needed to make it so that the product information never overlays the banner (White space). Could you help me with this? Thanks :blush:

Edit - never mind, I managed to solve it myself by adjusting the transform: to adjust for banner height and by editing the z-index from 10 to 1. Thanks for your help!