Introduction
This guide explains how to customize the appearance of the UpCart sticky widget on your Shopify store, including its size and position to better match your branding.
It covers two methods:
These customization options are designed for store owners or developers with basic CSS knowledge. Applying these changes helps align the UpCart sticky widget with your site’s design, improving user experience and maintaining brand consistency.
Example Images
Before
After
Code
New (Preferred) way
The new method is easier to implement, requiring minimal manual code and pixel adjustments. However, it offers less flexibility for advanced customization.
Add the following code under Sticky Cart → CSS:
Changes to Make
Adjust the size in :root to fit your desired size.
This is done on the line 4 right after --scale-factor:
If you need to offset the bubble more when scaling under 0.65, add manual pixel offset where the comments indicate.
This is done on lines 17 and 19 after top: and right:, you will need to change the 0 to a desired additional pixel distance on the indicated side.
: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 greater control over element positioning and sizing, the old method provides more adjustable parameters.
Changes to Make
Adjust the px values 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);
}
Still Need Help?
If you need help with customizations, we recommend reaching out to a Shopify Expert for assistance with adding HTML, CSS, or JavaScript to your cart drawer.