Webflow sync, pageviews & more.
NEW

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
  • Set up a Webflow Ecommerce project, add a “Custom Chocolate Box” product, and create up to three variants like chocolate type, quantity, and packaging.
  • Add custom form fields for personalized inputs, connect them using hidden fields or tools like Zapier, and style the page with chocolate branding before configuring checkout and payment settings.

You can use Webflow’s CMS and Ecommerce tools to build a website that sells customized chocolate boxes, letting users input customizations, select chocolate types, and set quantities.

1. Set Up Your Webflow Ecommerce Project

  • Create a new Webflow project using a template with Ecommerce functionality, or start from scratch and enable Ecommerce in the Project settings.
  • Go to Ecommerce → Products and add a product called something like "Custom Chocolate Box."

2. Add Product Variants or Options

  • Go to your product’s settings and under Variants, create options for chocolate type, box size, or packaging, depending on your offering.
  • Webflow supports up to 3 variant options per product.

Examples:

  • Option 1: Chocolate Type – Milk, Dark, White
  • Option 2: Quantity – 6 pieces, 12 pieces, 24 pieces
  • Option 3: Packaging – Standard, Gift Wrap

3. Add Custom Order Input Fields

  • To allow users to type in custom requests (like a message or flavor mix), add a custom ‘Product Form’ using Webflow’s Form elements.
  • Use Text Area fields labeled like “Enter your chocolate preferences” or “Custom message.”
  • These fields do not impact cart logic but will be included in the order confirmation email.

Note: Custom inputs like this won’t be stored in the Ecommerce backend; they only appear in order emails and submission data.

4. Connect Inputs to Ecommerce Checkout

  • Add a combined Form Block within the Product Template page if needed.
  • Use hidden fields and script integrations (optional) to pass form data into the standard Webflow checkout if you want deeper integration.
  • Alternatively, use a form that sends data via Zapier or Make to link input info with order records.

5. Style Your Product Page

  • Customize the design of your product page to reflect your brand—chocolate-themed colors, product images, etc.
  • Use Lightbox to showcase different types of chocolates.
  • Add product tabs or accordions to explain flavor options and box styles.

6. Set Up Checkout and Payments

  • Go to Ecommerce → Settings → Payments to connect Stripe or PayPal.
  • Configure Shipping Zones and Rates for your chocolate delivery areas.

7. Optional: Add Conditional Logic or Custom Features

  • If you need advanced logic like dynamic pricing or custom box builders, consider using:
  • Finsweet’s Attributes to extend form functionality.
  • An external tool like Jotform or Typeform, embedding a custom order form into your Webflow product page, then linking that to payment flows with Zapier.

Summary

To sell custom chocolate boxes on Webflow, use Ecommerce for product setup, variants for chocolate types, and form inputs for custom orders. Connect payments and checkout natively, and consider integrations like Zapier for deeper customization tracking.

Rate this answer

Other Webflow Questions