Shopify themes, liquid, logos, and UX
This is an accepted solution.
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 */
}
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?
If you have this heading, then add this code. @PSirona
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 */
}
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 */
}
Thank you, @CodingFifty it worked visually but now when I try to save it keeps saying Online Store editor session can't be published?
This is an accepted solution.
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 */
}
That has worked now, Thank you so much @CodingFifty
please how can I apply the same style to collections header?
Sure!, Please share the store password. @PSirona
Hi @PSirona,
Create a Custom Liquid Section:
<!-- 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>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025