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.