How to add a horizontal line under a collection title

Highlighted
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
Highlighted
Shopify Partner
1840 177 711

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 and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
Shopify Partner
9 0 0

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

0 Likes
Highlighted
Shopify Partner
482 86 130

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).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
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
Highlighted
Shopify Partner
482 86 130

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).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
Shopify Partner
9 0 0

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

 

0 Likes
Highlighted
Shopify Partner
9 0 0

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

Thank you.

 

0 Likes
Highlighted
Shopify Partner
482 86 130

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).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
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