this sticky add to cart code is not adding to cart
.sticky-atc-unique-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.sticky-atc-unique-container {
--bg-color: {{ section.settings.background_color | default: '#ffffff' }};
--text-color: {{ section.settings.text_color | default: '#000000' }};
--accent-color: {{ section.settings.accent_color | default: '#000000' }};
--button-text-color: {{ section.settings.button_text_color | default: '#ffffff' }};
--border-color: {{ section.settings.border_color | default: '#e0e0e0' }};
--success-color: #4caf50;
--error-color: #f44336;
height: 90px;
width: 100%;
background: var(--bg-color);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
padding: 12px 5%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: -100px;
left: 0;
z-index: 999;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-top: 1px solid var(--border-color);
color: var(--text-color);
}
.sticky-atc-unique-container.visible {
bottom: 0;
}
.sticky-atc-unique-container .product-image {
flex: 0 0 auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.sticky-atc-unique-container .product-image img {
object-fit: cover;
object-position: center;
height: 65px;
width: 65px;
display: block;
}
.sticky-atc-unique-container .product-details {
flex: 1;
padding: 0 15px;
min-width: 0;
}
.sticky-atc-unique-container .product-title {
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sticky-atc-unique-container .product-price {
font-size: 16px;
font-weight: 700;
color: var(--accent-color);
}
.sticky-atc-unique-container .quantity-selector {
display: flex;
align-items: center;
margin-right: 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
background: var(--bg-color);
}
.sticky-atc-unique-container .quantity-btn {
width: 36px;
height: 36px;
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-color);
font-size: 18px;
transition: background-color 0.2s;
}
.sticky-atc-unique-container .quantity-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.sticky-atc-unique-container .atc-input {
width: 42px;
height: 36px;
border: none;
text-align: center;
font-size: 16px;
background: transparent;
color: var(--text-color);
-moz-appearance: textfield;
}
.sticky-atc-unique-container .atc-input::-webkit-outer-spin-button,
.sticky-atc-unique-container .atc-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sticky-atc-unique-container .atc-button {
height: 42px;
min-width: 160px;
border-radius: 8px;
background: var(--accent-color);
color: var(--button-text-color);
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.sticky-atc-unique-container .atc-button:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sticky-atc-unique-container .atc-button:active {
transform: translateY(0);
}
.sticky-atc-unique-container .loading-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 0.8s ease infinite;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.sticky-atc-unique-container .post-submit-message {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px;
}
.sticky-atc-unique-container .message-text {
margin-right: 15px;
font-weight: 500;
}
.sticky-atc-unique-container .success-message {
color: var(--success-color);
}
.sticky-atc-unique-container .error-message {
color: var(--error-color);
}
.sticky-atc-unique-container .successful-button {
height: 36px;
padding: 0 16px;
border-radius: 6px;
background: var(--accent-color);
color: var(--button-text-color);
border: none;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
}
.sticky-atc-unique-container .successful-button:hover {
opacity: 0.9;
}
/* Mobile styles */
@media screen and (max-width: 768px) {
.sticky-atc-unique-container {
padding: 10px 4%;
height: 80px;
}
.sticky-atc-unique-container .product-image {
display: none;
}
.sticky-atc-unique-container .product-details {
padding: 0 10px;
}
.sticky-atc-unique-container .product-title {
font-size: 13px;
}
.sticky-atc-unique-container .product-price {
font-size: 15px;
}
.sticky-atc-unique-container .quantity-selector {
margin-right: 10px;
}
.sticky-atc-unique-container .quantity-btn {
width: 32px;
height: 32px;
}
.sticky-atc-unique-container .atc-input {
width: 38px;
height: 32px;
}
.sticky-atc-unique-container .atc-button {
height: 38px;
min-width: 120px;
font-size: 13px;
padding: 0 15px;
}
.sticky-atc-unique-container .post-submit-message {
flex-direction: column;
text-align: center;
}
.sticky-atc-unique-container .message-text {
margin-right: 0;
margin-bottom: 10px;
}
}
/* Very small screens */
@media screen and (max-width: 480px) {
.sticky-atc-unique-container .quantity-selector {
display: none;
}
.sticky-atc-unique-container .product-details {
max-width: 50%;
}
}
{{ product | image_url: width: 200 | image_tag }}
<div class="product-title">{{ product.title }}</div>
<div class="product-price">{{ product.price | money }}</div>
<button type="button" class="quantity-btn atc-minus" aria-label="Decrease quantity">
<span aria-hidden="true">−</span>
</button>
<input
class="atc-input"
type="number"
id="sticky_quantity"
name="quantity"
value="1"
min="1"
pattern="\[0-9\]\*"
>
<button type="button" class="quantity-btn atc-plus" aria-label="Increase quantity">
<span aria-hidden="true">+</span>
</button>
Add To Cart
{% schema %}
{
“name”: “Sticky Add To Cart”,
“settings”: [
{
"type": "number",
"id": "show_atc_threshold",
"label": "Scroll threshold for ATC to appear",
"default": 300,
"info": "How far to scroll (in pixels) before the ATC bar appears"
},
{
"type": "header",
"content": "Color Customization"
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "color",
"id": "accent_color",
"label": "Accent color",
"default": "#000000",
"info": "Used for price and buttons"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text color",
"default": "#ffffff"
},
{
"type": "color",
"id": "border_color",
"label": "Border color",
"default": "#e0e0e0"
}
],
“presets”: [
{
"name": "Sticky Add To Cart",
"category": "Product"
}
]
}
{% endschema %}