Shopify themes, liquid, logos, and UX
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 button
Solved! Go to the solution
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>
Thank you very much for this code. However, the display is quite off, see below
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?
thanks for the update yes i can see the same you have updated?
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.
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.
kalimatusa.com
@Passiondepices, I'm having the same issue. @KetanKumar if you have any suggestions I'd be super grateful!
i can't see any issue if you have issue let me know
yes please share store url
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?
yes please share store url?
yes please try and modification this code
https://gist.github.com/marioloncarek/93c8aaf2c9e2f29054b70e1c69105ae2
Thanks!
Where i have to put that code? at the bottom part of product-card-grid.liquid ?
The issue still there. When you add to cart, it navigates you to the cart page. Is it possible to add to cart without leaving the page we are in and continue shopping?
Thank you, my store url is epictofu.com
The Add to cart button is working well. However, when clicked, it takes the shopper to their cart. I'd like for them to stay on their current page.
Thanks so much,
Jenn
Hello @KetanKumar ! I am hoping that you can help me. We are using the DEBUT theme, and cannot add the Add To Cart button to the individual product pages. We do not want it in the homepage or in the collection, just in the individual product pages. Is there any way to do this? Thank you so much for your help in advance. Our shop is www.calquepress.com
sorry for any issue can you please share more details or screenshot what do you need?
Hi @KetanKumar 👋🏾
Hello,
I have also added this code but it doesn't seem to be aligning my add to cart buttons. Currently, the buttons are not aligned because my product titles are different lengths and some take up more lines than others. Could you please help me align my buttons? My site is schwabies.myshopify.com. I appreciate your help.
Thank you,
Erin
User | RANK |
---|---|
176 | |
157 | |
83 | |
31 | |
30 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023