How to make SHOP NOW text on homepage image banner, a button – Baseline Theme

[MJ82]

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

[AnneLuo]

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!

[sahilsharma9515 · 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:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above </body> tag

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[MJ82]

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?

[sahilsharma9515]

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

[MJ82]

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/