luct4u
May 17, 2024, 11:03am
1
hey guys,
added a sticky cart on my home page.
can someone pls help?
the code of the sticky is the following:
{% schema %}
#sticky-cart-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: #f9f9f9;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
border-top: 1px solid #ccc;
padding: 10px 20px;
transition: opacity 1s ease-out;
}
#sticky-cart-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
#sticky-cart-product {
display: flex;
align-items: center;
margin-bottom: 10px;
}
#product-image {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 10px;
}
#product-details {
display: flex;
flex-direction: column;
}
#product-title {
font-size: 16px;
margin: 0;
}
#product-reviews {
color: #f0c14b;
margin: 5px 0;
}
#product-price {
font-size: 14px;
}
#price {
color: #b12704;
font-weight: bold;
}
#compare-price {
color: #565959;
text-decoration: line-through;
margin-left: 5px;
}
#sticky-cart-selectors {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 10px;
}
#product-select, #variant-select, #quantity-input, #sticky-add-to-cart {
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
color: #333;
}
#quantity-container {
display: flex;
align-items: center;
}
#quantity-minus, #quantity-plus {
background-color: #ddd;
border: none;
padding: 10px;
cursor: pointer;
font-size: 16px;
color: #333;
}
#quantity-minus:hover, #quantity-plus:hover {
background-color: #ccc;
}
#quantity-input {
text-align: center;
padding: 10px;
width: 60px;
margin: 0 5px;
background-color: #fff;
color: #333;
}
#sticky-add-to-cart {
background-color: #ff0000;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
width: 100%;
}
#sticky-add-to-cart:hover {
background-color: #cc0000;
}
.hidden {
opacity: 0;
pointer-events: none;
}
@media (min-width: 768px) {
#sticky-cart-content {
flex-direction: row;
}
#sticky-cart-selectors {
flex-direction: row;
margin-bottom: 0;
}
#product-select, #variant-select, #quantity-container {
margin-right: 10px;
margin-bottom: 0;
}
}
Hi @luct4u !
Is your sticky card made by theme coding only or are you using an application for this feature? If you want an easier route, I highly suggest that you use a Sticky Add to Carts application instead.