Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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> {{ 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!
Just a follow-up, we're willing to look into paying someone to do this quick edit for us, just shoot a message please.
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025