How to use the Link & Form Builder

Link & Form Builder Overview

Once you log in to the Foxy Admin, the Link & Form Builder tab can be accessed from the sidebar navigation.

The Builder has three main sections:

• Items Configuration (Left-hand side):
  This is where you configure product details, such as name, price, SKU, weight, and other properties.

• Preview & Generated Code (Right-hand side):
  Displays a live preview of the form and generates the corresponding HTML form code and Direct Link for your product.

• General Cart Settings (Lower-right side):
  Includes settings for templates, actions (before/after adding items), and optional coupon codes.

Now let's create the simplest product that Foxy allows.

Create a simple product

Foxy allows multiple different types of products by using different properties but, on their simplest form, and Foxy product needs only a name and a price. Let's create one:

1. 1

   Go to the Items section of the Builder and on the field for "Name" input the name of your product.

2. 2

   There on the field for "Price" input using the arrows or by typing it the product price.

3. 3

   Now on the Preview side on the right you will have a generated code for a HTML add to cart form, and also under "Direct Link" an add to cart link.

4. 4

   Copy the code or link as you need.

5. 5

   Apply the code or link on your website.

6. 6

   Test your form or link.

And that's it. You have successfully created a foxy add to cart form or link and it's being used on your website.

Add more information to your product

Products often include additional properties for better customization. Here's how you can enhance your products using the Builder options:

Category

Product categories in Foxy allow you to efficiently manage product-specific behaviors and streamline your store's operations. To set up or customize categories, explore the category settings in your Foxy admin panel.

Categories can control at their level: Taxes, shipping options, discounts, default weights, custom email receipts, coupons and downloables. You can learn more about them here.

How to Assign a Product Category

1. 1

   Locate the Category Field: In the Items section of the Link & Form Builder, look for the "Category" field.

2. 2

   Select a Category: Click and choose one of the categories listed or leave it as DEFAULT if no other category is required.

3. 3

   Save and Apply: Once a category is assigned, its settings are applied to the product when it's added to the cart.

SKU (Stock Keeping Unit)

The "SKU" field allows you to assign a unique identifier to the product, which is useful for inventory tracking and integrations with external systems.

Parent SKU

Use this to create bundles or groups by linking child products to a parent product.

Weight

Specify the product weight in the "Weight" field. This information is used for calculating shipping rates.

Product Dimensions

Besides the product weight you can also specify the Length, Width, and Height. This is specially helpful for shipping rate calculations on big products.

You can find these settings under the Advanced drop-down on the Item panel.

Quantity

The Quantity section in FoxyCart allows you to define how customers can select product quantities in their cart. Below are the available settings and how to configure them:

• Quantity

  • This field sets the default quantity of the product when added to the cart.

  • You can use the dropdown to increase or decrease the starting quantity.

• Minimum Quantity

  • This sets the lowest quantity a customer can select when adding the product to their cart.

  • If set to 1, customers must purchase at least one unit.

  • If you have a bulk product that must be purchased in multiples (e.g., a pack of 5), you can set this accordingly.

• Maximum Quantity

  • This sets an upper limit on how many units of the product a customer can purchase.

  • If set to "None," there is no restriction on quantity.

  • Use this if you want to limit stock availability for a particular product.

• Hide Quantity Field in the Form

  • When toggled ON, this removes the quantity selector from the add-to-cart form.

  • This is useful for fixed-quantity products, such as subscription services or one-time purchases, where the customer shouldn't change or doesn't need to change the quantity.

Image URL

This field allows you to specify an image URL for the product. The image will be displayed in the cart and any relevant customer-facing templates, helping customers visually recognize the product in their order summary.

Steps to add an Image URL:

1. 1

   Click on the drop-down on the Advanced section.

2. 2

   Enter the image URL in the provided field.

3. 3

   The image will automatically appear wherever applicable in the cart and order summary.

Product URL

The Product URL field only becomes available after you have added an Image URL. The product URL will be linked to the image, allowing customers to click on the product image to return to the product detail page. This is useful for giving customers an easy way to navigate back to the product description.

Steps to add a Product URL:

1. 1

   Click on the drop-down on the Advanced section.

2. 2

   First, enter an Image URL.

3. 3

   After entering the Image URL, the Product URL field will become available.

4. 4

   Enter the Product URL to link the image to the product page.

Expiration

This setting defines when the product offer or discount expires. It is useful for limited-time offers, flash sales, or time-sensitive promotions. The available options include:

• Doesn’t expire: The product remains available indefinitely on the cart.

• After a number of minutes: The product will no longer be valid after a set period.

• On a specific date: You can set a fixed expiration date for the product.

Steps to set an expiration:

1. 1

   Click on the drop-down on the Advanced section.

2. 2

   Open the Expiration drop-down menu.

3. 3

   Select one of the available expiration options.

4. 4

   If choosing "After a number of minutes" or "On a specific date," enter the required details.

Create a product bundle/group

If you have a bundle of products, you can add these products in groups so that some products show up under a parent product and are not individually editable.

You can also create product groups to be added to the cart together, such as accessories or an ensemble of items. This allows your customer to add all the items with one click, and they can also remove individual items or change quantities in the cart.

How to create a product bundle

Step 1: Define the Parent Product

1. 1

   Create a new product in the Builder.

2. 2

   Fill in the required fields (e.g., Name and Price).

3. 3

   Assign a unique code to the "SKU" field.

Step 2: Add Child Products

1. 1

   Click the "Add another item" button to create a new product.

2. 2

   Fill in the Name and Price fields for the child product.

3. 3

   In the "Parent SKU" field, enter the SKU code of the parent product.

4. 4

   Repeat this process to add multiple child products to the same bundle.

Now you have a product bundle where the child product can be removed or it's quantity modified.

If you want to make it so that the child product's quantity can't modified. You can set Minimum quantity field under the Quantity dropdown, the child product quantities will be locked to the parent product and the quantity can't be adjusted independently. You'll probably want to do this in most cases.

How to create a product group

1. 1

   Create a new product in the Builder. If you already have an item added this mean clicking on the "Add another item" button.

2. 2

   Fill in the required fields or the ones you need (e.g., Name and Price).

3. 3

   Repeat this process to add multiple products to the same add to cart form or direct link.

Now you have a product group with no child/parent relations where several items will be added together to the cart with one click.

Create a subscription product

To enable recurring billing for a product:

1. 1

   Toggle the "Create subscription" switch under the Items section.

2. 2

   Specify the subscription frequency (e.g., weekly, monthly).

3. 3

   Specify a future start date if the sub needs to start in the future.

4. 4

   Specify an end date if, for example, the subscription needs to be charged for a fixed number of payments.

5. 5

   The generated form and Direct Link will include subscription options.

Add a discount

Discounts can be added using coupon codes:

1. 1

   Scroll down to the Settings section on the lower-right side.

2. 2

   Click on the "Coupon code" field and enter the desired discount code.

3. 3

   Save the configuration and test it on your website.

Once you create one the second one will be available

Custom product options

Custom options allow customers to input data (e.g., text fields, dropdowns) when adding products to the cart:

1. 1

   Click "Add option" under the Custom options section in the Builder.

2. 2

   Define the type of input (e.g., text, dropdown).

3. 3

   Assign a name and optional values for the input.

4. 4

   The generated form will include these custom options.

Test the form or link

1. 1

   On the Preview section:

   • Copy and open the Direct Link on the browser or

   • Submit the HTML form by clicking on the submit button on the visual preview of the form.

2. 2

   Confirm that the product/products are added to your cart correctly.

View and Use the Generated Code (Embed)

1. 1

   On the Preview section, you will see:

   • A snippet of HTML code for an "Add to Cart" form.

   • A Direct Link for adding the product to the cart.

2. 2

   Copy either the form code or the Direct Link depending on your implementation needs.

3. 3

   Embed the code or link into your website.

How to style your form or link

To style the form or the link:

1. 1

   Use CSS to apply custom styling to match your website's design.

2. 2

   Ensure that the form's structure and input names remain intact for functionality.