How do I get a bold spacer under my product title on product page
Example:
Topic summary
A user wants to add a bold horizontal line (spacer) beneath the product title on their product page, as shown in an attached image.
Initial Solution:
- Add custom CSS targeting
.product__block__spacer .hr--noneto create a 2px black border under all spacers - CSS should be added via theme customizer → product template → product section → Custom CSS
Refined Request:
- User clarifies they only want the spacer under the product title to be bold/black
- The spacer under the price should remain grey (unchanged)
Final Solution:
- Use more specific CSS selector:
.product__block__title + .product__block__spacer .hr--none - This targets only the spacer immediately following the product title
- Creates a 2px black line under the title while leaving other spacers unaffected
Status: Resolved with working CSS code provided and visual examples shared via screenshots.
Hello @michelle012
You can add a custom CSS.
Open theme customize → Go to the product template https://prnt.sc/krI4SxA2f48p → Click on the product section https://prnt.sc/lKSpG-_fslrq and Custom CSS → add below CSS in that area and save it.
.product__block__spacer .hr--none {
border: none;
height: 2px;
background: #000;
}
It will be look like this after this update. https://prnt.sc/nP4I1wbVSe6z
hi Chiragpatel2911 thank you for your response!
is it possible to only make the spacer under the product title bold and to keep the 2e under the price grey just as it is?
hope you can help me
Yes, sure. You can use below CSS if you want just the product title bottom line with bold.
.product__block__title + .product__block__spacer .hr--none {
border: 0;
height: 2px;
background: #000;
}
The result will be like this.
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!