Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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
Solved! Go to the solution
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;
}
Hi @jperez,
Please send the website link, I will check it for you
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;
}
Thanks for the help!
Hi @jperez,
You're welcome and happy to help 😊
Hi @jperez ,
Can you share your store URL so that I can help you check further?
Look forward to your response.
Best,
Daisy
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.