Shopify themes, liquid, logos, and UX
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.
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024