How to add a Add to Cart button on collection page in Dawn theme

Perzen
Excursionist
35 0 1

Kia ora,

 

I have a website running on the free Dawn theme. I have about 4 diff collection pages and I'd like to have an Add to cart button displayed on the collection page itself. How do I go about having that ? I can't find it in the settings anywhere

 

My website - www.dollymumma.com

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
7393 1421 1414

Hi @Perzen,

You can try following this instruction to add an add to cart button on your collection page

  1. Go to theme -> Action -> Edit Code -> Snippets -> product-card.liquid
  2. Paste below code at the end of this file.
<form method="post" action="/cart/add" class="collection-cart-btn">
  <input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />
  <input type="submit" value="Add to cart" class="button"/>
</form>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Perzen
Excursionist
35 0 1

I tried this but unfortunately doesn't seem to work. The button itself shows up but when I click on it, it leads to an error. 

shopify error.PNG

Shop_Lovers
Shopify Partner
281 46 72

What is your theme version?

Follow for Dawn 3.0
Open card-product.liquid and paste the below code under price 

{% if card_product.variants.size > 1 and card_product.available %}
<a style="margin-top: 17px" class="button" tabindex="0" href="{{ card_product.url | default: '#' }}"> View options </a>
{% elsif card_product.available %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />
<div style="display: flex">
<quantity-input class="quantity" style="width: calc(12rem / var(--font-body-scale) + var(--inputs-border-width) * 2); margin-top: 17px; margin-right: 10px;" >
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1">
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<input type="submit" value="Add to cart" class="button" style="margin-top: 17px" />
</div>
</form>
{% else %}
<a style="margin-top: 17px" class="button" tabindex="0" href="{{ card_product.url | default: '#' }}"> Sold out</a>
{%- endif -%}
Perzen
Excursionist
35 0 1

hi @Shop_Lovers I tried using your code too and appreciated how all the padding appeared and aligned everything. However, all the buttons show as "Sold Out" rather than "Add to Cart".

 

We don't maintain an inventory of our product on Shopify i.e. when I load a product, we don't mention how many units we have because everything is made to order. Can you help me with why the Sold out is showing up?

error 2.PNG

Shop_Lovers
Shopify Partner
281 46 72

Hi,

 

Try this code.

 

<form method="post" action="/cart/add">
   <input type="hidden" name="id" value="{{ card_product.first_available_variant.id }}" />
   <input type="hidden" min="1" type="number" id="quantity" name="quantity" value="1"/>
   <input type="submit" value="Add to cart" class="button button--full-width" style="margin-top: 10px; z-index: 1;"/>
 </form>

 

Thanks

 

Hit Like and Accept as Soluiton

bkitrell61
Excursionist
11 1 0

The buttons appeared but they are too big, the margins are way off, and the buttons don't actually work. Any tips on how I can change these things? Thanks!

 

 

Screen Shot 2023-02-20 at 9.06.07 PM.png

DelightCart
Shopify Partner
1233 81 155

@Perzen 

1. Go to Snippets directory, From the navigation menu to the left, scroll down to the Snippets directory and click on product-grid-item.liquid, or something similar to that.

2. Add the following code before, or after the closing </div> tag

3. Save it.

 

<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>
Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.
Perzen
Excursionist
35 0 1

I tried this but when I try to click on the button, I keep getting the following error. 

 

shopify error.PNG

KabirDev
Shopify Partner
244 60 66

The selected solution is outdated. Dawn theme has this feature built-in now. Please watch this video https://www.youtube.com/watch?v=s98l1bUZe6k to turn it on.

If my answer helps, please give it a Like and Accept as Solution.
- You can join in our Facebook group for Shopify help.
- Contact me directly at shahriar@kabirdev.com
- Control payment methods visibility at checkout by KlinKode PayRules app.