Shopify themes, liquid, logos, and UX
Hello everyone, I am currently using debut theme. How to add "add to cart" button on my collection pages. And I want to show % discount every product on my collection page. Thank you in advance.
Please see attached file.
Solved! Go to the solution
This is an accepted solution.
Hello Lovelyn12,
Just follow the steps for Debut theme for Add to cart button on collection pages.
<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"/> <input type="submit" value="Add to cart" class="btn" /> </form>
This is an accepted solution.
Hello Lovelyn12,
Just follow the steps for Debut theme for Add to cart button on collection pages.
<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"/> <input type="submit" value="Add to cart" class="btn" /> </form>
Hello Pallavi,
I already have that code on my product-card.grid. But nothing changes. Please see attached photo.
If I add the code, the add to cart button is not on the proper place. and I want to ut it on every product on the collection page.
Hello Lovelyn12,
Can you please share URL link of store.
Can you please paste the code of your product-card-grid.liquid code.
I think you might have customized the file due to which its not working acc to the default theme.
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
<span class="visually-hidden">{{ product.title }}</span>
</a>
{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="">
</div>
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
</noscript>
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
{% include 'product-price', variant: product %}
</div>
When I paste the code at the bottom part. the add to cart button will be placed on the button part of the collection page.
Hello Lovelyn12,
I checked yours code for my store and it is working properly on my store debut theme.
Might be you have done some customization in collection page because for this your collection page not showing Button properly.
Really? Huhu Is there other way I can fix it? I don't know how I am not a coding expert.
Is there a way to have it add to cart but not redirect the page to the cart when they submit? So that they can rapidly add a few products to the cart.
Thanks in advance!
You are working on debut theme?
Looking to solve the same issue? Is there a generic code for this?
Thank you for the code. It worked well on the Venture theme.
when i used the added code it redirects me into the product page.
How do i stop this from happening?
Thanks in advance
Same here - but I managed to get it working in the past - then some update has "broken" it - now it redirects to the product, and user needs to add to basket again.
We've fixed this as of March 28th, 2020. You need to add a few more tags to align and space the quantity picker and button correctly. Note: this works with the Brooklyn theme.
This code should be inserted in the middle of the product-grid-item.liquid Snippet file. We inserted it at line 82, before this code:
<a href="{{ product.url | within: collection }}" class="grid-product__meta">
Inserted code:
{% comment %} Next bit of code has been added to include "Add to Cart" button below every product in a grid, with the quantity displayed {% endcomment %} <form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <br /> <center><input min="1" type="number" id="quantity" name="quantity" value="1"/></center> <input type="submit" value="Add to cart" class="btn" /> </form>
Let me know if this works.
Hey @artisan-meats I tried this out but it goes straight to the cart page rather than adding it! Any chance you could help with this?
User | RANK |
---|---|
128 | |
102 | |
74 | |
72 | |
44 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022