Add to Cart Button

The Add to Cart feature lets customers purchase recipe ingredients directly from your recipe cards. This powerful feature drives sales by making shopping convenient.

How It Works

When enabled:

1. Ingredients linked to products show an "Add to Cart" button
2. Customers click to add that product to their cart
3. They continue browsing or proceed to checkout

Enabling Add to Cart

Add to Cart is available on Advanced and Enterprise plans.

Turn On the Feature

1. Go to Settings
2. Find Enable Add to Cart
3. Toggle on
4. Save

Link Ingredients to Products

For each recipe:

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

Only ingredients linked to products show the Add to Cart button.

Add All to Cart

The "Add All to Cart" button lets customers add all linked ingredients at once.

Enable Add All

1. Go to Settings
2. Find Enable Add All to Cart
3. Toggle on
4. Save

This adds a single button that adds all linked products to the cart with one click.

Button Appearance

Default Styling

The Add to Cart button uses your primary color by default.

Custom Styling

Use Custom CSS Styling to customize:

/* Button background */
.rk-btn-atc {
  background-color: #228B22;
}

/* Button text */
.rk-btn-atc {
  color: white;
  font-weight: bold;
}

/* Hover state */
.rk-btn-atc:hover {
  background-color: #1E7A1E;
}

Button Text Customization

Translate or customize button text:

1. Go to Settings
2. Find Language/Translation Settings
3. Customize:
   • "Add to Cart" text
   • "Add All to Cart" text
   • "View Cart" text
   • "Added" confirmation
   • "Removed" confirmation

See Translating Recipe Cards for all translation options.

Cart Behavior

After Adding

When a customer clicks Add to Cart:

• Product is added to their cart
• Button shows "Added" confirmation
• Quantity updates if already in cart

Cart Link

Customers can click to view their cart after adding items.

Product Variants

If a product has variants (sizes, flavors, etc.):

• The default variant is added
• For specific variants, link to the variant directly
• Or let customers adjust in cart

Inventory Handling

Add to Cart respects inventory:

• Out of stock products won't show button (or show "Out of Stock")
• Inventory is checked at add time
• Overselling is prevented

Best Practices

Link Relevant Products

• Only link ingredients you actually sell
• Match products accurately (correct size, type)
• Consider bundle products for recipe kits

Pricing Considerations

• Ensure linked products have current pricing
• Consider recipe-specific bundles or discounts
• Use Shopify's price features

Mobile Experience

• Buttons are touch-friendly on mobile
• Test the add-to-cart flow on mobile devices
• Ensure cart displays properly

Analytics

Track Add to Cart performance:

• View ATC events in Analytics dashboard
• See which recipes drive most cart additions
• Measure conversion from recipe views to adds

Troubleshooting

Button Not Showing

• Ensure feature is enabled in Settings
• Check ingredient is linked to a product
• Verify product is published and in stock
• Confirm Advanced or Enterprise plan

Product Won't Link

• Search by exact product title
• Check product is active in Shopify
• Try refreshing and searching again

Wrong Product Added

• Re-link the ingredient to correct product
• Check for similarly named products
• Verify product variants

Plan Requirements

What's Next?

• Recipe Ingredients - Linking products to ingredients
• Linking Products to Recipes - Product integration guide
• Analytics Dashboard Overview - Track ATC performance
• Translating Recipe Cards - Customize button text