Products in Foxy are extremely flexible, but are as simple as a normal HTML link or form added to your page. Foxy doesn’t have a product manager where you’ll create all your products - instead you manage your products on your site or in your existing database.

Creating a product is as simple as creating a link though. It just needs at least a name and a price to be able to be added to your cart, but you can also add any custom attributes you might need to fully define your products - like color, size etc.

While the information in the following guide gives an introduction into manually creating product links and forms for your Foxy store, it is also possible to create those in our administration's Link & Form Builder interface. It provides a point-and-click way to create products as you need them, and provides you with the HTML output to use where needed.

You can find this option from the Link & Form Builder section of the Foxy administration, and as you provide the product details within the form, the preview and outputs will dynamically update.

For example, this is how easy it is to create an add to cart link for Foxy - you use your store subdomain, pointing it to the /cart, and specifying parameters for the name and the price. Let's create an add to cart for a bakery store for a Red Velvet Cake that is $24.99:

https://example.foxycart.com/cart?name=Red+Velvet+Cake&price=24.99

And that's a product that can be added to the cart! This link can then be used straight away anywhere you want to have an add to cart, whether on your website, in an email, on social media… in fact, here it is as a link.

So you've got a simple add to cart - but products are normally not that simple. You need to be able to get specific, and the flexibility of Foxy's add to carts gives you the freedom to get as specific as you want.

Let's take our Red Velvet cake and add a code for our internal SKU, a weight for shipping calculations, and some custom parameters - one for a shape, and one for how many servings it has:

https://example.foxycart.com/cart?name=Red+Velvet+Cake&price=24.99&code=cake-rv&weight=0.5&shape=Circle&servings=6+pieces

Now we're cooking! And just like before - you can try out that updated add to cart link here.

Links are great for basic products where everything is static - but Foxy products can be represented in forms too, allowing even more flexibility and your customers to make specific choices about the product they want to buy.

So we have a Red Velvet Cake with some custom options for shape and layers - what if we want to allow the customer to be able to choose from a selection instead? Let's convert it to a form:

<form action="https://example.foxycart.com/cart">
	<input type="hidden" name="name" value="Red Velvet Cake">
	<input type="hidden" name="price" value="24.99">
	<input type="hidden" name="code" value="cake-rv">
	<input type="hidden" name="weight" value="0.5">
	<label for="shape">Shape:</label>
	<select name="shape" id="shape">
		<option value="Circle">Circle</option>
		<option value="Square">Square</option>
		<option value="Rectange">Rectangle</option>
	</select>
	<label>Number of Servings:</label>
	<input type="radio" name="servings" id="servings1" value="6 pieces"> <label for="servings1">6 pieces</label>
	<input type="radio" name="servings" id="servings2" value="12 pieces"> <label for="servings2">12 pieces</label>
	<input type="radio" name="servings" id="servings3" value="20 pieces"> <label for="servings3">20 pieces</label>
	<button>Add To Cart</button>
</form>

While this looks a lot more complex than the link - it's still all the exact same parameters. The static values like the name, price and code are all hidden inputs, but the shape and serving parameters are represented as a dropdown and radio inputs to allow the customer to make their own choice.

Here it is as a working form you can try out:

You may have noticed in these examples that when you add the product to the cart, it slides in from the right hand side of the page instead of redirecting you to a new page. You can redirect to a full page display if you prefer - but to power that slide-in cart style, Foxy uses a small javascript file to add that and some functionality into your website.

You can see the javascript file to include for your specific store from the Settings > Website & Products section of the Foxy administration. You would include it right before the closing </body> tag of your websites template, or if your website builder has functionality for inserting custom code into the templates, add it within the footer/closing body tag option that they provide.

The script will look like this (but the example portion will be your own store subdomain):

<!-- FOXYCART -->
<script data-cfasync="false" src="https://cdn.foxycart.com/example/loader.js" async defer></script>
<!-- /FOXYCART -->

While that gives an overview of the basics for getting started with Foxy products - we have other functionality that you can make use of to create even more powerful add to cart forms. You can take a look at the following pages that take this example even further with other options:

• Adding multiple products to the cart in a single add to cart
• Modifying code, price and weight based on customer selections in a form
• Creating subscription products
• Creating downloadable products