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

[starscream911]

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/ 

[BSSCommerce-HDL · Accepted solution]

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 </head> tag:

<style>
@media only screen and (min-width: 750px) {
    .product__column-sticky {
        top: 6.5rem !important;
    }
}
</style>

Here is result: 

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 😍

[Huptech-Web]

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;
}

[starscream911]

Hello! 

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

[BSSCommerce-HDL · Accepted solution]

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 </head> tag:

<style>
@media only screen and (min-width: 750px) {
    .product__column-sticky {
        top: 6.5rem !important;
    }
}
</style>

Here is result: 

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 😍

[starscream911]

Works perfectly! 

Thank you, my friend! 

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @starscream911 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media screen and (min-width: 750px) {
    .product__column-sticky {
        top: 7rem !important;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[starscream911]

Hello! 

Works perfectly! 

Thank you! 

[PaulMartin]

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:

Hope this helped!

[starscream911]

Hello!

Yes, the idea is from Transformers! 😉

[starscream911]

Tell me!