Add an Buy button to your collection pages and grid view

If you'd like to add a buy button to your collection pages, here is a customization that allows you to add items to the cart without having to view the product page. The button can be called what you like, essentially it's an Add to Cart button.

Example:

The variant options are combined into one select drop-down. Since it's only one drop-down for all choices, we are able to display sold-out items for any combination:

This product has two colors and multiple sizes in each color. Since the options are combined, the theme can show which combinations are not available. Having one drop-down also make the grid view much cleaner rather than showing multiple drop-downs. Products that don't have any variant options will not display a drop-down. This modification will also appear on your Related Items section on Product pages.

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1: Verify which version of Pipeline you're using

Check which version of Pipeline you're on:
What version of Pipeline am I using?

The code in the next step is based on the version of Pipeline running your shop.

2: Replace code in product-grid-item.liquid

This modification replaces all the code in your snippets/product-grid-item.liquid file. If you have modified this file already, then those changes will be lost. Make sure you have a duplicate/backup of your theme so you can go back if needed.

Replace all the code in this file:

Quick link for live/published themes:
snippets/product-grid-item.liquid

With the all code from one of these files:

Pipeline 4 - Use the code from this file:

Click on link to view code

Pipeline 2 and Pipeline 3 - Use the code from this file:

Click on link to view code

Save the changes.

3: View your changes

Check your collection pages now to view the new button. The button color is based on your Theme's color settings for Accent color:

Adjustments

A. To change the button label from Buy Now to Add to Cart or anything you like, modify this line:

It's on line 89 if you're using Pipeline 2 or 3. You can also use the Find feature (Command-F on Mac, Control-F in Windows) in the code area to search for that text.

B. If you'd like to use a different color than your Accent color.

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

Or if you're using Pipeline 4:
assets/theme.scss.liquid

/* -- code to change buy button color -- */
.template-collection .btn--splash, .product__related .btn--splash {background-color: #cc3333;}
/* - end - */

Save the file.

C. To hide these buttons on Related Items listings on Product pages, use this code:

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

Or if you're using Pipeline 4:
assets/theme.scss.liquid

/* -- code to hide buy buttons from Related Items listing -- */
.product__related .btn--splash, .product__related select, .product__related p.disabled { display:none}
/* - end - */

D. If you'd like to change your buttons to be full width:

Use this code instead for Step 2 of the main tutorial:

Pipeline 4 - Use the code from this file:

Larger buttons - Click on link to view code