How can I modify the design of quantity buttons on my product page?

Store Design
, ,
1

Hey there,

right now my product page has a seleciton of 4 different quantities, that the customer can choose from:

timotheusb1_0-1688648890413.png
timotheusb1_0-1688648890413.png803×844 48.4 KB

my site: https://www.bamboostar.de/products/bamboostar-bambus-socken-3er-pack-uber-den-knochel-socken?variant=44550504972552

I think the buttons are too small and it is a bit too hard to see what the actual promise is. My target audience is older.

I would like to change the design tolook like here, but with 4 variants and the same rounding of the buttons as my other buttons above.

timotheusb1_1-1688648960164.png
timotheusb1_1-1688648960164.png713×545 24.4 KB

site of reference:

Does anyone know how I can change the design?

I am using debut theme and I am thankful for any help here really!

Thank you!

2

Hi @timotheusb1 ,

I checked it and don’t see it, have you tried to enable it?

3

Hi @namphan ,

sorry I had selected the wrong Theme.

Now it is visible

4

Hi @timotheusb1 ,

I checked and it still doesn’t show

Screenshot.png
Screenshot.png510×315 16 KB

5

@namphan I am so sorry, something went wrong.

Now it works!

6

Hi @timotheusb1 ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.radio.qb-quantity.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.radio.qb-quantity.qb-quantity-range {
    border: 1px solid #1c1c1c;
    padding: 10px;
	width: 100%;
    flex: 0 0 30%;
    min-height: auto;
}
.radio.qb-quantity.qb-quantity-range label {
    min-height: 35px;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}
.radio.qb-quantity.qb-quantity-range label::after {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}
.radio.qb-quantity.qb-quantity-range .qb-price {
	border-top: 1px solid #1c1c1c;
}

Hope it helps!

7

Hi @namphan , thank you very much for the description & help.

This is how it looks now:

timotheusb1_1-1688657931275.png
timotheusb1_1-1688657931275.png665×1236 45.4 KB

Dou you have an idea how we could adjust the styling, that:

  1. All 4 quantity options are horizontally next to each other, just like with the color variant?
  2. The deal (10,20,30% off) is visible and easy to understand for the customer
  3. All of this is applicable to mobile view

Thankful for the help and any suggestions!

Tim