Shopify themes, liquid, logos, and UX
How can I put title above the pic ? Garden & Home Residential should be on top of the image..
Solved! Go to the solution
This is an accepted solution.
Hey @hem0903
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.card.color-scheme.color-scheme--2.relative.flex.flex-col.h-full {
display: flex !important;
flex-flow: column-reverse !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
- Here is the solution for you @hem0903
- Please follow these steps:
- Then find the base.css or main.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.card__media.media {
margin-top: 40px !important;
}
.color-scheme .card__title {
position: absolute !important;
top: 0 !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
Hello @hem0903
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist 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
This is an accepted solution.
Hey @hem0903
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.card.color-scheme.color-scheme--2.relative.flex.flex-col.h-full {
display: flex !important;
flex-flow: column-reverse !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thanks for the help I want title image then text. This code shifting text to the top as well. I want image in the middle.
.card {
display: flex !important;
}
.card.color-scheme .card__info {
order: -1 !important;
}
Can you add this in last line file main.css
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
Thanks for the help I want title image then text. This code shifting text to the top as well. I want image in the middle.
- Here is the solution for you @hem0903
- Please follow these steps:
- Then find the base.css or main.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.card__media.media { margin-top: 40px !important; } .color-scheme .card__title { position: absolute !important; top: 0 !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
This is an accepted solution.
- Here is the solution for you @hem0903
- Please follow these steps:
- Then find the base.css or main.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.card__media.media {
margin-top: 40px !important;
}
.color-scheme .card__title {
position: absolute !important;
top: 0 !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
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025