Align Quantity Selector on Product Page

Store Design
, , , , ,
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!