Skip to main content

​
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 > Sticky Cart > Custom CSS, and paste the code below. 
/* Set your desired scale factor here */  
/* Recommended range: 1 (default) to 0.65 (smaller) */  
.upcart-sticky-widget {  
  transform: scale(0.55);  
}  
  
/* Scale up your quatity icon */  
/* Recommended range: 1 (default) to 1.25 (bigger) */  
.upcart-sticky-cart-quantity-icon {  
  transform: scale(calc(1.5));  
}

​
How to customize

  • Change transform to resize the button (e.g. 0.8, 0.6, 1.25 etc.)

​
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 :root to increase or decrease each element’s size
  • Tweak the left and top values 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. See Shopify Experts