Align Quantity Selector on Product Page

Store Design
, , , , ,

Topic summary

A user is experiencing misalignment of the quantity selector on product pages using the Grid theme. The selector appears pushed far to the right, aligning with variant dropdowns instead of staying close to the “Quantity” label.

Visual Issue:

  • Screenshots show the quantity selector displaced horizontally when variant selectors are present
  • Should align vertically with the label, similar to products without variants

Proposed Solutions:

  1. Section-level fix: Add CSS to the section’s “Custom CSS” area:

    • Use display: flex and flex-wrap: wrap on .product-options

  2. Theme-level fix: Insert CSS in theme.liquid before </body> tag

  3. Comprehensive CSS approach: Modify base.css or section-product-form.css with:

    • Flexbox properties for .product-form__buttons and .product-form__quantity
    • Alignment adjustments to prevent variant pickers from breaking layout
    • Alternative vertical-align approach if flexbox doesn’t work

One responder also suggested a drag-and-drop app (Easy Edits) as an alternative to manual CSS editing. The discussion remains open pending confirmation of which solution works.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

The alignment of my quantity selector is off - here are a couple of examples:

https://www.lycettedesigns.com/collections/project-bags/products/palm-beach-ndlpt-boat-tote-natural

https://www.lycettedesigns.com/products/lycette-logo-vinyl-project-bag

It seems to happen any time I have a variant selector on the page. Is there custom css I can apply to this theme template for these products to make it look more normal?

2 Likes
2

You can see the quantity selector way out to to the right. It looks like it is aligning with the end of the variants, not up against where it says “Quantity”

LycetteGreg_0-1750301969933.png
LycetteGreg_0-1750301969933.png1616Ă—820 118 KB

It should look more like this:

LycetteGreg_1-1750302107407.png
LycetteGreg_1-1750302107407.png778Ă—360 6.1 KB

The theme is called Grid

3

Try this in section’s “Custom CSS”:

.product-options {
  display: flex;
  flex-wrap: wrap;
}
4

Mustafa_Ali_0-1750314255317.png
Mustafa_Ali_0-1750314255317.png1280Ă—579 216 KB

hey @LycetteGreg dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

5

Hey there!

I can see the quantity selector alignment issue on your product pages. This is a common problem when variant selectors affect the layout. Here’s how to fix it:

Solution: CSS to align quantity selector

  1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
  2. Find assets/base.css or assets/section-product-form.css
  3. Add this CSS:
/* Fix quantity selector alignment */
.product-form__buttons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-form__quantity {
  display: flex;
  align-items: center;
}

.quantity {
  display: flex;
  align-items: center;
  margin: 0;
}

/* Ensure variant picker doesn't break layout */
.product-form__input {
  margin-bottom: 15px;
}

.product-form__input:last-child {
  margin-bottom: 0;
}

If that doesn’t work, try this more specific approach:

.product-form .product-form__buttons .quantity {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

.product-form__cart-submit {
  vertical-align: middle;
}

This should align your quantity selector properly with the add to cart button, regardless of variant selectors above.

Alternative: I actually built Easy Edits that lets you click and drag elements into perfect alignment without hunting for CSS selectors. Great for fixing layout issues like this!

Try the CSS and let me know if it fixes the alignment!