Multicolumn Title outside & above the box with subtitle bellow the box

Multicolumn Title outside & above the box with subtitle bellow the box

Lumify
Shopify Partner
38 1 18

Dear All,

 

Those anyone know if it is possible to have the titles in the column section above the columns boxes and as well like a subtitle bellow the columns boxes?

See example bellow:

Screenshot 2024-08-14 at 13.45.09.png

Replies 13 (13)

Sangeetanahar
Explorer
541 36 69

Hello @Lumify 

Can you please send me the Website URL.

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -sangeetarahuldhiman@gmail.com - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

BSS-TekLabs
Shopify Partner
2350 702 828

- Here is the solution for you @Lumify 
- Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.multicolumn-list h3.inline-richtext {
    color: green !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px !important;
    color: green !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1723637333550.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


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

Hi BSS-TekLabs

 

Thank you for your help, but can you make the main titles to be above the box not in the box and the subtitle bellow the box in bold as well? Thank you

 

BSS-TekLabs
Shopify Partner
2350 702 828
.multicolumn-list h3.inline-richtext {
    color: green !important;
    position: absolute !important;
    top: -30px !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px !important;
    color: green !important;
font-weight: bold !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}

Can you try this code @Lumify 

BSSTekLabs_0-1723638778297.png

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


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

It starting to look great...thank you. 2 more questions please...

Screenshot 2024-08-14 at 14.38.00.png

BSS-TekLabs
Shopify Partner
2350 702 828
@media only screen and (min-width: 600px) {
.multicolumn-list h3.inline-richtext {
    color: green !important;
    position: absolute !important;
    top: -37px !important;
    left: 37% !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px !important;
    color: green !important;
font-weight: bold !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}
}

Can you try this code @Lumify 

BSSTekLabs_0-1723639849662.png

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


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

Thank you, but the subtitles are still as a link...Are you able to change that?

 

BSS-TekLabs
Shopify Partner
2350 702 828
@media only screen and (min-width: 600px) {
.multicolumn-list h3.inline-richtext {
    color: green !important;
    position: absolute !important;
    top: -37px !important;
    left: 37% !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px !important;
    color: green !important;
font-weight: bold !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}
.multicolumn-card__info .icon-wrap {
    display: none !important;
}
}

using this code if you want like this @Lumify 

BSSTekLabs_1-1723639986020.png

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 702 828

Im update the code can you try this @Lumify 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


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

Many thanks for the update. Just one last thing. The subtitle of the first coumn is very far from the box line can they all be at te same level?

 

BSS-TekLabs
Shopify Partner
2350 702 828
@media only screen and (min-width: 600px) {
.multicolumn-list h3.inline-richtext {
    color: green !important;
    position: absolute !important;
    top: -37px !important;
    left: 37% !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px
    color: green !important;
font-weight: bold !important;
}
.multicolumn-list li:first-child .multicolumn-card__info .link {
 bottom: -30px !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}
.multicolumn-card__info .icon-wrap {
    display: none !important;
}
}

BSSTekLabs_0-1723642422919.png

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @Lumify .

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


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

Good evening,

I just tried your code and I am getting this...Please help me fix it. thank you

Screenshot 2024-08-14 at 21.35.49.png

ProtoMan44
Shopify Partner
610 54 92

@Lumify Hey, thanks for posting here.
 can you please share the link to inspect it, thanks.

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!