Solved

How to remove header section from product pages

DeadEndStreet
Pathfinder
103 0 35

Hi, I would like to remove (maybe make transparent) the header section on product pages only.

I wish to keep it on home page (I have made transparent here) but it looks a bit rubbish on product pages (too much white at top from header section and menu bar) - any ideas?

Thanks

deadendstreet.co.uk

Screenshot 2021-11-02 132231.png

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@DeadEndStreet 

also add this again and check site on desktop

@media only screen and (min-width: 750px){
.template-index #shopify-section-header .nav-bar:after {background: transparent !important;}
.template-collection #shopify-section-header .nav-bar:after {background: transparent !important;}
.template-product #shopify-section-header .nav-bar:after{background: transparent !important;}
.nav-bar .page-width {background: #fff !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 11 (11)

dmwwebartisan
Shopify Partner
12280 2546 3694

@DeadEndStreet 

Add code Your assets/theme.scss.liquid bottom of the file.

@media only screen and (min-width: 750px){
.site-header__upper { padding-bottom: 5px !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

Hi DMW - thank you for your reply.

That works great for moving my main menu bar up and down (I needed that option), however do you know what code I need to do the following:

  1. Make the logo bar/section above disappear thereby moving the main menu bar to the top (pushing page up)and/or;
  2. make the logo bar/section transparent?

I have one other thing I am also struggling with:

My mobile view is not right in that the first section below the main menu bar is too far away (big gap in between) - I wish to reduce this gap without affecting the desktop view - the gap exists because I have been moving the 1st section down on desk top using the code below but that also moves the mobile 1st section down (which I dont want to do) - how do i treat mobile and desktop separately?

.main-content {
margin-top: 200px;
}

Thanks

dmwwebartisan
Shopify Partner
12280 2546 3694

@DeadEndStreet 

Please share screenshot what do you want!

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

Hi, I want as follows:

You can see below on the collection page that the collection heading and product image is much too far down the page - I wish to move this further up the page.

Alternatively it may also work to remove the header section or at least make a lot narrower on the same page (collection page)

Thanks

 

Screenshot 2021-11-03 094917.png

dmwwebartisan
Shopify Partner
12280 2546 3694

@DeadEndStreet 

Add code Your assets/theme.scss.liquid bottom of the file.

@media only screen and (max-width: 749px){
.main-content { margin-top: 20px !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

Hi DMW,

 

That works and sorts out the product/collection pages but unfortunately it also moves up my main home landing page (so it takes my sections up underneath the logo etc.

How can I apply that code purely to the product/collection pages?

Thank you

dmwwebartisan
Shopify Partner
12280 2546 3694

@DeadEndStreet 

Remove previous css code 

Add this new code Your assets/theme.scss.liquid bottom of the file.

@media only screen and (max-width: 749px){
.template-collection .main-content {margin-top: 20px!important;}
.template-product .main-content {margin-top: 20px!important;}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

DMW - that is awesome - fantastic, thank you.

I will have to save you as the Shopify Guru - really really appreciate it - thank you.

dmwwebartisan
Shopify Partner
12280 2546 3694

@DeadEndStreet 

also add following css class

@media only screen and (min-width: 750px){
.template-collection #shopify-section-header {
    position: relative;
    width: 100%;
    z-index: 9;
}
.template-product #shopify-section-header {
    position: relative;
    width: 100%;
    z-index: 9;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DeadEndStreet
Pathfinder
103 0 35

Hi DMW,

I just noticed something strange - so the above works and my desktop and mobile view looks fine on the product and collection pages.

However on my laptop (so when I am purely on my laptop and not docked to monitors etc) the collection and product pages are still too far down and seem to be to the left - see below:

Is there a separate code for laptops and all lol?

Screenshot 2021-11-03 125508.png

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@DeadEndStreet 

also add this again and check site on desktop

@media only screen and (min-width: 750px){
.template-index #shopify-section-header .nav-bar:after {background: transparent !important;}
.template-collection #shopify-section-header .nav-bar:after {background: transparent !important;}
.template-product #shopify-section-header .nav-bar:after{background: transparent !important;}
.nav-bar .page-width {background: #fff !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app