Many Shopify themes show the quantity selector above the Add to Cart button, which wastes space and looks outdated. This tutorial shows how to place them side-by-side using simple HTML + CSS edits that work on all Online Store 2.0 themes.

---

1️⃣ Step 1 — Locate the Product Form

Go to your theme editor:

1. Online Store → Themes
2. Click Edit Code
3. Open: sections/main-product.liquid

Search for the quantity selector using:

quantity

You will see something like:

{% render 'quantity-selector', product: product %}

---

2️⃣ Step 2 — Wrap Quantity + Add to Cart Inside a Flex Box

Find the Add to Cart button, usually:

<button type="submit" class="product-form__submit">Add to cart</button>

Now wrap both elements inside a custom wrapper:

<div class="qty-atc-wrapper">

  <div class="quantity">
    {% render 'quantity-selector', product: product %}
  </div>

  <button type="submit" class="product-form__submit">
    {{ 'products.product.add_to_cart' | t }}
  </button>

</div>

This puts both elements side by side automatically.

---

3️⃣ Step 3 — Add CSS to Style the Layout

Paste this CSS into your theme:

1. Open assets/base.css or theme.css
2. Scroll to the bottom
3. Paste:

.qty-atc-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

.qty-atc-wrapper .quantity {
  max-width: 120px;
}

@media (max-width: 768px) {
  .qty-atc-wrapper {
    gap: 10px;
  }

  .qty-atc-wrapper button,
  .qty-atc-wrapper input {
    flex: 1;
  }
}

---

4️⃣ Optional — Make the Add to Cart Button Autofill Space

Add this to make the ATC button wider than the quantity:

.qty-atc-wrapper button {
  flex: 1;
}

---

5️⃣ Optional — Round Quantity Input Edges

.qty-atc-wrapper input {
  border-radius: 6px;
  padding: 8px;
}

---

🎉 Final Result

Your product page will now have:

• ✔ Quantity selector next to Add to Cart button
• ✔ Cleaner layout with better UX
• ✔ Faster purchasing for customers
• ✔ Mobile-friendly side-by-side design

Want me to create another HTML tutorial? Just give me the title! 🚀