Display Quantity & Variant Selector On Same Line (Flow Queenstown Theme)

Store Design
, ,
1

Hello everyone,

This is Jocoya with Treats for Chickens.

Excited since this is my first time writing to the community. Anywho,…

Some info:

Url: https://treatsforchickens.com/

Theme: Flow Queenstown

What is the most effective approach/code to getting the Quantity & Variant Select on the same line for all devices (mobile, desktop, etc)?

And what location(s) should I place the code(s)?

Layout: theme.liquid

Section: template–product.liquid

Assets: section-products-block.min.css

Current view (mobile version):

Jocoya_0-1678384009058.png
Jocoya_0-1678384009058.png249×554 13.4 KB

End Result (mobile version):

Jocoya_1-1678384212817.png
Jocoya_1-1678384212817.png286×453 13.4 KB

Thank you for your tips!

2

Hey, @Jocoya !

To get the quantity and variant select on the same line for all devices using the Flow Queenstown theme on Shopify, you can try adding the following CSS code in your theme’s CSS file:

.product-form__item--quantity,
.product-form__item--variant-selector {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

This code will make both the quantity and variant select elements display inline, align them vertically in the middle, and add a small margin to the right.

You can add this code to your theme’s section-products-block.min.css file or in the Assets folder. Alternatively, you can add the code to the end of the theme.liquid file, just before the closing </body> tag.

Note: Before making any changes to your theme’s files, it’s recommended to create a backup of your theme to avoid any loss of data.

Let me know if this works!

3

@Ignelis

First off, thank you, Ignelis, for assisting me! Appreciated.

On our copied theme, I applied the code:

.product-form__item–quantity,
.product-form__item–variant-selector {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

in

section-products-block.min.css

layout-theme.liquid before

Current code in section-products-block.min.css:

However, no changes were visible. Chicken poo~

Do I need to make adjustments on margin-right’s px size or apply the code elsewhere? Or rid the wrapper style to nowrap? Or include swatches in the coding (product-form-swatch)?

Thank you again, Ignelis.