Changing the way the Add/Remove Quantity to Cart Works

[Alyx315]

Hello ❤️

My store is editing a newer 2.0 theme to try our best to match the older theme we used to have. We have run into a snag however.

Simply put, our current quantity/add to cart setup looks like this: 

and as you can imagine, it's kind of hard to easily add or remove quantity with that single combo button on left. We would rather it look more like this while keeping the dynamic buy buttons (such as gpay) below it. 

We are using the 2.0 Xtra theme. We have dabbled in main-product.liquid and found this code that seems to adjust the quantity area. We cannot figure out how to separate the buttons and make them their own line (above the buy button/submit to cart).

This is the current code.

 {%- form 'product', product, id: form_id, class: form_class, autocomplete: "off" -%}
                        <p class="submit m10 {% unless current_variant.available %}unavailable{% endunless %}" {{ block.shopify_attributes }}>
                            {%- if block.settings.show_amount_selection -%}
                                <span class="input-amount">
                        <label for="quantity" class="hidden">{{ 'product.form.quantity' | t }}</label>
                        <input type="number" id="quantity" name="quantity" data-link="#product_qty_sticky" value="1"
                               min="{{ current_variant.quantity_rule.min }}"
                               {% if current_variant.inventory_management == 'shopify' and current_variant.inventory_policy == 'deny' -%}
                                   max="{{ current_variant.inventory_quantity }}"
                               {% elsif current_variant.quantity_rule.max %}
                                   max="{{ current_variant.quantity_rule.max }}"
                               {% endif %}
                               {% if current_variant.quantity_rule.step %}step="{{ current_variant.quantity_rule.step }}"{% endif %}
                               required>
                              
                      </span>
                            {%- endif -%}
                            {%- if preorder -%}
                                <button type="submit" class="preorder-button">{{ block.settings.preorder_button_text }}</button>
                            {%- elsif current_variant.available -%}
                                <button type="submit" class="overlay-tertiary">{{ 'product.form.add_to_cart' | t }}</button>
                            {%- else -%}
                                <button type="submit" class="disabled overlay-tertiary">{{ 'product.form.not_in_stock' | t }}</button>
                            {%- endif -%}
                        
                        {%- if show_dynamic_buybutton -%}
                            <div class="overlay-quaternary {{ settings.button_height }} {% unless settings.button_style == 'inv' %}{{ settings.button_style }}{% endunless %} {% unless settings.button_rounded == 'slightly-rounded' %}{{ settings.button_rounded }}{% endunless %}">
                                {{ form | payment_button }}
                            </div>
                        {%- endif -%}
                        <ul class="f8pr-preorder l4al inline{% unless preorder and preorder_label %} m0{% endunless %}">
                            {%- if preorder and preorder_label -%}
                                <li class="{% if preorder_label_color_palette == 'regular_button' %}overlay-secondary
                                    {% elsif preorder_label_color_palette == 'buy_button' %}overlay-tertiary
                                    {% elsif preorder_label_color_palette == 'dynamic_buy_button' %}overlay-quaternary
                                    {% else %}palette-{{ preorder_label_color_palette }}{% endif %}
                                    text-center
                                ">
                                    <i aria-hidden="true" class="icon-check"></i>&nbsp;{{ preorder_label }}</span>
                                </li>
                                <input class="hidden" id="{{ input_label | handleize }}" type="text" name="properties[{{ input_label }}]" value="{{ preorder_label | strip_html }}">
                            {%- endif -%}
                        </ul>
                {%- endform -%}

We can't wait to fully move over to 2.0, any help is appreciated!

[Alyx315]

Just a follow-up, we're willing to look into paying someone to do this quick edit for us, just shoot a message please.