Shopify themes, liquid, logos, and UX
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!
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 😄
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.
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!
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:
User | RANK |
---|---|
155 | |
127 | |
80 | |
73 | |
69 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023