Adding E-commerce Features

This section applies to E-commerce & Retail category templates only

Understanding Webflow E-commerce

Webflow E-commerce lets you sell directly from your site:
- Create product catalogs
- Set up shopping cart
- Accept payments
- Manage inventory
- Track orders

Requirements:
- Webflow Professional plan or higher
- E-commerce addon enabled
- Payment processor (Stripe or PayPal)

Adding Products

1. Go to CMS → Collections
2. Look for Products collection
3. Click + to add a new product

4. Fill in product details:
   - Name - Product title
   - Description - Product details
   - Price - Product cost
   - Images - Product photos
   - Slug - URL-friendly name (auto-generated)

5. Publish the collection item

6. Product appears on your store

Organizing Products

Use Categories or Collections:
1. Create a Categories collection
2. Add category names
3. Link products to categories
4. Filter products by category on product pages

Setting Up Payment Processing

1. Go to Settings → Billing → E-commerce
2. Connect Stripe or PayPal
3. Enter your payment credentials
4. Complete identity verification
5. Your store is ready to accept payments

Inventory Management

For each product:
1. Set Stock quantity
2. Webflow tracks sales
3. Stock decreases with each purchase
4. Option to hide out-of-stock products

Product Variants

If products have options (size, color, etc.):
1. Go to product settings
2. Add Variants
3. Set name (e.g., "Size")
4. Add variant options (Small, Medium, Large)
5. Set price per variant if different

Shopping Cart & Checkout

Your template includes cart and checkout:
- Cart updates as customers add products
- Checkout flow guides customers to payment
- Webflow handles secure payment processing

Managing Orders

Orders appear in your Webflow Dashboard:
1. Go to your Dashboard
2. Click Orders
3. See all purchases, shipping addresses, payment status
4. Print packing slips
5. Track fulfillment

Sending Order Emails

Configure automatic emails:
1. Go to Settings → E-commerce
2. Set up Emails
3. Customer receives:
- Order confirmation
- Shipping notification
- Other automated messages

Discount Codes

Offer discounts to customers:
1. Go to Settings → E-commerce → Discounts
2. Click + to create discount code
3. Set code name (e.g., "SUMMER20")
4. Set discount % or flat amount
5. Set expiration date (optional)
6. Customers use code at checkout

Shipping Configuration

1. Go to Settings → E-commerce → Shipping
2. Set Shipping Zones (countries/regions you ship to)
3. Set Shipping Rates per zone
4. Calculated automatically at checkout

When You Need Help

E-commerce setup is complex. Get support:
- Webflow E-commerce Docs: https://webflow.com/help/articles/ecommerce
- TNCFlow Services: We offer e-commerce customization and setup
- See "When You Need Help" section for contacting us