Have your say in Community Polls: What was/is your greatest motivation to start your own business?

REMOVE SPACE CSS PRODUCT PAGE

Solved

REMOVE SPACE CSS PRODUCT PAGE

AA226
Tourist
14 0 4

Hey community, 

 

I've look everywhere to remove the space between the header and the product page, there's no them setting, is there a css code for this please? 

 

Looking forward for your help, 

 

thanks again 

edibpe-sw.myshopify.com

psw : kingaaliya

 

Capture d’écran 2024-11-26 à 11.51.41.png

Accepted Solution (1)

Moeed
Shopify Partner
6301 1711 2058

This is an accepted solution.

Hey @AA226 

 

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 </body> tag

<style>
.template-product .main-content {
    padding: 0 !important;
}
</style>

RESULT:

Moeed_0-1732619109184.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Create high-converting pages - PageFly Page Builder.


View solution in original post

Replies 5 (5)

Tech_Coding
Shopify Partner
417 110 99

Hello @AA226 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   .template-product .main-content {
      padding-top: 0 !important;
  }
</style>

Tech_Coding_0-1732618933902.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

ZestardTech
Shopify Partner
5902 1066 1412

Hello @AA226 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

 

.template-product .main-content {
padding-top: 0!important;
}

 

ZestardTech_0-1732619052533.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Moeed
Shopify Partner
6301 1711 2058

This is an accepted solution.

Hey @AA226 

 

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 </body> tag

<style>
.template-product .main-content {
    padding: 0 !important;
}
</style>

RESULT:

Moeed_0-1732619109184.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Create high-converting pages - PageFly Page Builder.


AA226
Tourist
14 0 4

Thank you so much 

 

topnewyork
Globetrotter
748 124 139

Hello,

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

.template-product .main-content {
    padding-top: 0px !important;
}

 Thanks!

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount