Edit Add To Cart Button style (theme: Refresh 2.0.1)

[stephen1999]

Hello!

I would like to change appearance of add to cart button on my shop.

I actually have a short tutorial for that, but maybe it's out of date and probably for other theme, so I want to make sure I do it right...

So in that tutorial I should find: theme.css.liquid (under Assets section) and then add a custom code to the end of that. Screenshot: https://prnt.sc/9UNWMBEDd0yN

But I can't find theme.css.liquid file under Assets section on my theme (Refresh 2.0.1). So I'm not sure where should I add this code to..? and I don't want to mess up things on my shop.

Should I add it then at theme.liquid under Layout section, or maybe somewhere else?

I've got 3 different styles of add to cart button customization, and here's the code for the first one (just so you can have a better picture of what I use):

.product-form__submit button button--full-width button--primary{
box-shadow: 0 0 0 0 rgba(255, 85, 72, 1);
animation: pulse-red 2.5s infinite;
}
@keyframes pulse-red {
0% {
box-shadow: 0 0 0 0 rgba(255, 85, 72, 0.7);
}

70% {
box-shadow: 0 0 0 10px rgba(255, 85, 72, 0);
}

100% {
box-shadow: 0 0 0 0 rgba(255, 85, 72, 0);
}
}

This is just the first type customization code..

I would be really thankful it if someone can help me not mess up things 😄

Best regards!

[stephen1999]

Hey @Barbieson,

I actually don't have theme.scss.liquid file.. I only have theme.liquid, don't know if that's the same thing...

Also, you wrote: ''2. To change the “Add to cart” button, paste the following code to the bottom of the file: '' - did you mean the code I commented..? because you didn't leave any code there 😄

[GemPages]

Hello @stephen1999 

You can put that CSS code in the theme.liquid but need the correct structure:
e.g: <style> add code here </style>

Hope my recommendation can work and support you!

Kind & Best regards!

GemPages Support Team.

[stephen1999]

Hey @GemPages , thank you!

Can you tell me if these two codes also work if I add them between <style> and </style>, or do I need more changes?

First code:

{
color: #fff;
font-size: 20px;
text-decoration: none;
background: #710cf2;
padding: 15px 30px;
border-radius: 10px;
transition: 0.3s all ease;
transform: scale(1);
animation: light 1.5s infinite alternate;
}

.product-form__cart-submit:hover
{
transform: scale(1.03);
}
@keyframes light {
0% {
-webkit-box-shadow: 0px 0px 20px 0px rgba(190,77,227,0);
-moz-box-shadow: 0px 0px 20px 0px rgba(190,77,227,0);
box-shadow: 0px 0px 20px 0px rgba(190,77,227,0);
}
100% {
-webkit-box-shadow: 0px 0px 20px 0px rgba(190,77,227,1);
-moz-box-shadow: 0px 0px 20px 0px rgba(190,77,227,1);
box-shadow: 0px 0px 20px 0px rgba(190,77,227,1);
}
}

Second code:

{
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
20%, 53%, 80%, 0%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
@keyframes bounce {
20%, 53%, 80%, 0%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}

Thank you in advance!

[GemPages]

You can add them the same way I did.
But you need to double-check the code.
There are 2 parts that are missing the styled object: