Add a black line under the collection banner description

Store Design
1

Hello People,

I need to add a black line underneath the collection banner description just to break it up a little bit. So a line across the page between the collection banner and the product grid.

Any and all help is appreciated!

Michael.

2

I have tried adding pictures but it won’t let me upload, .png not supported.

Here is the link to my site; https://thewitcheshollow.com/

here is the link to an example page where I need the black line between the collection banner and the product grid; https://thewitcheshollow.com/collections/herbs-roots

Thanks!

3

Hi @Michael204

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

h1.collection-hero__title {

border-bottom: 2px solid !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

Hi Henry,

Thanks for this! I have used your code and changed it to this as it better reflects the desired location

.collection-hero__description.rte {

border-bottom: 2px solid !important;

How would I add a space between the description and the border? As they are very close. Thanks for the help so far!

Michael.

5

Just incase anyone needs in the future, I managed to play around with Henrys code and came up with a final edit that adds 2 lines above and below the description with padding.

.collection-hero__description.rte {

border-bottom: 2px solid !important;
padding-bottom: 36px; !important;
}
.collection-hero__description.rte {

border-top: 2px solid !important;
padding-top: 36px; !important;
}

Thanks for the initial code Henry!

Michael.