Hi I don’t like the way the original quantity selector looks like on debutify and I wanted to know how I could customize it from this
to something like this
Topic summary
A user wants to customize the quantity selector on their Shopify store (using the Debut theme) to change its appearance from the default design to a rounded button style shown in a reference image.
Initial Solution Provided:
- A community helper provided CSS code to modify the quantity selector
- The code changes the plus/minus icons and adjusts the container width
- Instructions included: navigate to Online Store → Theme → Edit Code, then add the CSS to assets/theme.css
Current Status:
- The user has implemented the initial code but needs further customization
- Specifically requesting how to make the buttons rounded to match their reference image exactly
- The discussion remains open with the styling partially complete but not yet matching the desired rounded appearance
Key Details:
- Store URL: shwazzy.com (password-protected)
- Theme: Debut/Debutify
- Visual references provided showing current state vs. desired rounded button design
1 Like
Hello @itshector10
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?
Yes the website is shwazzy.com and the password is iasats. Thank you!
Hello @itshector10
Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.
.product-quantity {
max-width: fit-content!important;
}
.product-quantity__button--minus span.material-icons::before {
content: '-';
font-size: 18px;
color: #555;
font-weight: bold;
display: inline-block;
}
.product-quantity__button--minus span.material-icons {
font-size: 0;
}
.product-quantity__button--plus span.material-icons::before {
content: '+';
font-size: 18px;
color: #555;
font-weight: bold;
display: inline-block;
}
.product-quantity__button--plus span.material-icons {
font-size: 0;
}
