Add lines under the Header of Multi-Columns

Solved

Add lines under the Header of Multi-Columns

letsgetwasted
Excursionist
40 1 7

Hi,

 

I'd like to add a black line separator under the titles for multi-columns - attached photo of what it looks like now and what I hope it can look like!

 

How can I also change the padding / spacing between image to header, header to line, and line to paragraph text?

 

Now

nolines.jpg

 

Ideal

lines.jpg

 

Thank you

 

Shopify URL: https://65a186-44.myshopify.com/

Password: meerew

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
1103 377 448

This is an accepted solution.

Hi @letsgetwasted
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718292981207.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1718292985045.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

.multicolumn-card__info .inline-richtext {
    padding-bottom: 5px !important;
    position: relative !important;
}

.multicolumn-card__info .inline-richtext::before {
    content: '';
    width: 100%;
    height: 2px;
    background-color: black;
    position: absolute;
    bottom: 0;
}

 

Here is result: 

BSSCommerceHDL_2-1718293014921.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

BSSCommerce-HDL
Shopify Partner
1103 377 448

This is an accepted solution.

Hi @letsgetwasted
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718292981207.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1718292985045.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

.multicolumn-card__info .inline-richtext {
    padding-bottom: 5px !important;
    position: relative !important;
}

.multicolumn-card__info .inline-richtext::before {
    content: '';
    width: 100%;
    height: 2px;
    background-color: black;
    position: absolute;
    bottom: 0;
}

 

Here is result: 

BSSCommerceHDL_2-1718293014921.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
letsgetwasted
Excursionist
40 1 7

This worked great, thank you!

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Hi @letsgetwasted 

Please add this code to your theme.liquid file, after <head>

<style>
.multicolumn-card__info h3 {
border-bottom: 1px solid #000;
padding-bottom: 12px;
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.