How do I add a Decorative line under headers on Shopify dawn?

Solved

How do I add a Decorative line under headers on Shopify dawn?

PSirona
Tourist
6 0 1

Screenshot 2025-01-25 at 06.55.17.png

Using custom Liquid section 

 

Accepted Solution (1)
CodingFifty
Shopify Partner
525 80 99

This is an accepted solution.

 

  • Go to your Shopify Admin panel.
  • Click on Online Store from the left sidebar.
  • Under Themes, click on the Actions button for your active theme, then select Edit Code.
  • In the left sidebar, find and click on the base.css file (or theme.css depending on your theme).
  • Scroll to the bottom of the base.css file and paste the code: @PSirona 
h2.title.inline-richtext {
  position: relative !important;
  padding-bottom: 10px; /* Space between text and line */
  margin-bottom: 20px; /* Space below the line */
}

h2.title.inline-richtext::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* Start at the middle of the header */
  transform: translateX(-50%); /* Center the line */
  width: 10%; /* Line width set to 10% */
  height: 2px; /* Line thickness */
  background-color: #000; /* Line color */
}

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com

View solution in original post

Replies 10 (10)

CodingFifty
Shopify Partner
525 80 99

HI @PSirona,

Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
PSirona
Tourist
6 0 1

Thank you @CodingFifty 

 

please see below 

https://puresirona.co.uk/

CodingFifty
Shopify Partner
525 80 99

If you have this heading, then add this code. @PSirona 

CodingFifty_1-1737791425279.png

 

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

 

 

h2.title.inline-richtext::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 2px;
    background-color: #000;
    justify-self: anchor-center;
}

h2.title.inline-richtext {
  position: relative !important;
  padding-bottom: 10px; /* Space between text and line */
  margin-bottom: 20px; /* Space below the line */
}

 

 

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
PSirona
Tourist
6 0 1

Thank you, that's has nearly worked, it doesn't seem to be central, please see below @CodingFifty 

 

 

Screenshot 2025-01-25 at 07.57.57.pngScreenshot 2025-01-25 at 07.58.56.png

CodingFifty
Shopify Partner
525 80 99

Try this code @PSirona 

h2.title.inline-richtext {
  position: relative !important;
  padding-bottom: 10px; /* Space between text and line */
  margin-bottom: 20px; /* Space below the line */
}

h2.title.inline-richtext::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* Start at the middle of the header */
  transform: translateX(-50%); /* Center the line */
  width: 10%; /* Line width set to 10% */
  height: 2px; /* Line thickness */
  background-color: #000; /* Line color */
}
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
PSirona
Tourist
6 0 1

Thank you, @CodingFifty  it worked visually but now when I try to save it keeps saying Online Store editor session can't be published?

 

Screenshot 2025-01-25 at 08.32.19.png

CodingFifty
Shopify Partner
525 80 99

This is an accepted solution.

 

  • Go to your Shopify Admin panel.
  • Click on Online Store from the left sidebar.
  • Under Themes, click on the Actions button for your active theme, then select Edit Code.
  • In the left sidebar, find and click on the base.css file (or theme.css depending on your theme).
  • Scroll to the bottom of the base.css file and paste the code: @PSirona 
h2.title.inline-richtext {
  position: relative !important;
  padding-bottom: 10px; /* Space between text and line */
  margin-bottom: 20px; /* Space below the line */
}

h2.title.inline-richtext::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* Start at the middle of the header */
  transform: translateX(-50%); /* Center the line */
  width: 10%; /* Line width set to 10% */
  height: 2px; /* Line thickness */
  background-color: #000; /* Line color */
}

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
PSirona
Tourist
6 0 1

That has worked now, Thank you so much @CodingFifty 
 please how can I apply the same style to collections header?

CodingFifty
Shopify Partner
525 80 99

Sure!, Please share the store password. @PSirona 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com

CodingFifty
Shopify Partner
525 80 99

Hi @PSirona,

 

Create a Custom Liquid Section:

  • In Shopify Admin, go to Online Store → Themes → Actions → Edit Code.
  • In the Sections folder, create a new file named header-decorative-line.liquid and paste the following code:

 

<!-- header-decorative-line.liquid -->
<div class="custom-header-line">
  <h2>{{ section.settings.title }}</h2>
</div>

{% schema %}
{
  "name": "Header Decorative Line",
  "settings": [
    {
      "type": "text",
      "label": "Title",
      "id": "title",
      "default": "Your Custom Title"
    }
  ]
}
{% endschema %}

<style>
/* CSS for Header Decorative Line */
.custom-header-line h2 {
  position: relative;
  padding-bottom: 10px; /* Space between text and line */
  margin-bottom: 20px; /* Space below the line */
  font-size: 24px; /* Customize the font size */
}

.custom-header-line h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Line thickness */
  background-color: #000; /* Line color */
}
</style>
​

 

 

2. Add the Section to Your Page:

  • Go to Customize (Shopify Admin → Online Store → Themes → Customize).
  • Add a new Custom Liquid section.
  • Choose the "Header Decorative Line" section you just created.
  • Set the title in the section settings.

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com