Solved

To add a Buy button for each product in debut theme and disable it when then the item is sold out

Firefly1
Tourist
14 0 2

Hi,

I used this code to add the button.

<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:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
  <input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
</form>

I am trying to find a solution for the button to disable automatically when the product is sold out. Any help is appreciated.

Thanks.

Accepted Solutions (3)

Akibhusen
Shopify Partner
715 121 147

This is an accepted solution.

HI @Firefly1 ,

Update your code with below given code:

 

<form method="post" action="/cart/add">
{% if variant.available %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1" style="width:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
<input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
{% else %}
<input type="submit" value="Sold Out" class="btn" disabled/>
{% endif %}
</form>

 

Please update CSS for the 'Sold Out' button as per your requirement.

View solution in original post

Akibhusen
Shopify Partner
715 121 147

This is an accepted solution.

Yes, sure.

Just change the condition. keep the form in if condition & sold out button in else condition like below:

{% if variant.available %}

<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:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
<input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
</form>

{% else %}


<input type="submit" value="Sold Out" class="btn" disabled/>


{% endif %}

 

I think I got your question & get the right solution. if not then ping me again

View solution in original post

Akibhusen
Shopify Partner
715 121 147

This is an accepted solution.

HI @Firefly1 ,

 

Go to shopify admin -> Online store -> Themes -> Action -> Edit code.

 

From your theme code open the 'collection-list.liquid' section file from the Sections  folder. 

After that search for the 'max_blocks' word. You can find this word in {%  schema %}.  Update this from "max_blocks": 12, to "max_blocks": 20 .

 

Hope you understand.

'

View solution in original post

Replies 14 (14)

Akibhusen
Shopify Partner
715 121 147

This is an accepted solution.

HI @Firefly1 ,

Update your code with below given code:

 

<form method="post" action="/cart/add">
{% if variant.available %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1" style="width:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
<input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
{% else %}
<input type="submit" value="Sold Out" class="btn" disabled/>
{% endif %}
</form>

 

Please update CSS for the 'Sold Out' button as per your requirement.

Firefly1
Tourist
14 0 2

Hi Akib,

Thank you very much for the solution. It helps. In this case, it gets disabled but the button goes missing leaving a blank space. Instead can we make it just showing sold out with no-action when clicked?

Thank you.

Akibhusen
Shopify Partner
715 121 147

This is an accepted solution.

Yes, sure.

Just change the condition. keep the form in if condition & sold out button in else condition like below:

{% if variant.available %}

<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:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
<input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
</form>

{% else %}


<input type="submit" value="Sold Out" class="btn" disabled/>


{% endif %}

 

I think I got your question & get the right solution. if not then ping me again

Firefly1
Tourist
14 0 2

Yes!!!! It Works.

Thanks Akib.

Akibhusen
Shopify Partner
715 121 147

You are welcome.

 

Feel free to ask anything. 🙂

Firefly1
Tourist
14 0 2

Hi Akib,

Is there a way to add More blocks to the collection list. Please guide me if this is possible.

Thanks.

Akibhusen
Shopify Partner
715 121 147

Hi,

Can you please explain detail? Where exactly you want to add?

Everything is possible 🙂

Firefly1
Tourist
14 0 2

OK. When we add a section for collection list, the max number of collection to view in one list is 12. Need to add more Can this be increased to 20?

Thanks.

coll.png

Akibhusen
Shopify Partner
715 121 147

This is an accepted solution.

HI @Firefly1 ,

 

Go to shopify admin -> Online store -> Themes -> Action -> Edit code.

 

From your theme code open the 'collection-list.liquid' section file from the Sections  folder. 

After that search for the 'max_blocks' word. You can find this word in {%  schema %}.  Update this from "max_blocks": 12, to "max_blocks": 20 .

 

Hope you understand.

'

Firefly1
Tourist
14 0 2

Thank you Akib. It worked well for me.

Firefly1
Tourist
14 0 2

Hi Akib,

I would like to make the slider banners clickable without the button link. The button gets placed exactly in the center on each image. Is there any way to get the button hidden or even disable it.

Thank You.

Akibhusen
Shopify Partner
715 121 147

HI @Firefly1 ,

 

Could you please share your store URL? So I can check & guide you accordingly.

Firefly1
Tourist
14 0 2

Hi Akib,

It's firefly.om

To make the slider a link, a button link needs to be present which will display a button in the middle of the image. (You can see it on the Apple airtag image somewhere in the middle of the page)

I would like to make the whole image a clickable link without the button. If there is a solution, please help.

Thanks.

Akibhusen
Shopify Partner
715 121 147

HI @Firefly1 ,

 

It's required some code related changes in your theme section. I'll send you the access request of your store.

Accept the request and I'll do that.