Shopify themes, liquid, logos, and UX
Hello,
How can I make SHOP NOW text on my homepage image banner, a button (on Baseline Theme)?
It is just showing as text and in the editor, I don't see an option to make it display as a button (black button with white text), when I change color it just chages the text color over the image (left image with white SHOP NOW text at the bottom center).
Here is the site: https://contrakidsmutiny.com
Thanks
Solved! Go to the solution
This is an accepted solution.
Hi @MJ82 Please add the below code:
<style>
#shopify-section-image_split_JrXYbf .rte.text-base {
background: red; // Chnage te colot according to you.
padding: 10px; // Chnage the 10px accoridng to your needs if you want bigger button increase it or you can just increase Font-size and the button will get bigger.
border-radius: 7px;
font-size: 14px; // Change the Size according to your needs
}
</style>
Please follow the steps:
Result:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag
<style>
#shopify-section-image_split_JrXYbf .absolute.top-0.left-0.right-0.bottom-0.z-10.section-x-padding.py-4.flex.justify-center.items-end.text-center {
align-items: center;
}
#shopify-section-image_split_JrXYbf .text-white-text {
padding: 30px 45px;
background: darkolivegreen;
border-radius: 15px;
}
#shopify-section-image_split_JrXYbf .text-white-text .rte {
font-size: 26px !important;
}
</style>
Result:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
This is an accepted solution.
Hi @MJ82 Please add the below code:
<style>
#shopify-section-image_split_JrXYbf .rte.text-base {
background: red; // Chnage te colot according to you.
padding: 10px; // Chnage the 10px accoridng to your needs if you want bigger button increase it or you can just increase Font-size and the button will get bigger.
border-radius: 7px;
font-size: 14px; // Change the Size according to your needs
}
</style>
Please follow the steps:
Result:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
This worked, thanks! I was able to change the color and adjust the text size, but nothing happens when I change the padding. I'd like the button to be larger without the font being larger, meaning that the button edges don't touch the letters but there is more space around the letters. Is this possible?
Hi @MJ82 got it, please add this code just below where you have added the other code.
You need to add the code inside this tag </style>
.rte.text-base {
padding: 10px; // change according to your needs.
}
Result:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
Thank you, I have added another image split on the homepage and despite the fact that I haven't removed the code from before, it is not working in this section. You can see here that the image split at the very top of the site has the buttons, which is great, but if you see the image split at the bottom of the page, it doesn't show. Any ideas? Thanks so much.
https://contrakidsmutiny.com/
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024