How to Add a Border to Best Sellers

Excursionist
30 1 0

Hi. I am looking how to add a border to my page's title/heading, I will screenshot my website and the one I'd like to emulate. Thanks a lot!

fit.pngMy Websitebeautycharcoal.pngHow I'd like mine to look like.

0 Likes
Shopify Expert
175 34 56

HTML:

<span class="line">
<h2><span>Best Sellers</span></h2>
</span>

CSS:

.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
1 Like
Shopify Expert
175 34 56
.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}
<span class="line">
    <h2><span>Latest Track</span></h2>
</span>
Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
1 Like
Excursionist
30 1 0

Where do I add this to in the Shopify coding? I have the debut theme.

0 Likes
Shopify Expert
175 34 56

please go to page.liquid and i think you will have page-template.liquid in sections. You can wrap you page title with something like that 

 

<span class="line">
<h2><span>{{page.title}}</span></h2>
</span>

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
1 Like
Highlighted
Excursionist
30 1 0

Sorry, I should have probably mentioned I have no coding experience. I tried to apply this code in several ways but it did not work for me.

0 Likes
Shopify Expert
175 34 56

Can you please give me access. I can do that in few mins. Thank you

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
1 Like
Excursionist
30 1 0

Yes, can I add you on Skype to share the details?

0 Likes
Shopify Expert
175 34 56

Yes sure, my skype id is fayyaz_raza

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
1 Like