Liquid, JavaScript, themes, sales channels
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.
Solved! Go to the solution
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.
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
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.
'
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.
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.
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
Yes!!!! It Works.
Thanks Akib.
You are welcome.
Feel free to ask anything. 🙂
Hi Akib,
Is there a way to add More blocks to the collection list. Please guide me if this is possible.
Thanks.
Hi,
Can you please explain detail? Where exactly you want to add?
Everything is possible 🙂
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.
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.
'
Thank you Akib. It worked well for me.
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.
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.
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024