Debut Theme: Add to Cart button on homepage/collection pages

Solved
cdanielc
Tourist
16 0 1

Hi,

This question has been raised a few times, but I can't get it up and working (outdated posts?) and I have an additional question regarding the design. 

As I am using Debut theme there is by default no "add to cart" button below the products on the homepage/collection pages. I would like to add an "add to cart" button in the same style as if you would create a Buy button for an external site  (Sales Channels > Buy button > Create a buy button). Please find an image below.

Can anyone help me out? Thanks in advance!

Buy buttonBuy button




Replies 77 (77)
KetanKumar
Shopify Partner
25090 2510 9074

@lymie 

add this code also

 <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>     
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
    </select> 
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lymie
New Member
2 0 1

@KetanKumar 

Thank you very much for this code. However, the display is quite off, see below 

Screenshot 2021-10-21 at 04.42.05.png

This is how I have integrated the codes : 

<form method="post" action="/cart/add">
<select name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select>
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>

 

Is there any way to display the variant selector, the quantity and the add to cart button on the same level please?

KetanKumar
Shopify Partner
25090 2510 9074

@lymie 

thanks for the update yes i can see the same you have updated? 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kalimatusa
Tourist
3 0 3

Thank you @Passiondepices for bringing this up. I am having the same problem. Please let know if you this solved. Also, I would appreciate @KetanKumar if he can help.

KetanKumar
Shopify Partner
25090 2510 9074

@Kalimatusa 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
epictofu
New Member
2 0 1

 @PassiondepicesI'm having the same issue. @KetanKumar if you have any suggestions I'd be super grateful!

KetanKumar
Shopify Partner
25090 2510 9074

@Kalimatusa 

i can't see any issue if you have issue let me know 

@epictofu 

yes please share store url 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cabecitadenovia
Tourist
4 0 1

I'm having the same issue.

Is there any posibility to change the action and add the productos to the cart drawer insted of going to cart page?

KetanKumar
Shopify Partner
25090 2510 9074

@cabecitadenovia 

yes please share store url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing