Add to Cart Button

Add to Cart turns your recipe ingredients into things people can buy without leaving the recipe. Available on Advanced and Enterprise plans.

How it works

Link an ingredient to a product in your store, and that ingredient gets an Add to Cart button on the recipe card. A reader clicks it, the product lands in their Shopify cart, and they carry on reading.

Turning it on

1. Open Recipe Kit and go to Settings
2. Find the Features section
3. Switch on Add to Cart
4. Save

Then link ingredients to products, per recipe:

1. Open a recipe
2. Click the product icon next to an ingredient
3. Search for and select the product
4. Save

Only linked ingredients get a button. Everything else displays as normal text.

Add All to Cart

Add All to Cart puts one button on the card that adds every linked ingredient at once. Switch it on in Settings > Features, next to the Add to Cart toggle.

Quantity selector

The quantity selector is the plus and minus stepper beside the Add to Cart button, so a reader can grab two bags of flour instead of one.

It is off by default. To switch it on:

1. Go to Settings > Advanced > Widget Features
2. Switch on Show shoppable quantity selector
3. Save

The stepper shows on ingredients not yet in the cart. Once an item is in the cart the button switches to a remove control instead.

Styling the buttons

The buttons pick up your accent colour automatically. For anything more, use Custom CSS Styling:

.rk_atc_btn {
  background-color: #228b22;
  color: #fff;
  font-weight: 700;
}

.rk_atc_btn:hover {
  background-color: #1e7a1e;
}

/* Add All to Cart */
.rk_atc_all {
  border-radius: 4px;
}

/* Remove from Cart */
.rk_rfc_btn {
  background-color: #999;
}

Changing the button text

Every cart label can be renamed or translated in Settings > Translations & Labels:

• Add to Cart
• Add All to Cart
• View Cart
• Checkout
• Added and Removed confirmations
• Quantity

See Translating Recipe Cards.

Product variants

If a product has more than one variant, the card shows a variant picker beside the ingredient and only lists variants that are actually available. Sold-out variants are not selectable.

Stock handling

Recipe Kit only offers variants Shopify reports as available, so a sold-out product cannot be added from a recipe card. Stock is checked when the card loads.

The cart icon in my theme does not update

This is the most common question about this feature, and it is a theme issue rather than a Recipe Kit one. Every Shopify theme handles its cart drawer differently, so there is no universal way to refresh it.

Recipe Kit fires a JavaScript event you can hook into. See Shoppable recipe / add to cart does not update theme cart.

Troubleshooting

No button showing at all. Check that you are on Advanced or Enterprise, that Add to Cart is on in Settings, that the ingredient is actually linked to a product, and that the product is published and in stock.

The button appears but adds the wrong thing. Re-link the ingredient. Similarly named products are easy to mix up, and a product with variants adds the first available one unless the reader picks another.

The product will not link. Search by the exact product title, and check the product is active in Shopify.

Measuring it

Add to Cart clicks are tracked in the Analytics dashboard, so you can see which recipes actually drive carts rather than guessing. Revenue attribution ties completed orders back to the recipe that started them. See Analytics Dashboard.

Plan requirements

See Subscription Plans.

What's next

• Linking Products to Recipes - Connecting ingredients to products
• Shoppable recipe / add to cart does not update theme cart - Hooking into your theme's cart
• Translating Recipe Cards - Renaming the buttons