Solved

Debut Theme - Move page title down on all pages

MandyLT
Excursionist
34 0 3

Hi,

I'd like to know how to move my page title down on all pages please.  

I attach screenshots below.  As you can see on the desktop version the title 'Privacy Policy'  is close to the top of the page, but on the mobile version part of the text is cut off by the sticky header bar.  

Please could someone let me know how to move the title down on the page on both desktop and mobile views?  The title might need adjusting at different rates depending on the screen it is being viewed on, so it would be good to be able to move it down independently depending on screen type. 

Thank you in advance.  This forum is so helpful!!! 

 

 

 

Screenshot 2020-11-25 at 11.59.02.pngIMG_F87021AD465A-1.jpeg

Accepted Solutions (4)

Bo
Shopify Staff (Retired)
1793 196 467

This is an accepted solution.

Hey there, @MandyLT 

 

Bo here from Shopify Support!

 

That is a great question and I am so glad you find this forum so helpful! Some space can be added to the page headers by adding some CSS to the bottom of the theme.scss.liquid. 

 

**NB** When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

 

Steps:

1. Go to Online Store > Themes > Actions > Edit Code.

2. Open the Assets folder > theme.scss.liquid. 

3. Scroll to the very bottom of the file and paste the following code:

 

.section-header {
    padding-top: 20px;
  }

You can change the amount of space by changing the number before px, use a higher number for more space or a lower number for less space.

3. Click Save.

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

 

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Bo
Shopify Staff (Retired)
1793 196 467

This is an accepted solution.

My absolute pleasure, Mandy!

 

1. To edit the mobile version add the following under the code you have already added: 

   @media only screen and (max-width: 749px) {
 .section-header { 
    padding-top: 50px;
  }
    }

 

2. Click Save. 

 

The finished code should look like this:

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo 

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Bo
Shopify Staff (Retired)
1793 196 467

This is an accepted solution.

Hello again, Mandy 

 

For the Customer Login page please do the following:

 

1. Go to Online Store > Themes > Actions > Edit Code. 

2. Open the customers/login.liquid. 

3. Find this line of code: 

        <h1 id="LoginHeading" class="text-center">{{ 'customer.login.title' | t }}</h1>

4. Replace it with this line of code: 

        <h1 style="padding-top: 30px;" id="LoginHeading" class="text-center">{{ 'customer.login.title' | t }}</h1>

5. Click Save. 

 

All the Best,

Bo

 

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Bo
Shopify Staff (Retired)
1793 196 467

This is an accepted solution.

Apologies for that, @MandyLT ! 

 

Replace the code you've inputted, i.e.

      <h1 style="padding-top: 60px;"class="h2">

 

With this:

 

      <h1 style="padding-top: 60px;" class="h2">{{ 'general.search.title' | t }}</h1>

 

Click Save.

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 14 (14)

oscprofessional
Shopify Partner
15830 2369 3072

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

Bo
Shopify Staff (Retired)
1793 196 467

This is an accepted solution.

Hey there, @MandyLT 

 

Bo here from Shopify Support!

 

That is a great question and I am so glad you find this forum so helpful! Some space can be added to the page headers by adding some CSS to the bottom of the theme.scss.liquid. 

 

**NB** When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

 

Steps:

1. Go to Online Store > Themes > Actions > Edit Code.

2. Open the Assets folder > theme.scss.liquid. 

3. Scroll to the very bottom of the file and paste the following code:

 

.section-header {
    padding-top: 20px;
  }

You can change the amount of space by changing the number before px, use a higher number for more space or a lower number for less space.

3. Click Save.

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

 

To learn more visit the Shopify Help Center or the Community Blog.

MandyLT
Excursionist
34 0 3

Hey Bo, 

Thanks so much!! That worked perfectly 🙂 

Is there a way to change the mobile version independently?  I think the mobile version needs slightly more padding than the desktop version. 

Thanks again.  Mandy. 

Bo
Shopify Staff (Retired)
1793 196 467

This is an accepted solution.

My absolute pleasure, Mandy!

 

1. To edit the mobile version add the following under the code you have already added: 

   @media only screen and (max-width: 749px) {
 .section-header { 
    padding-top: 50px;
  }
    }

 

2. Click Save. 

 

The finished code should look like this:

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo 

To learn more visit the Shopify Help Center or the Community Blog.

MandyLT
Excursionist
34 0 3

Perfect!!  🙂 🙂 🙂 Thank youuuuuuuuu

MandyLT
Excursionist
34 0 3

Hi Bo, 

I have added my shop policies and the titles of these pages are too high up on the mobile version and not affected by the previous code you kindly provided.  Do you know the code to move these titles down please?  Thanks in advance. 

IMG_6997.PNG

MandyLT
Excursionist
34 0 3

Hi Bo, 

ignore my last message.  I have moved the shop policies over to pages i have created.  The titles then work using the code you gave me.  Thanks 

MandyLT
Excursionist
34 0 3

Hi Bo, me again!  

I need to move the title down on the account login page.  Do you know the code for this please?  Thank you in advance. 

IMG_87C891BCCA6C-1.jpeg

MandyLT
Excursionist
34 0 3

Also the search results page please. 

IMG_B119F3FF0370-1.jpeg

Bo
Shopify Staff (Retired)
1793 196 467

This is an accepted solution.

Hello again, Mandy 

 

For the Customer Login page please do the following:

 

1. Go to Online Store > Themes > Actions > Edit Code. 

2. Open the customers/login.liquid. 

3. Find this line of code: 

        <h1 id="LoginHeading" class="text-center">{{ 'customer.login.title' | t }}</h1>

4. Replace it with this line of code: 

        <h1 style="padding-top: 30px;" id="LoginHeading" class="text-center">{{ 'customer.login.title' | t }}</h1>

5. Click Save. 

 

All the Best,

Bo

 

To learn more visit the Shopify Help Center or the Community Blog.

MandyLT
Excursionist
34 0 3

Perfect!  Huge thanks 🙂 🙂  

Bo
Shopify Staff (Retired)
1793 196 467

Sorry I almost missed this part, Mandy! 

 

To make this change for the Search Results Page:

 

1. Go to Online Store > Themes > Actions > Edit Code.

2. Open the search.liquid and find the following line of code: 

      <h1 class="h2">{{ 'general.search.title' | t }}</h1>

3. Replace it with the following:

      <h1 style="padding-top: 60px;"class="h2">

4. Click Save. 

 

Of course, just as in the initial tutorial you can make the spacing larger or smaller by making the px larger or smaller - this also applies to the customer login page. 

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

 

To learn more visit the Shopify Help Center or the Community Blog.

MandyLT
Excursionist
34 0 3

Hi Bo, 

This one didn't work but i have found where i need to enter the code.  It's probably me not explaining it properly in the first place.  See below where i've inputted the code you gave in order to make it work as needed.  

Thanks Bo.  You've been a great help! 

Mandy 🙂 

Screenshot 2020-11-27 at 15.26.33.pngIMG_7032.PNG

 

Bo
Shopify Staff (Retired)
1793 196 467

This is an accepted solution.

Apologies for that, @MandyLT ! 

 

Replace the code you've inputted, i.e.

      <h1 style="padding-top: 60px;"class="h2">

 

With this:

 

      <h1 style="padding-top: 60px;" class="h2">{{ 'general.search.title' | t }}</h1>

 

Click Save.

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.