Changing text for buy it now button on Concept theme

Solved

Changing text for buy it now button on Concept theme

jperez
Tourist
6 0 2

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

 

 

Accepted Solution (1)
namphan
Shopify Partner
2259 295 331

This is an accepted solution.

Hi @jperez,

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 6 (6)

namphan
Shopify Partner
2259 295 331

Hi @jperez,

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
2259 295 331

This is an accepted solution.

Hi @jperez,

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
jperez
Tourist
6 0 2

Thanks for the help!

namphan
Shopify Partner
2259 295 331

Hi @jperez,

You're welcome and happy to help 😊

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

DaisyVo
Shopify Partner
2848 343 401

Hi @jperez ,

 

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

 

Look forward to your response.

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
jperez
Tourist
6 0 2

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.