Add 'Buy Now' button in collection Pages in Venture theme

Store Design
1

Hi Experts,

I am using venture theme.

I want to add quick buy button just below the products.

I have made the necessary changes to the product-cart.liquid file.

<form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
    <input type="submit" value="{% if product.variants.first.available%}Buy now{% else %}Sold Out{% endif%}" class="btn" {% unless product.variants.first.available %}disabled{% endunless %} />
  </form>

This works ok, but this is not exactly aligning with the product.

Also I want both “Buy Now” and quantity (+ - button instead of drown-down) in the same form. (Please refer to the attached image).

Any help will be much appreciated. Thanks.

Screen Shot 2020-04-19 at 08.59.51.png
Screen Shot 2020-04-19 at 08.59.51.png2348×990 221 KB

Screen Shot 2020-04-19 at 09.00.42.png
Screen Shot 2020-04-19 at 09.00.42.png244×122 334 Bytes

2

Hi @jrnayak

You can align qty and buy now button in same line by css but cant change qty to + and - from drop down by css code for that nee html and Js code also.

Send store url so i can check for aliment issue.

3

Hi Jasolia,

Thanks for your mail.
Please find the store url.
https://amagaon.com/collections/all
Thanks.

Regards

4

Add this css in asset->theme.scss file at bottom:

.page-width .product-form__item--submit{width: 70%; float: left; margin-top: 30px;}
.page-width .product-form__item--quantity{width: 30%; float: left;}
5

Thanks Jasoliya.

The above settings worked well on mobile.

But not working on desktops.

Also, Could you please help me changing the button style to - and +.and when I click “Add to Cart” or “Buy Now” , it should not take me to the cart page, the page should stay there, but the product should be added into the cart.

Thanks.

6

For + and - design you can follow my this post, but for that you have to change Jquery code because its must work for product page so for collection page you have to change it.

For stay on same page you can follow my this post.

7

Hi, I was wondering if there was a way to add the option for product variants on this button if they exist.

I am trying to have this only available for clothing, please see this section:

https://shop.horrorpaingoredeath.com/collections/t-shirts

If possible I would only like this to appear on certain products or collections