How to add a horizontal line under a collection title

daniel114
New Member
1 0 0

Hey,

I need your help!

I want to make a horizontal straight line under the title of my collection on the homepage

Thank you

0 Likes
KarlOffenberger
Shopify Partner
1868 183 818

Hello there and welcome to the community!

 

Would help if you posted which theme you are using and if possible, shared a link to your store. Without that, it is difficult to help you as each theme varies slightly.

 

Also, do you mean to add an underline under the title text only, or a horizontal rule going across the entire screen below the title?

 

i.e.

 

Title
-----

or

Title
---------------------------------------------------------

Best wishes!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
ipkhan2000
Shopify Partner
9 0 0

Hello Karl,  I would like to know for both of it and i am using debut theme.

0 Likes
sarhov
Shopify Expert
482 85 150

Go into Edit Code and open theme.scss.liquid file.

Scroll at the very bottom and past the following code

.collection-header .section-header h1 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 3px;
	display: inline-block;
}

This will make underline only under title text.

and the next one will make the line full width

.collection-header .section-header h1 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 3px;
}

You can control the thickness and color of the line changing the 1px and color code #ccc.



Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

0 Likes
ipkhan2000
Shopify Partner
9 0 0

Thank you Sarhov. Could you please help me out with this one. I want to add Half horizontal line, then some text and then the line. What should i do in this case I can manage the other satisfaction badges and text with shopify given sections, but having a really hard time adding this to the end of my website.

 

https://www.inspireuplift.com/

 

You can see the bottom of this site. I want to copy it.

Capture.PNG

0 Likes
sarhov
Shopify Expert
482 85 150

For this one you need some custom coding.

for the tite with lines on left and right side, this can be done using css and pseudo-elements,  for badges we need custom html, it depends you want it to be easy maintainable in future, or it can be hardcoding.

And again for title, I need live site url, to see the markup, apply the need styles and past them here for you.

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

0 Likes
ipkhan2000
Shopify Partner
9 0 0

could you please help me out with the title please, I would really appreciate your efforts. 

 

0 Likes
ipkhan2000
Shopify Partner
9 0 0

I sent my url to your email, please have a look.

Thank you.

 

0 Likes
sarhov
Shopify Expert
482 85 150

The title should be like this in collection page ? I need to see the html markup of the title, or there is not any markup yet ?

The I can provide a simple code in jsfidls, use it if it will be helpful

https://jsfiddle.net/mwqs1dry/

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

0 Likes
ipkhan2000
Shopify Partner
9 0 0

Yes i need it like this one but where should i add this code ? Product.template.liquid or theme.scss.liquid. 

0 Likes