REMOVE SPACE CSS PRODUCT PAGE

Solved

REMOVE SPACE CSS PRODUCT PAGE

AA226
Excursionist
18 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
7465 2021 2480

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!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 5 (5)

Tech_Coding
Shopify Partner
514 132 131

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
6142 1097 1473

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
7465 2021 2480

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!

- Custom Design | Advanced Coding | Store Modifications


AA226
Excursionist
18 0 4

Thank you so much 

 

topnewyork
Astronaut
1365 165 224

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
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month