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

Store Design
1

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

2

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 tag

Result:

AnneLuo_0-1729680096474.png
AnneLuo_0-1729680096474.png734×573 492 KB

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

3

Hi @MJ82 Please add the below code:

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 tag

Result:

sahilsharma9515_0-1729683420240.png
sahilsharma9515_0-1729683420240.png1896×276 572 KB

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

Best Regards

Sahil

4

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?

5

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 

.rte.text-base {
    padding: 10px; // change according to your needs.
}

Result:

sahilsharma9515_0-1729747044805.png
sahilsharma9515_0-1729747044805.png1903×471 640 KB

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

Best Regards

Sahil

6

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/