Move Add to Cart next to Quantity selector

TrendBlend · ‎06-26-2025

Hello, is it possible to move my ATC button next to my qty button like in the image below, URL: Lumière Bead Necklace – InteriorGlows.

BiDeal-Discount · ‎06-26-2025

Hi @TrendBlend

let try to add this Custom CSS code to your theme settings or file base.css in code:

.product-form__buttons .product-form__submit {
  margin-top: -66px;
  max-width: calc(100% - 150px);
  float: right;
}

the result will be:

- Helpful? Like & Accept solution! ☕ Coffee tips fuel my dedication.
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Contact me via WhatsApp

AiTrillion · ‎06-26-2025

Hi @TrendBlend ,

Basically, you can copy the below code and replace it with below code and it will work.

Code to replace

<label class="quantity__label form__label" for="Quantity-template--25538129461587__main">
Quantity
<span class="quantity__rules-cart hidden">

<div class="loading__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
<span>(<span class="quantity-cart">0</span> in cart)</span>
</span>
</label>
<div class="price-per-item__container">
<quantity-input class="quantity" data-url="/products/lumiere-bead-necklace" data-section="template--25538129461587__main">
<button class="quantity__button disabled" name="minus" type="button">
<span class="visually-hidden">Decrease quantity for Lumière Bead Necklace</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-minus" fill="none" viewBox="0 0 10 2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z" fill="currentColor">
</path></svg>

</button>
<input class="quantity__input" type="number" name="quantity" id="Quantity-template--25538129461587__main" data-cart-quantity="0" data-min="1" min="1" step="1" value="1" form="product-form-template--25538129461587__main">
<button class="quantity__button" name="plus" type="button">
<span class="visually-hidden">Increase quantity for Lumière Bead Necklace</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-plus" fill="none" viewBox="0 0 10 10">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor">
</path></svg>

</button>
</quantity-input></div>
<div class="quantity__rules caption" id="Quantity-Rules-template--25538129461587__main"></div></div>

<div><product-form class="product-form" data-hide-errors="false" data-section-id="template--25538129461587__main">
<div class="product-form__error-message-wrapper" role="alert" hidden="">
<svg aria-hidden="true" focusable="false" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"></circle>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"></circle>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"></path>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</path></svg>
<span class="product-form__error-message"></span>
</div><form method="post" action="/cart/add" id="product-form-template--25538129461587__main" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="id" value="51219750519123" class="product-variant-id"><div class="product-form__buttons"><button id="ProductSubmitButton-template--25538129461587__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary" aria-haspopup="dialog">
<span><span class="material-icons icon atc-icon" style="">shopping_cart</span>
<span class="atc-text">Add to cart</span></span>

<div class="pickup-availability-info">
<p class="caption-large">Couldn't load pickup availability</p>
<button class="pickup-availability-button link link--text underlined-link">
Refresh
</button>
</div>
</pickup-availability-preview>
</template>
</pickup-availability>

Code to replace

<div class="aaa-display-property" style="
    display: flex;
    justify-content: center;
    align-items: center;
">


    <div id="Quantity-Form-template--25538129461587__main" class="product-form__input product-form__quantity" style="
    flex: 30%;
">
                  
                  

                  <label class="quantity__label form__label" for="Quantity-template--25538129461587__main">
                    Quantity
                    <span class="quantity__rules-cart hidden">

<div class="loading__spinner hidden">
  <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
  </svg>
</div>
<span>(<span class="quantity-cart">0</span> in cart)</span>
                    </span>
                  </label>
                  <div class="price-per-item__container">
                    <quantity-input class="quantity" data-url="/products/lumiere-bead-necklace" data-section="template--25538129461587__main">
                      <button class="quantity__button disabled" name="minus" type="button">
                        <span class="visually-hidden">Decrease quantity for Lumière Bead Necklace</span>
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-minus" fill="none" viewBox="0 0 10 2">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z" fill="currentColor">
</path></svg>

                      </button>
                      <input class="quantity__input" type="number" name="quantity" id="Quantity-template--25538129461587__main" data-cart-quantity="0" data-min="1" min="1" step="1" value="1" form="product-form-template--25538129461587__main">
                      <button class="quantity__button" name="plus" type="button">
                        <span class="visually-hidden">Increase quantity for Lumière Bead Necklace</span>
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-plus" fill="none" viewBox="0 0 10 10">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor">
</path></svg>

                      </button>
                    </quantity-input></div>
                  <div class="quantity__rules caption" id="Quantity-Rules-template--25538129461587__main"></div></div>
    
<script>
  gtag('event', 'conversion_event_add_to_cart_1', {
    // <event_parameters>
  });
</script><div style="
    float: 70%;
    flex: 70%;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    /* margin: auto; */
    /* align-items: center; */
    margin-top: 20px;
"><product-form class="product-form" data-hide-errors="false" data-section-id="template--25538129461587__main" style="
    text-align: center;
    justify-content: center;
    margin: auto;
    align-items: center;
">
      <div class="product-form__error-message-wrapper" role="alert" hidden="">
        <svg aria-hidden="true" focusable="false" class="icon icon-error" viewBox="0 0 13 13">
          <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"></circle>
          <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"></circle>
          <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"></path>
          <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
        </path></svg>
        <span class="product-form__error-message"></span>
      </div><form method="post" action="/cart/add" id="product-form-template--25538129461587__main" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="id" value="51219750519123" class="product-variant-id"><div class="product-form__buttons"><button id="ProductSubmitButton-template--25538129461587__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary" aria-haspopup="dialog">
            <span><span class="material-icons icon atc-icon" style="">
shopping_cart
</span> <span>Add to cart</span></span>

<div class="loading__spinner hidden">
  <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
  </svg>
</div>
</button></div><input type="hidden" name="product-id" value="9966846214483"><input type="hidden" name="section-id" value="template--25538129461587__main"></form></product-form><link href="//interiorglows.com/cdn/shop/t/47/assets/component-pickup-availability.css?v=34645222959864780961748007399" rel="stylesheet" type="text/css" media="all">
<pickup-availability class="product__pickup-availabilities quick-add-hidden" data-root-url="/" data-variant-id="51219750519123" data-has-only-default-variant="false" data-product-page-color-scheme="gradient color-scheme-1">
      <template>
        <pickup-availability-preview class="pickup-availability-preview">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" focusable="false" class="icon icon-unavailable" viewBox="0 0 20 20">
  <path fill="#DE3618" stroke="#fff" d="M13.94 3.94L10 7.878l-3.94-3.94A1.499 1.499 0 103.94 6.06L7.88 10l-3.94 3.94a1.499 1.499 0 102.12 2.12L10 12.12l3.94 3.94a1.497 1.497 0 002.12 0 1.499 1.499 0 000-2.12L12.122 10l3.94-3.94a1.499 1.499 0 10-2.121-2.12z"></path>
</svg>

          <div class="pickup-availability-info">
            <p class="caption-large">Couldn't load pickup availability</p>
            <button class="pickup-availability-button link link--text underlined-link">
              Refresh
            </button>
          </div>
        </pickup-availability-preview>
      </template>
    </pickup-availability>

    <script src="//interiorglows.com/cdn/shop/t/47/assets/pickup-availability.js?v=78418059211521962961748007399" defer="defer"></script>
    <script src="//interiorglows.com/cdn/shop/t/47/assets/bundle-pricing.js?16506" defer="defer"></script></div></div>

If you stuck somewhere, feel free to reply or message me.

Sachin D | Shopify Growth Expert @ AiTrillion

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- 10+ Years of eCommerce experience.
- 1400+ Stores Designed on Shopify.
- All in One Marketing App on Shopify AiTrillion Marketing Automation
.
- 13+ Shopify Apps launched on app store.

tstrandz · ‎06-26-2025

No code needed. Just go into the Shopify theme settings, click pages then products and switch around the elements the way you like it