Sticky add to cart on mobile
-
Hi Team,
Could you please provide css code to optimize the style design of Sticky add to cart on mobile,
Can you:
1. Move the sticky row up a little bit on the mobile device instead of bottom, like sample picture,
2. Separate the quantity box and add to cart button on mobile device, increase the quantity box width, leave space between qty box and button for better look. like sample
3. Add a background overlay under the row, and design up side edge with overlay effect like sample to highlight sticky row on mobile
By this way, the sticky row will be more better look and increase order conversion.
Thank you!
Attachments:
You must be
logged in to view attached files.
Hello,
Try to use the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile. Change the code as per your requirements.
/* 1. Lift sticky container, add white background, and top overlay shadow */
.wd-sticky-btn {
bottom: 12px !important;
background-color: #ffffff !important;
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15) !important;
border-radius: 12px 12px 0 0 !important;
padding: 10px 15px !important;
}
/* 2. Format form to flex layout */
.wd-sticky-btn form.cart {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
}
/* Force quantity box container to display with light gray border/background */
.wd-sticky-btn form.cart .quantity {
display: flex !important;
flex: 0 0 110px !important;
margin: 0 !important;
height: 42px !important;
border: 1px solid #d0d0d0 !important;
border-radius: 4px !important;
overflow: hidden !important;
background-color: #f9f9f9 !important;
}
/* Fix text color, borders, and backgrounds for number input */
.wd-sticky-btn form.cart .quantity input[type="number"] {
width: 40px !important;
height: 100% !important;
background: transparent !important;
border: none !important;
color: #333333 !important; /* Fix white text */
font-weight: 600 !important;
}
/* Fix text color and layout for plus/minus buttons */
.wd-sticky-btn form.cart .quantity :is(.minus, .plus) {
width: 35px !important;
height: 100% !important;
background: transparent !important;
border: none !important;
color: #333333 !important; /* Fix white text/icon */
font-size: 16px !important;
font-weight: bold !important;
}
Best Regards
Hi Team,
Thank you for your css code, I did my best to custom my style, and they are all look good. Only few not work to us, can you check please?
1. In your css code, it still can’t saparate the quantity box and add to cart button with spacing in the middle, could you further check
2. I try to set quantity box background color to be white #FFFFFF, but not works, kindly check
Thank you!
Attachments:
You must be
logged in to view attached files.
Hello,
Try to use the below custom css code in Theme Settings > Custom CSS > Custom CSS for mobile.
html body .wd-sticky-btn .wd-sticky-btn-cart {
margin-inline: 0 !important;
width: 100% !important;
}
html body .wd-sticky-btn form.cart > * {
flex: 0 0 auto !important;
}
html body .wd-sticky-btn form.cart .quantity {
display: flex !important;
flex: 0 0 110px !important;
width: 100px !important;
max-width: 110px !important;
height: 42px !important;
margin-right: 12px !important; /* HARD FORCED GAP BETWEEN QTY & BUTTON */
background-color: #ffffff !important;
border: 1px solid #d0d0d0 !important;
border-radius: 6px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html body .wd-sticky-btn form.cart .quantity input[type="number"],
html body .wd-sticky-btn form.cart .quantity .minus,
html body .wd-sticky-btn form.cart .quantity .plus {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
background-color: #ffffff !important;
color: #333333 !important;
border: none !important;
box-shadow: none !important;
}
html body .wd-sticky-btn form.cart .quantity input[type="number"] {
width: 40px !important;
font-weight: 600 !important;
text-align: center !important;
}
html body .wd-sticky-btn form.cart .quantity .minus,
html body .wd-sticky-btn form.cart .quantity .plus {
width: 35px !important;
font-size: 16px !important;
cursor: pointer !important;
}
html body .wd-sticky-btn form.cart :is(.single_add_to_cart_button, .wd-sticky-add-to-cart) {
flex: 1 1 auto !important;
width: auto !important;
height: 42px !important;
border-radius: 6px !important; /* Re-applies rounded corners */
margin: 0 !important;
}
Best Regards
Hi,
The updated css code is not working, can you check please?
Hello,
You have not added the code correctly. I have added the above code in Theme Settings > Custom CSS > Custom CSS for mobile and it is working fine. Please check back your site and check the issue.
Best Regards
Hi,
Sorry for any mistake by my side.
In your new css code, it still does not work to provide gap between quantity box and add to cart button . please further check.
Attachments:
You must be
logged in to view attached files.
Hi,
For more clear about the gap between the qty box and button, please check the picture. please apply qty box background color to be white.
Thank you
Chen
Attachments:
You must be
logged in to view attached files.
Hello,
Your issue has been resolved. I have changed the custom css on your site and it is working fine.
See Screenshot for clarification: https://postimg.cc/mcwNqTct
Best Regards
Hi,
Thank you very much for the optimization.
One last thing, can you use css code to move up the chat icon CRISP and make it samller, cause it covers on the button of add to cart . this is last issue for this ticket.
Much Appreciate!
Chen
Attachments:
You must be
logged in to view attached files.
Hello,
Try to use the below custom css code in Theme Settings > Custom CSS > Custom CSS for mobile:
.crisp-client {
--crisp-customization-mobile-button-vertical: 80px !important;
}
Best Regards
.
