I dislike the appearance of my quantity selector & need something different.

Topic summary

A store owner is seeking help to improve their quantity selector’s appearance, which currently doesn’t encourage customers to add multiple items for bulk discounts.

The Problem:

  • The existing quantity selector (from a premium theme) looks unclear and doesn’t effectively promote adding more items
  • User wants a button-style selector that’s more intuitive and visually appealing

Solution Provided:
Terence identified that:

  • An app the user recently installed may be causing conflicts
  • The quantity section configuration is incorrect (using dropdown for options instead of quantity)
  • Custom CSS coding is needed for proper styling

Terence provided specific CSS code to fix the styling and instructed adding it to the theme’s custom.css file.

Current Status:

  • User cannot locate a custom.css file (only california.css exists in their premium theme)
  • Terence confirmed the code can be added to california.css instead
  • User reports still experiencing issues and has sent a direct message for further assistance

The discussion remains ongoing as the implementation hasn’t been successfully completed yet.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.

My website offers discounts on some products when you order any amount more than 1, but I really dislike the appearance of my quantity selector.

It is a premium theme, which has been great for other purposes, but I am clueless how to find solutions.

I want a simple quantity selector that encourages adding more. What I have now is almost like they have to enter their own quantity. Or they can hit that arrow button, but it’s not clear.

How do I fix this quantity selector to be something more button-like that encourages adding ++++ to add more sheets? Something that looks better with my theme?

Thanks!

1 Like

Hi!

It can be done manually with coding if you provide the website address.

Terence

The website is stellasstickers.com

Actually, the “Quantity” section is incorrect in the upper part. The “drop down” option is provided because it is actually an “option”. Its use is not necessary here. However, the “Quantity Button” below can be used, which also requires a nice css styling. I can do it for you if you want!

Yes, please. That looks like it is part of an app I downloaded yesterday to try to solve the problem. I’d appreciate any help from you. How can I get your assistance? I’m grateful.

If the problematic app is the culprit, I suggest you uninstall it. Issues often arise with free apps. Remember, style modifications always require manual coding. I’ve just corrected the issue on the product page for you. Of course, any desired style can be implemented!

The following code will do what you want. You can change the values as you like.

Navigate to the ‘Edit Code’ option in your theme settings, then search for “custom.css” in the search bar and add below codes.

.block.type-quantity_selector .quantity {

    display: none!important;

}

.custom_qty {

    flex-direction: column!important;

    justify-content: start !important;

    align-items: self-start!important;

}

.custom_qty .qty_label {

    font-size: 16px !important;

    color: #2f2a27 !important;

    font-family: unset !important;

}

.custom_qty_inner.custom-quantity {

    padding: 5px;

}

.qty_block.fully_rounded {

    box-shadow: none !important;

}

Terence, the only .css file I see is california.css. This premium theme has been difficult for me to change due to the way it’s organized and most files being .liquid or .json and being arranged differently.

You can add it to the bottom of the ‘california.css’ file without any issues. Fine-tuning options are often limited in premium themes. We provide manual coding services for most aspects to our clients.

Still having issues so sent you a message here.