Styling Buttons to match quick add to cart

Store Design
, ,

Topic summary

A user seeks help styling quantity buttons to match their add-to-cart buttons on their store.

Initial Problem:

  • Wants quantity buttons styled consistently with existing add-to-cart button design
  • Includes a screenshot showing the desired appearance

Solution Provided:

Step 1: Navigate to Store Online → Theme → Edit Code → Assets/quick-add.css

Step 2: Add CSS code to center button and round edges:

body .quick-add .quantity { width: 100%; }
body .quick-add .quantity::after { border-radius: 10px; }

Step 3: Customize border color and width with additional CSS:

body .quick-add .quantity::after {
  box-shadow: 0 0 3px #00ff00;
  /* Update 3px to desired width and #00ff00 to desired color */
}

Outcome:

  • Solution successfully implemented
  • User confirmed the styling now works as intended
Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hello I just need some help styling my quantity buttons to match my add to cart buttons, and help would be greatly appreciated. I am just bad with using css. Below is a picture of what I am trying to achieve.

Screen Shot 2023-01-18 at 11.31.10 AM.png
Screen Shot 2023-01-18 at 11.31.10 AM.png716×818 404 KB

2

Hi @BB_Tech

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/quick-add.css
  3. Add code below to bottom of file
body .quick-add .quantity {
	width: 100%;
}
body .quick-add .quantity::after {
	border-radius: 10px;
}
3

That worked for centering the button and rounding the edges, would you know how to change the color and the border width?

4

Hi @BB_Tech

May I suggest code below

body .quick-add .quantity {
	width: 100%;
}
body .quick-add .quantity::after {
/* Update 3px to your number, and update #00ff00 to your color */
box-shadow: 0 0 0 3px #00ff00;
border-radius: 10px;
}
5

That Worked great, thanks again