⚠️ Important notice
This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide.
If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2.
We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.
Overview
Upcart’s sticky cart button can be resized and repositioned with custom CSS. This allows you to better match your store’s branding or user experience preferences across desktop and mobile devices.
There are two approaches available depending on how much control you want.
Option 1: Scaled resizing (simple setup)
This method uses a single scale factor to shrink or enlarge the button and icon proportionally. It’s the easiest way to adjust button size with minimal code.
Where to add this
Go to Upcart > Cart Editor > Settings > Custom CSS, and paste the code below.
:root {
/* Set your desired scale factor here */
/* Recommended range: 1 (default) to 0.65 (smaller) */
--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;
/* Adjust if needed when using scale below 0.65 */
top: 0px;
right: 0px;
transform: scale(calc(1 / var(--scale-factor)));
}How to customize
Change
--scale-factorto resize the button (e.g.0.8,0.6, etc.)If the quantity badge looks misaligned, increase or decrease the
topandrightvalues to offset it manually
Option 2: Pixel-specific resizing (advanced control)
This method allows you to control each element’s dimensions individually using px values. Use it when you want precise adjustments that don’t rely on scale.
: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);
}How to customize
Adjust the variables in
:rootto increase or decrease each element’s sizeTweak the
leftandtopvalues inside the selectors to visually center the icon and badge
Need help?
If you’re unsure which method is right for you or need help writing custom CSS, we recommend reaching out to a Shopify Expert. Upcart support does not assist with CSS implementation directly.