Introduction
This document provides a detailed guide on how to customize the appearance of the UpCart sticky widget on your Shopify store. By following the instructions below, store owners can modify the size and positioning of the sticky cart icon and quantity bubble to better align with the visual branding of their website.
The guide is divided into two methods: the "New Way" which offers a more straightforward approach with minimal manual coding, and the "Old Way" which provides more precise control for custom positioning but requires more coding.
Usage
These customization options are intended for store owners or developers with basic knowledge of CSS. By implementing these changes, you can ensure the UpCart sticky widget matches the overall design of your site, enhancing user experience and maintaining brand consistency.
Example Images
Before
After
Code
New Way
The new method requires fewer manual code adjustments and pixel changes, making it simpler to implement while being somewhat limited in scalability.
Changes to Make
Adjust the size in :root to fit your desired size.
If you need to offset the bubble more when scaling under 0.65, add manual pixel offset where the comments indicate.
:root {
/* Set your desired scale factor here */
/* Best between 1 - .65 */
--scale-factor: 0.65;
}
.upcart-sticky-widget {
display: flex;
justify-content: center;
align-items: center;
transform: scale(var(--scale-factor));
}
.upcart-sticky-cart-quantity-icon {
position: absolute;
/* Tweak this with negative numbers if below .65 */
top: 0px;
/* Tweak this with negative numbers if below .65 */
right: 0px;
transform: scale(calc(1 / var(--scale-factor)));
}
Old Way
For those who need more control over the positioning and size of elements, the old method offers more parameters to adjust.
CSS
Changes to Make
Adjust the sizes in :root to fit your desired size. Additionally, tweak the left and top properties to center the elements properly.
:root {
--widgetMainSize: 40px;
--widgetCartIconSize: 30px;
--widgetQuantityIconSize: 20px;
}
.upcart-sticky-widget {
height: var(--widgetMainSize) !important;
width: var(--widgetMainSize) !important;
}
[class*="styles_CartIcon"] {
left: -2px !important;
top: 4px !important;
}
.upcart-sticky-cart-quantity-icon {
height: var(--widgetQuantityIconSize) !important;
width: var(--widgetQuantityIconSize) !important;
top: -5px !important;
left: 25px !important;
z-index: 100 !important;
}
.upcart-sticky-widget svg {
display: block !important;
height: var(--widgetCartIconSize);
}
Conclusion
By following the steps outlined in this document, you can customize the UpCart sticky widget to better suit your store's theme and enhance the shopping experience for your customers.
Still Need Help?
If you need any assistance with customizations, we recommend consulting with a Shopify Expert about adding HTML, CSS, and even JavaScript to your cart drawer.