Shopify themes, liquid, logos, and UX
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
Hi @Perzen,
You can try following this instruction to add an add to cart button on your collection page
<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
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.
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 -%}
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?
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
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!
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>
I tried this but when I try to click on the button, I keep getting the following error.
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024