Minimal theme: Quantity selector and Add to Cart button on same line

Solved
New Member
14 0 0

I see many similar threads, which are all about a year old. I would like the quantity selector and add to cart button to be on same line and just cant figure it out. I have tried examples on the following topics (which did not work):

 

https://community.shopify.com/c/Shopify-Design/Align-Add-To-Cart-button-and-Quantity-on-the-same-lin...

 

https://community.shopify.com/c/-/-/m-p/322133

 

https://community.shopify.com/c/Shopify-Discussion/Align-quanity-box-and-add-to-cart-on-the-same-quo...

 

https://community.shopify.com/c/Shopify-Design/Minimal-Theme-Color-Quantity-Size-on-the-same-line/m-...

 

 

 

Here is my code I am trying to work with:

 

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1" style="width:50px; height:25px" />
<input type="submit" value="Add to cart" class="btn" style="width:100px"; />

 

Here is a screenshot of the areas:

 

screen2.jpg

0 Likes

Success.

Shopify Partner
1648 277 344

Change you qty code to bellow:

 

<input min="1" type="number" id="quantity" name="quantity" value="1" style="width:50px; height:25px; display: inline-block;" />

Note: Add display: inline-block; in style of qty, If not work send your store url. 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
1 0 0

Hi Community, 

 

I tried all the links above and also the latest suggestion in this thread but nothing seems to work for me. 

 

I am in the "product-template.liquid" file and looking at the following code: 

{% if section.settings.product_quantity_enable %}
<label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
{% endif %}

 

How can I get the quantity selector and the size selector on the same line? 

Any tips appreciated! 

Thx

0 Likes
New Member
14 0 0

Error

0 Likes
Highlighted
New Member
14 0 0

This is what I did:

 

<div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>

<button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">

<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span> </button>

 

It produced this:

pic1.png

0 Likes
Shopify Partner
1648 277 344

HI @seangerke 

Send me you store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
14 0 0

PM sent

0 Likes