Solved

Adding an "Add to cart button to Collection Pages" in Dawn theme

OSt
Shopify Partner
6 1 1

Hi, I'm trying to add "Add to cart" button to a "Featured Collection" Section on the Home Page. Currently got "Dawn" theme installed.

I'm doing it in 2 ways, both of which don't work for me.

 

1) I'm adding this code to the product-card.liquid:

(copied it from main-product.liquid)

 

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
<div class="product-form__buttons">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width button--primary"
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %} >
<span>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}

 

This makes error text appear under the products instead of a button:

"Liquid error (product-card line 82): product form must be given a product"

 

2) Another code I'm dding to the product-card.liquid:

(copied it from one of the other themes we have)

 

<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 adds the button to the products, but when clicked, it brings up an error page with this message:

"Something went wrong. Parameter Missing or Invalid: Required parameter missing or invalid: id "

 

Not sure what am I doing wrong.

Is there a way to add an "Add to cart" button to the products on the Collection Page, that would work?

We don't have variants or colours on products, every product is just a single variant, no need to account for that.

 

Thank you for your help.

 

Accepted Solution (1)

OSt
Shopify Partner
6 1 1

This is an accepted solution.

Replies 3 (3)

Not applicable

Email me so,
I can solve it.
Thank You.

OSt
Shopify Partner
6 1 1

This is an accepted solution.

Jahid-KlinKode
Excursionist
145 1 4

Hey @OSt, watch this YouTube video to easily implement an "Add to Cart" button on your Shopify collection pages: https://www.youtube.com/watch?v=s98l1bUZe6k