Add lines under the Header of Multi-Columns

letsgetwasted · ‎06-13-2024

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

Ideal

Thank you

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

Password: meerew

BSSCommerce-HDL · ‎06-13-2024

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

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

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:

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL · ‎06-13-2024

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

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

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:

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

letsgetwasted · ‎06-14-2024

This worked great, thank you!

Dan-From-Ryviu · ‎06-13-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Add lines under the Header of Multi-Columns

Add lines under the Header of Multi-Columns

Community Blog Articles