Add to cart customizations – Shopify

Add to cart customizations – Shopify

  • No Bulky Libraries Used
  • 3-Days Return Policy
  • Easy to use

Product Description

Change the Height and Color:
CSS
.product-form__submit {
height: 60px; 
background-color:black; 
color:white; 
}
Add cart icon :
buy-buttons.liquid
HTML
<img class="before-cart-icon-atc" 
src="https://cdn.shopify.com/s/files/1/0248/4368/1826/files/download.png?v=1684161786" 
style="width: 14px; margin-right: 10px;" >
Shake Animation
CSS
.product-form__submit {
height: 60px; 
animation: shake-with-pause 3s infinite; } 
@keyframes shake-with-pause 
{ 
0% {transform: translateX(0);}  5% {transform: translateX(-5px);} 
10% {transform: translateX(5px);}  15% {transform: translateX(-5px);} 
20% {transform: translateX(5px);} 25% {transform: translateX(-5px);} 
30% {transform: translateX(5px);} 35% {transform: translateX(-5px);} 
40% {transform: translateX(5px);} 50% {transform: translateX(0); } 
100% {transform: translateX(0);} }
Pulse animation
CSS
 .product-form__submit{ 
height: 60px; animation: 
pulse-with-intensity 3s infinite;} 
@keyframes pulse-with-intensity { 0% {transform: scale(1);} 
10% {transform: scale(1.1);} 20% {transform: scale(1);} 
30% {transform: scale(1.1);} 40% {transform: scale(1);} 
50% {transform: scale(1.1);} 60% {transform: scale(1);} 
70% {transform: scale(1.1);} 80% {transform: scale(1);} 
100% {transform: scale(1); } }
Shine animation
CSS
.product-form__submit:after {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 50%;
height: 100%;
background: #ffffff4d;
opacity: 0;
transform: skew(-30deg);
animation: shine 7s infinite;}@keyframes shine {
0% {left: -50%;opacity: 0;}50% {left: 150%;
opacity: 1;}
100% {left: 150%; 
opacity: 0; }}
.product-form__submit {
position: relative;
overflow: hidden;
}
Buy Now Button Styling
CSS
.shopify-payment-button__button--unbranded{ 
height: 60px!important; background-color:green!important; 
color:white; }

Reviews (0)

Reviews

There are no reviews yet

Add a review
Add to cart customizations – Shopify Add to cart customizations – Shopify
Rating*
0/5
* Rating is required
Your review
* Review is required
Name
* Name is required
Add photos or video to your review

Related products