Shopify themes, liquid, logos, and UX
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:
Hello @Lumify
Can you please send me the Website URL.
Thanks
- Here is the solution for you @Lumify
- Please follow these steps:
- 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:
- 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
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
.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
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
It starting to look great...thank you. 2 more questions please...
@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
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
Thank you, but the subtitles are still as a link...Are you able to change that?
@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
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
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
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?
@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;
}
}
- 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
Good evening,
I just tried your code and I am getting this...Please help me fix it. thank you
@Lumify Hey, thanks for posting here.
can you please share the link to inspect it, thanks.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024