How to decrease size between header and product page image

Store Design
, ,

Topic summary

A user encountered an unexpected increase in spacing between the header and product image on their product pages. After sharing their store URL (Glovyz one.com), multiple solutions were proposed involving custom CSS code.

Proposed Solutions:

  • Adding negative margin to .swiper-zoom-container>img with margin-top: -80px
  • Inserting CSS in theme.liquid file above the </body> tag
  • Applying media query targeting .swiper-slide for mobile devices (max-width: 768px)
  • Using specific padding adjustment for .swiper-slide elements

Resolution:
The user confirmed one of the CSS solutions worked successfully. All proposed fixes involved editing the theme’s CSS or liquid files to reduce the vertical spacing through negative margins or padding adjustments. Screenshots were provided showing the before/after results of the spacing reduction.

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

Hi,

I need help with decreasing size between my header and product image in product page. It was normal but somehow suddenly the space increase. Here’s an example

IMG_4291.jpeg
IMG_4291.jpeg1206×2622 335 KB

I’ll be grateful for help

1 Like
2

Hello,
Please share “Store URL”
Thanks!

3

Share URL please

4
5
6 
.swiper-zoom-container>img{
    margin-top: -80px !important;
}

If its helpful please Like and Accept as solution

1 Like
7

Hey @Alexdontero

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1735829452683.png
Moeed_0-1735829452683.png332×712 194 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

8

It doesn’t work idk why

9

Thanks it’s working

10

Hello, @Alexdontero

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
@media (max-width: 768px){
.swiper-slide {
    margin-top: -80px !important;
}
}

Thanks!

11

Hi @Alexdontero

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.swiper-slide.s-media-51168418660686.swiper-slide-active {
    padding-top: 24px !important;
}

Result:

websensepro_0-1735830143217.png
websensepro_0-1735830143217.png339×476 180 KB

websensepro_1-1735830166627.png
websensepro_1-1735830166627.png851×487 372 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!