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

Technical Q&A
1

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.

2

HI @Firefly1 ,

Update your code with below given code:

{% if variant.available %} {% else %} {% endif %}

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

3

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.

4

Yes, sure.

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

{% if variant.available %}

{% else %}

{% endif %}

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

5

Yes!!! It Works.

Thanks Akib.

6

You are welcome.

Feel free to ask anything. :slightly_smiling_face:

1 Like
7

Hi Akib,

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

Thanks.

8

Hi,

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

Everything is possible :slightly_smiling_face:

9

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
coll.png387×880 14.5 KB

10

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.

’

1 Like
11

Thank you Akib. It worked well for me.

1 Like
12

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.

13

HI @Firefly1 ,

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

14

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.

15

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.