FreeCart Comprehensive Reference Guide

FreeCart Comprehensive Reference Guide

Master every feature and function of FreeCart

Setup

To activate FreeCart on your website, follow these steps:

1. Add the FreeCart Script

<script src="https://freecart.store?1234"></script>

Replace '1234' with your User ID from the "Account" tab in the Control Panel.

2. (Optional) Specify Cart Position

By default, the cart appears in the top-right corner. To specify a custom position:

<div id="integrated_cart" class="cart-icon-wrapper"></div>

Place this code where you want the cart to appear.

3. Configure Settings

In your FreeCart control panel:

  • Set your main currency in the "Checkout" tab
  • Configure VAT/Sales Tax in the "Account" tab
  • Choose cart language in the "Account" tab
  • Set Inline Cart Position and behavior (absolute or fixed) in the "Account" tab

Simple Mode (No Options)

Create simple buy buttons for products without options.

Basic Syntax

<a href="#ProductName$Price">Buy # for $</a>
  • FreeCart automatically replaces # with the product name - For instance: Cool T-Shirt
  • FreeCart automatically replaces $ with the price (and currency set in the Control Panel) - For instance: USD 22.90

Examples

1. Basic Buy Button

<a href="#Cool T-shirt$24.99">Buy # for just $</a>

2. Image Button

<a href="#Cool T-shirt$24.99"><img src="tshirt.jpg" alt="Buy # now!"></a>

The image will be used as the product image in the cart. When clicked, product details will be shown and with the image in big format.

3. With Product Description

<a href="#Nice Sweater$32.99&_d=This sweater is warm & cozy. Perfect for cold days. Get it for only $">Buy # now</a>

Never use & in descriptions. # and $ in the description makes FreeCart replace them with the product name and price.

4. With Weight for Shipping Calculations

<a href="#Heavy Book$49.99&_w=2.5">Get # for $</a>

The _w parameter sets the weight (in kg) for shipping calculations.

Advanced Mode (Multiple Options)

Create forms with multiple options for customizable products.

Basic Syntax

<a href="#ProductName$Price&Option1=Value1,Value2&Option2=Value1,Value2">Add To Cart!</a>

Option Types

  • [dropdown] - Default if omitted
  • [radio] - Radio buttons
  • [checkbox] - Checkboxes
  • [text] - Text field

Examples

1. Basic Multi-option Product

<a href="#Custom T-shirt$24.99&Color=Red,Blue,Green&Size=S,M,L,XL">Customize and Buy</a>

2. With Different Option Types

<a href="#Gourmet Pizza$15.99&Size=[radio]Small,Medium,Large&Toppings=[checkbox]Mushrooms,Pepperoni,Olives,Onions&Special Instructions=[text]">Order Pizza</a>

3. With Required Options

<a href="#Custom Laptop$999.99&Processor=![dropdown]i5,i7,i9&RAM=![radio]8GB,16GB,32GB&Storage=[checkbox]256GB SSD,512GB SSD,1TB HDD">Configure Laptop</a>

The ! before an option type makes it required.

4. With Option Captions

<a href="#Custom Mug$12.99&Choose your color/Color=![dropdown]White,Black,Red,Blue&Add a name?/Personalization=[text]">Create Your Mug</a>

Use / to separate the caption from the option name.

5. With Option Labels, Names, and Images

<a href="#Premium Shirt$49.99&Color=![dropdown]Navy Blue*navy*navy.jpg,Forest Green*green*green.jpg,Burgundy Red*red*red.jpg&_img='https://example.com/default-shirt.jpg'">Select Your Premium Shirt</a>

Format: Label*name*image.jpg. The image changes based on the selected option.

Textarea Mode

Create product forms using a textarea for easier formatting and readability.

Basic Syntax

<textarea>
#ProductName$Price
Buy # now today $
_d=Product description
Option1=Value1,Value2
Option2=Value1,Value2
_img=ImageURL
_thm=ThemeNumber
</textarea>

Example

<textarea>
#Business Shirt$24.99
Buy # now today $
_d=This is real high quality office shirt for any business man or woman!
What Color do you want? (Required)/Color=![dropdown]Blue*blue*blue.jpeg,Green*green*green.jpeg,White*white*white.jpeg,Pink*pink*pink.jpeg
Size=![radio]XS,S,M,L,XL
Your Comment/comment=[text]
Do you want any Extras?/extras=[checkbox]Awesome Nice gift wrap*wrapping,extra pearl buttons*buttons
_img=/media/white.jpeg
_thm=5
</textarea>

In this mode:

  • Use newline characters to separate options and parameters
  • Follow the same syntax as in Advanced Mode for options and parameters
  • The textarea content is processed by FreeCart to create the product form

Themes

Customize the appearance of your buttons and forms with themes.

Button Themes

Use the _btm parameter to set a button theme (1-20):

<a href="#Stylish Watch$129.99&_btm=16">Buy # now</a>

If omitted, theme 10 is used as default.

Form Themes

Use the _thm parameter to set a form theme (1-10):

<a href="#Designer Sunglasses$89.99&Color=Black,Brown,Tortoise&_thm=5&_img='https://example.com/sunglasses.jpg'&_d=Protect your eyes in style">Choose Your Sunglasses</a>

Custom CSS (No Theme)

To use your own CSS, set a class on the a-tag element and omit the _btm parameter:

<a class="my_custom_class" href="#Handcrafted Necklace$79.99">Add to Cart</a>

Custom Forms (Detailed Form Mode)

For complete control over the form's appearance and functionality:


<form onsubmit="addToCart(this); return false;">
    <h2>Customizable Widget</h2>
    <input type="hidden" name="product-price" value="39.99">
    <input type="hidden" name="product-name" value="Customizable Widget">
    <input type="hidden" name="product-image" value="https://example.com/widget.jpg">
    <input type="hidden" name="product-weight" value="0.5">
    
    <label>Quantity:</label>
    <input type="number" name="quantity" value="1" min="1" required>
    
    <label>Color:</label>
    <select name="color" required>
        <option value="">Choose a color</option>
        <option value="red">Ruby Red</option>
        <option value="blue">Sapphire Blue</option>
        <option value="green">Emerald Green</option>
    </select>
    
    <label>Size:</label>
    <input type="radio" name="size" value="S" required><label>Small</label>
    <input type="radio" name="size" value="M" required><label>Medium</label>
    <input type="radio" name="size" value="L" required><label>Large</label>
    
    <label>Extra Features:</label>
    <input type="checkbox" name="features" value="waterproof"><label>Waterproof</label>
    <input type="checkbox" name="features" value="shockproof"><label>Shockproof</label>
    
    <label>Custom Engraving:</label>
    <input type="text" name="engraving" maxlength="20">
    
    <button type="submit">Add to Cart</button>
</form>

This form gives you complete control over the HTML structure and allows you to use your own CSS for styling.

Parameters

FreeCart supports various parameters to customize your product links and forms. Here's a comprehensive list:

1. _btm (Button Theme)

Sets the theme for simple buy buttons.

<a href="#Cool Gadget$49.99&_btm=7">Buy Now</a>

Values: 1-20, or empty string for custom CSS

2. _thm (Form Theme)

Sets the theme for product forms with options.

<a href="#Custom T-Shirt$29.99&Color=Red,Blue,Green&Size=S,M,L,XL&_thm=3">Customize</a>

Values: 1-10

3. _img (Product Image)

Specifies the product image URL. Can be used with ' to embrace advanced URLs (with & , etc) or without for simple URLs.

<a href="#Stylish Watch$199.99&_img='https://example.com/?advanced=3¶m=2'">View Watch</a>

4. _d (Product Description)

Adds a description to the product. Do NOT use & in the Description because that will end the description.

<a href="#Gourmet Coffee$14.99&_d=Smooth, rich flavor with hints of chocolate and caramel.">Buy Coffee</a>

5. _w (Product Weight)

Sets the product weight for shipping calculations.

<a href="#Heavy Book$39.99&_w=2.5">Purchase Book</a>

Value is in kilograms.

6. ! (Required Option)

Makes an option required in forms.

<a href="#Custom Mug$12.99&Color=![dropdown]White,Black,Red&Size=![radio]Small,Large">Personalize Mug</a>

7. Option Types

Specifies the type of option input.

  • [dropdown] - Creates a dropdown select (default if omitted)
  • [radio] - Creates radio buttons
  • [checkbox] - Creates checkboxes
  • [text] - Creates a text input field
<a href="#Gift Basket$59.99&Size=[radio]Small,Medium,Large&Extras=[checkbox]Chocolate,Wine,Cheese&Message=[text]">Create Gift Basket</a>

8. Option Captions

Adds a descriptive caption to an option.

<a href="#Custom Jewelry$89.99&Choose your metal/Material=![dropdown]Gold,Silver,Platinum&Add engraving?/Engraving=[text]">Design Your Jewelry</a>

9. Option Label, Name, and Image

Specifies different labels, internal names, and images for options.

<a href="#Luxury Watch$499.99&Case Color=![dropdown]Rose Gold*rosegold*rosegold.jpg,Yellow Gold*gold*gold.jpg,Platinum*platinum*platinum.jpg">Select Watch</a>

Format: Label*name*image.jpg