Create an add to cart form in Webstudio

Add Sidecart Functionality

To display the sidecart when a customer adds a product to the cart, you need to include the Foxy loader file in your Webstudio project.

Obtain the Foxy Loader Code

1. 1

   Log in to your Foxy admin dashboard.

2. 2

   Navigate to the Settings -> Website & Products

3. 3

   Copy the code snippet from the Foxy loader.js section textarea.

Add the Code in Webstudio

1. 1

   Open your Webstudio project.

2. 2

   Click on the Webstudio logo in the top-left corner and select Project Settings.

3. 3

   In the General section, locate the Custom Code field.

4. 4

   Paste the copied Foxy loader code into this field.

5. 5

   Save your changes.

Setup Purchase Form

Please note that when designing your purchase form, customer and billing information (ex: name, email, credit card #) will be collected on the checkout page, so there is no need to add those fields to your form.

1. 1

   Using Webflow's form builder, build and design your purchase form as desired.

2. 2

   Give each form field a proper name. For example, "Color".

Add Foxy Specific Fields

To create a legitimate product, Foxy requires (at minimum) the product name and price. The following steps will show you how to add these hidden fields using input fields.

1. 1

   Once you've added all of your fields, add an additional text input field. This field will be used for your product name.

2. 2

   In the Input Settings below Properties & Attributes, set the field name as name

3. 3

   In your field's value, set it as your product name. For example, "Headphones".
   

4. 4

   Add another input field and give it the name price . This field will be used for your product price.

5. 5

   In your field's value, set it as as your product price. For example, "9.99".

6. 6

   For both the name and price fields, set the input Type to be "hidden". This will hide these fields from customers.

7. 7

   Repeat steps for any additional foxy fields you want hidden.

Set Form Action

1. 1

   By default, form data is submitted to Webstudios's servers. The following steps will show you how to send data to Foxy.

2. 2

   Go back to the Website & Products page in the Foxy admin. Copy the form action url from the form section. Example: https://yourstore.foxycart.com/cart

3. 3

   In Webstudio, go to your Form Settings. Paste the form action URL into the Action field.

4. 4

   Publish changes and test purchase form to ensure it works as expected.

Different Product Types

You can use Webstudio's form builder to sell any type of product. Below are extra steps required for the different product types.

Subscriptions (recurring payments)

1. 1

   Add a field to your form

2. 2

   In the form field settings, set the field name as sub_frequency

3. 3

   Set the value of the first choice as desired frequency (ex: 1d, 2w, 1m, 1y)

4. 4

   Hide the field using the Show visibility settings or by applying styling (ex: display: none)

5. 5

   Alternatively, you can add a select field visible and assign a different frequency values to each choice.

Donations

1. 1

   Remove the hidden select field with the name price

2. 2

   Add an input field to your form, where you want donors to be able to input their donation amount.

3. 3

   Set the input field name as price

Product Variants

For certain products you may need to allow the customer to choose from different variants (ex: Size). We recommend using select and/or radio fields.

1. 1

   Add select or radio field to your form.

2. 2

   In the input settings, give the field a proper name (ex: Size).

3. 3

   Add each option as needed (ex: Small, Medium, Large, X-Large, 2X-Large)

4. 4

   Using Foxy's Product Option Modifiers you can modify the product price, weight, category, and code based on the option your customer chooses.

5. 5

   For each option that has a modifier, add the proper syntax to the option value. An example would look like this: 2X-Large{p+2)

Display a Quantity Field

Quantity can be modified once a product is in the cart, but if you want to allow customers to choose a quantity before adding a product to cart, simply add a form field with the Name set as "quantity" (lowercase q). This can be an input field, select field, etc.