How to add margin between product image cover and header/announcement bar while scrolling?

Shopify Discussion
1

Hello experts!

Help me solve this case. I want to add margin between product image cover and header/announcement bar while I scroll the product description. Note that the image is sticky now in general. I just want to be simetric with a bit of margin above the image while scrolling down. Please find attached preview from now.

URL: https://www.elysiumreads.com/

clipboard_image_197894ca697b9519.jpg
clipboard_image_197894ca697b9519.jpg1920×1080 199 KB

2 Likes
2

Hi @starscream911
To add space between the top bar and image add the below CSS to base.css

.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    top: 25px !important;
}
3

Hi @starscream911 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1725971337603.png
BSSCommerceHDL_0-1725971337603.png1910×848 198 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
4
  • Here is the solution for you @starscream911
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1725971452299.png
BSSTekLabs_0-1725971452299.png1617×887 231 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
5

Hi Starscream, love the name, reminds me of Transformers!

Anyway, add this Custom CSS to your section.

@media screen and (min-width: 750px) {
  .product__column-sticky {
    padding-top: 16px;
  }
}

Adjust the number to your preference and you should have a result like this:

PaulMartin_0-1725971465696.png
PaulMartin_0-1725971465696.png961×886 300 KB

Hope this helped!

6

Hello!

Yes, the idea is from Transformers! :wink:

7

Tell me!

8

Works perfectly!

Thank you, my friend!

9

Hello!

Thanks for reaching out. This code doesn’t work properly. It eats the top area of all my product images.

10

Hello!

Works perfectly!

Thank you!

1 Like