Make quantity selector next to add to shoppingcart

[Hausi]

Hi,
I want to place Quantity selector next to Add to Cart. I use Dawn theme for my store. 

My current store:

The View that I'm expecting:

Website: https://hausi.nl/ 

PW: theepa

[comercioservice]

@Hausi , hope you are well,

Please go to

1) Online store

2) Themes -> Edit theme

3) Layout

4) main-product.liquid

add this code in {%- form 'product'

                    <div class="product-form__buttons_counter">
                        <div class="quantity_selector_area product-form__input product-form__quantity" {{ block.shopify_attributes }}>
                         
                          
                          <quantity-input class="quantity">
                            <button class="quantity__button no-js-hidden" name="minus" type="button">
                              <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                              {% render 'icon-minus' %}
                            </button>
                            <input class="quantity__input"
                                type="number"
                                name="quantity"
                                id="Quantity-{{ section.id }}"
                                min="1"
                                value="1"
                                form="{{ product_form_id }}"
                              >
                            <button class="quantity__button no-js-hidden" name="plus" type="button">
                              <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                              {% render 'icon-plus' %}
                            </button>
                          </quantity-input>
                        </div>
                        <button
                          type="submit"
                          name="add"
                          class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                          {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                        >
                            <span>
                              {%- if product.selected_or_first_available_variant.available -%}
                                {{ 'products.product.add_to_cart' | t }}
                              {%- else -%}
                                {{ 'products.product.sold_out' | t }}
                              {%- endif -%}
                            </span>
                            <div class="loading-overlay__spinner hidden">
                              {% render 'icon-repeat' %}
                            </div>
                        </button>
                    </div> 
                    {%- if block.settings.show_dynamic_checkout -%}
                      {{ form | payment_button }}
                    {%- endif -%}​

result: 

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

[BSSCommerce-B2B · Accepted solution]

Hi @Hausi 

You should try following the instructions below

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file base.css and add this code snippet to the end of the file

.product-form__buttons .product-form__submit.button.button--full-width.button--primary {
    margin-top: 25px;
    height: 47px;
}

.product-form__buttons {
    display: flex;
    gap: 10px;
}
.product-form__buttons .product-form__input.product-form__quantity {
   flex: 0 0 0 !important;
}

Step 3: Search for the file global.js or theme.js and add this code snippet to the end of the file

(function() {
    const loop = setInterval(() => {
        var buttons = document.querySelector(".product-form__submit");
        var quantityInput = document.querySelector(".product-form__input.product-form__quantity");

        if (buttons && quantityInput) {
            buttons.parentNode.insertBefore(quantityInput, buttons);
            clearInterval(loop);
        }
    }, 100);
        
        setTimeout(() => {
                console.log("Interval cleared after 10 seconds");
                clearInterval(loop);
            }, 10000);
})();

Result

If it's helpful, please like and mark it as a solution, thank you

Have a nice day