How can I create a website on Webflow to sell custom and original chocolate boxes, where customers can type in their orders and choose the quantity and type of chocolate?
TL;DR
- Enable Webflow Ecommerce, configure payment, shipping, and tax settings.
- Create chocolate box products with variants for type and quantity using product fields and variants.
- Use a custom form or third-party integration (like Foxy.io) to capture personalized messages before checkout.
- Design product, cart, and checkout pages with dropdowns, quantity selectors, and styled layouts.
- Use tools like Zapier or Airtable for automation and data management.
You want to create a custom ecommerce website on Webflow to sell personalized chocolate boxes where users can choose type, quantity, and enter custom messages. Here's how to do it.
1. Set Up Ecommerce in Webflow
- Go to Project Settings > Ecommerce and enable Webflow Ecommerce.
- Choose your country, currency, and preferred payment method (Stripe or PayPal).
- Set up shipping options, tax regions, and checkout email settings.
2. Create Product Categories and Variants
- Go to the Ecommerce > Products tab in the Designer.
- Either use the default product CMS template or create a new “Chocolate Box” product.
- Use Product Fields to define:
- Product name
- Product image
- Chocolate types (as variants or custom fields)
- Box Sizes or Quantity (as variants: 6, 12, 24, etc.)
- Price
- Enable Product Variants to allow users to select options like:
- Chocolate Type: Dark, Milk, White
- Quantity: Dropdown based on box size
- Turn on inventory tracking (optional).
3. Add a Custom Message Field
- Webflow’s default ecommerce checkout does not support custom input fields.
- To allow custom text (e.g., user typing a gift note), workarounds include:
- Adding a custom form before checkout that collects the message and links to the product.
- Using Foxy.io with Webflow or Outseta for fully-customized ecommerce functionality.
- Using third-party tools like Zapier + Airtable to capture custom form inputs and combine them with order details.
4. Design the Product Page
- Use the Product Template Page to display dynamic content for each product.
- Add:
- Dropdowns or radio buttons for chocolate type and box size.
- Quantity selector (Webflow adds this by default).
- Add to Cart button.
5. Set Up the Cart and Checkout Pages
- Style your cart and checkout pages in the Pages panel under “Ecommerce.”
- Customize branding, field labels, and messages.
- You can’t natively add form fields to Webflow’s checkout, but you can:
- Add a form on the product page.
- Use custom code to pass data to the cart (requires JavaScript and custom development).
6. Optional: Use Third-Party Integrations for Better Customization
- Foxy.io: Works seamlessly with Webflow and allows full control over product variables, custom fields, and checkout.
- Shopify Buy Button: Embed Shopify products in Webflow, useful if you need more complex ecommerce logic.
- Zapier: Automate notifications or save custom order info to Airtable, Google Sheets, or email.
Summary
To sell customizable chocolate boxes on Webflow, use Webflow Ecommerce for product setup and checkout, create product variants for chocolate type and quantity, and use a custom form or integration for personalized messages. For advanced input handling, consider using Foxy.io or custom JavaScript to pass custom data through the checkout.