Display Variant Selector And Quantity On Same Line (Dawn Theme)

Store Design
, , ,
1

I would like the two selectors to be half and half, to fit the same size as the ‘buy now’ button, on the same line next to eachother, like I’ve drawn on the attached image.

I would like it to be viewed like this on all devices. (e.g. desktop, mobile, tablet..)

URL: https://ortho-cushion.com/products/back-relief-lumbar-pillow

Thank you

BraxtonEcom_0-1677846284614.png
BraxtonEcom_0-1677846284614.png999×531 118 KB

2

@BraxtonEcom

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
variant-selects#variant-selects-template--16042998333606__main {
    float: left;
    width: 49.5%;
}
.product-form__quantity {
    float: right;
    width: 49.5%;
    min-width: unset;
}
.product-form__quantity + div {
    clear: both;
}
.product-form__buttons {
    max-width: 100%;
}
quantity-input.quantity {
    width: 100%;
}
3

Hi @BraxtonEcom ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

variant-selects#variant-selects-template--16042998333606__main {
    float: left;
    width: 49.5%;
}
.product-form__quantity {
    float: right;
    width: 49.5%;
    min-width: unset;
}
.product-form__quantity + div {
    clear: both;
}
.product-form__buttons {
    max-width: 100%;
}
quantity-input.quantity {
    width: 100%;
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
4

Thank you so much :))