If you want to improve conversions and streamline the purchase process, consider adding call-to-action buttons to your collection page. This allows customers to continue shopping immediately after adding items to their cart, rather than being diverted to individual product pages.
Here’s an example of a collection page featuring a call-to-action button and quantity selector:
To achieve this, copy the form from the product template, which includes the quantity selector, option selector, and call-to-action button, and add it to the products listed in your collections.
You can find this form in templates/product.liquid. Typically, it redirects to sections/product-template.liquid, where you will see a form similar to the following:
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<div class="product-form__item product-form__item--quantity">
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
</div>
</div>
<input type="submit" value="Add to cart" class="btn" />
</form>
After we copy this part of code, we need to locate the code that yields the product cards in collections. In this case, it’s snippets/product-card.liquid. The code above needs to be added at the end of the product-card.liquid file, and it will show up below the products on collection pages. It should work correctly, but it won’t look aesthetically pleasing until several CSS tweaks are made.
There are a ton of style variations across stores that we won’t be able to cover in one blog, but if you need custom development services, feel free to reach out to us at: https://www.slicedbread.agency/pages/contact
