Let customers add to cart from product cards

Product cards can carry two buttons that let customers shop without leaving the page they are on. Quick view opens the product in a popup, with its photos, options and add to cart button. One-click add puts the product straight into the cart.

Buttons on a card

• Quick view is a round button with an eye in the bottom left corner of the photo. It appears when the pointer is over the photo, and it always shows on touch screens.

• Add to cart is a round button with a plus, to the right of the price, on the bottom right corner of the photo. When the pointer is over it, a word slides out beside it. The word is Add when one click adds the product, and Choose or View when the button opens quick view.

The plus button adds the product in one click only when all of these are true:

• One-click add to cart is on in the section.

• The product has one variant, and it is in stock.

• The product can be bought without a subscription plan.

For any other product, such as one with sizes to choose, the plus button opens quick view. A sold-out product has no plus button.

After a one-click add, the store follows After add to cart in Cart settings. It opens the cart drawer, shows a confirmation message, or goes to the cart page. The plus button then turns into a quantity control that shows how many of the product are in the cart.

Turn the buttons on or off

Each section that shows cards has these settings under Product cards. All three are on at first.

1. In your Shopify admin, go to Online Store.

2. Next to Checkmate, click Edit theme.

3. At the top of the editor, select Collections, then Default collection.

4. Select the Collection section.

5. Under Product cards, turn Show quick view button, Show add to cart button or One-click add to cart on or off.

6. Click Save.

The Search, Featured collection and Card rail sections and the Mega menu block of the Header section have the same three settings. The Featured collection section shows them when Product layout is not Spotlight, which has no cards. Product card settings in sections describes them. In the Header section, the Product carousel block of the search panel has one setting, Show product actions, that shows or hides both buttons together. The small cards in the cart drawer and in the product page's suggestions always have both buttons, and so do the cards of the Product carousel block.

Change what quick view shows

Quick view shows the product through its own product template, named quick-view. A template is the layout of sections and blocks a type of page uses. Every product opens in quick view with this template, whatever template its product page uses.

At first, the template's Product information section has these blocks: Media, Product header, Description, Product metrics, Variant option, Purchase options, Buy buttons and View details link, a link to the full product page. Product information section describes each block.

The quick-view template also appears in the Theme template list on each product in your Shopify admin. Leave it unassigned. A product that uses it shows its product page laid out like the popup, as A product page looks like a popup explains.

1. In your Shopify admin, go to Online Store.

2. Next to Checkmate, click Edit theme.

3. At the top of the editor, select Products, then quick-view. The editor shows the template inside a popup.

4. In the Product information section, add, remove or reorder blocks, or change their settings.

5. Click Save.

The change applies to quick view on every page that shows product cards.