Display Variant picker and quantity selector on the same line horizontally (Sense Theme)

Technical Q&A
, , , ,

Topic summary

Goal: Make the variant picker and quantity selector appear side‑by‑side on one line, match the “Add to cart” width, include spacing, and work responsively across all devices (Sense theme).

Steps taken: A helper requested the product URL; the store link was shared. CSS was provided (added to base.css/style.css/theme.css) targeting specific template IDs, using absolute positioning for the variant selects and fixed widths for quantity. A screenshot of the result was posted.

Issues reported:

  • Visual glitch on initial page load (layout shifts).
  • CSS applies only to one product template due to hardcoded template ID; not a global solution.
  • Quantity selector should be as small as possible.
  • The label/text above the quantity should be left‑aligned (consistent with the “Color” label).

Status: No finalized, global, responsive solution yet. OP asked for a further look.

Notes: Screenshots are central to understanding the layout behavior. Technical context includes Shopify product form elements (variant picker, quantity input) and the use of absolute positioning and template‑specific selectors, which may cause non‑global behavior and load-time shifts.

Summarized with AI on January 17. AI used: gpt-5.
1

Hi, I would like to make the variant picker and quantity selector on the same line horizontally, both to be as long as the “ADD TO CART” button, but to have a bit of margin between them. I would like to be like this on all screens and devices, so laptops, tablets, phones and everything in between and beyond. The best I could point out would be as in the screenshot below:

123123.jpg
123123.jpg383×486 12.4 KB

Many Thanks.

1 Like
2

Hi @Jeremayah

Can I give a try? Would you mind to share your Store URL website? with password if its protected. Thanks!

1 Like
3

Hi, yes it’s https://nufftastic.com/products/glowball%E2%84%A2

1 Like
4

Thank you, try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#Quantity-Form-template--21264904388917__main {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
quantity-input.quantity {
    width: 18rem;
}
variant-selects#variant-selects-template--21264904388917__main {
    position: absolute;
    top: 7.7%;
    width: 60%;
}
1 Like
5

Thanks for this, but it does this when loading page:

asaassa.png
asaassa.png623×275 15.6 KB

Also, this is only applied to one product template and not a global setting.

I would also like the quantity selector to be as small as possible, and the text above it to be aligned left (as the text “color” for variant is).

Many thanks again.

6

You think you could have a look at it? Thanks.