Make quantity selector next to add to shoppingcart

Solved

Make quantity selector next to add to shoppingcart

Hausi
Tourist
18 0 1

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

My current store:

Hausi_0-1719147445962.png

The View that I'm expecting:

 

Hausi_1-1719147484242.png

 

Website: https://hausi.nl/ 

PW: theepa

Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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

BSSCommerceB2B_0-1719148996948.png

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

Have a nice day

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

round
Shopify Partner
113 18 10

@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: 

round_0-1719148818169.png

 

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
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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

BSSCommerceB2B_0-1719148996948.png

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

Have a nice day

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency