Changing text for buy it now button on Concept theme

Store Design
, , ,
1

Hello, I’m currently using Shopify’s theme called Concept. I’ve worked with previous themes in the past and to change the ‘buy it now’ text content isn’t really that hard but for this theme I cant seem to do it. It doesn’t have an option on the ‘edit default theme content’ section and when I hardcode the CSS to change the text, it changes the text but when I hover over it, it’ll show the original text plus the new text I inserted. And what’s interesting is that I disabled any button animation so I don’t know why its still doing an animation only on the ‘buy it now’ button. Here is the CSS changes I did as well. If anyone can point me to the right direction it’ll be greatly appreciated.

.shopify-payment-button .shopify-payment-button__button–unbranded {
position: relative;
}

.shopify-payment-button .shopify-payment-button__button–unbranded:before {
content: “Buy Now”;
background: inherit;
font-size: inherit;
color: inherit;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
}

.shopify-payment-button__button–unbranded::before {
content: “Buy Now”;
background: inherit;
font-size: inherit;
color: inherit;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
text-decoration: None !important;
pointer-events: none;
}

Thanks

2

Hi @jperez_1 ,

Please send the website link, I will check it for you

3

Hi @jperez_1 ,

Can you share your store URL so that I can help you check further?

Look forward to your response.

Best,

Daisy

4

Hello,

My url is https://drseusscoins.com/. You’ll notice that the buy now button reads as ‘Buy it now’ but I’ve been trying to modify it to ‘Buy It Now’ using standard css associated with the class name of the button.

5

Hi @jperez_1 ,

Please change all code:

.shopify-payment-button .shopify-payment-button__button--unbranded {
position: relative;
font-size: 0;
}

.shopify-payment-button .shopify-payment-button__button--unbranded:before {
content: "Buy Now";
background: inherit;
font-size: inherit;
color: inherit;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
font-size: 25px;
}
6

Thanks for the help!

1 Like
7

Hi @jperez_1 ,

You’re welcome and happy to help :blush: