FreeCart Quickstart Guide

SIMPLE FORM MODE (Multiple Options)

Minimum Required Example Code:

<a href="#Shirt$24.99&Color=Blue,Green,White,Black">Add To Cart!</a>

This creates a simple Product FORM using the default Form Theme with options. The Option type defaults to "[dropdown]" if omitted. When product options, images, or descriptions are used, FreeCart automatically opens a modal detail window, providing customers with more product information and a quick, easy purchasing experience.

Product Description

Add your product description with the TITLE attribute in the a-tag or parameter _d in the URL - For the a-tag you can use html-code to make your description look nicer. Never use & in the description if you use the parameter _d

<a href="#Shirt$24.99&Color=[radio]Blue,Green,White,Black" title="This shirt is made of the finest quality and looks stunning! It is manufactured by the monks of Tibet of pure Goat Wool.">Add To Cart!</a>

<a href="#Shirt$24.99&Color=[radio]Blue,Green,White,Black&_d=This shirt is made of the finest quality and looks stunning! It is manufactured by the monks of Tibet of pure Goat Wool.">Add To Cart!</a>

More Options

Specify multiple options by separating them with '&'. This allows you to create a more detailed product form with various customization options:

<a href="#Shirt$24.99&Color=Blue,Green,White,Black&Size=XS,S,M,L,XL">Add To Cart!</a>

Different Option Types

Four option types are available to create a versatile and user-friendly product form:

• [dropdown] - Creates a dropdown list, ideal for options with multiple choices
• [radio] - Creates radio buttons, perfect for mutually exclusive options
• [checkbox] - Creates checkboxes, great for optional add-ons or features
• [text] - Creates a text field, useful for personalization or custom requests

Example using option types:

<a href="#Shirt$24.99&Color=[radio]Blue,Green,White,Pink&Size=[dropdown]XS,S,M,L,XL">Add To Cart!</a>

REQUIRED Options

Make an option required by adding '!' before the option type. This ensures that customers provide necessary information before adding the item to their cart:

<a href="#Shirt$24.99&Color=![dropdown]Blue,Green,White,Pink&Size=![radio]XS,S,M,L,XL">Add To Order</a>

PRODUCT IMAGES

Add an image to your product by including an img tag or using the '_img' parameter. If the customer clicks the image a product detail window will open with a large image and product details. You can also add multiple images to a product, and then a product image carousel will be shown that allows your customer to cycle through the images. To add multiple images, just add more img tags, or use the _img parameter, separate each image with a comma.

<a href="#Shirt$24.99&Color=![dropdown]Blue,Green,White,Pink&Size=![radio]XS,S,M,L,XL&_img='https://freecart.store/media/white.jpeg','https://freecart.store/media/blue.jpeg'">Add to basket</a>

<a href="#T-Shirt$14.00&Color=![dropdown]Blue,Green,White,Pink&Size=![radio]XS,S,M,L,XL"><img src="https://freecart.store/media/tgreen.jpeg"><img src="https://freecart.store/media/tgreen2.jpeg"><img src="https://freecart.store/media/tgreen3.jpeg">Add to basket</a>

Add to basket

Options Captions

Add captions to describe options using the '/' character. This provides clear instructions to customers in the modal detail window:

<a href="#Shirt$24.99&What Color do you want? (Required)/Color=![dropdown]Blue,Green,White,Pink">Add to Cart</a>

Option Label, Name and Image

Use different labels for options and change product images based on selection. This creates an interactive experience in the modal detail window. Separate Label, Name and Image with a *. example: Lavendel Blue*blue*blue.jpg - This will Show "Lavendel Blue", store "blue" in the cart, and when selecting it in the Product View, it will load the image "blue.jpg" from the same folder as the original image.

<a href="#Shirt$24.99&What Color do you want? (Required)/Color=![dropdown]Blue*blue*blue.jpeg,Green*green*green.jpeg,White*white*white.jpeg,Pink*pink*pink.jpeg&_img='https://freecart.store/media/white.jpeg'">Add to basket</a>

FULL OPTIONS Example

Use any combination of options to build your advanced product. This comprehensive example showcases how to create a detailed product form that opens in the modal window:

a href example (params/options separated with &)

<a href="#Business Shirt$24.99&_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&_thm=5""><img src="https://freecart.store/media/white.jpeg"></a>

textarea example (params/options separated with newline)

<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=https://freecart.store/media/white.jpeg
_thm=5
</textarea>

Product View Themes

Select from 20 different themes using the '_thm' parameter. Not stating the _thm will use the default theme, and this can be changed on the Control Panel. This allows you to match the modal window's appearance to your website's design:

<a href="#Shirt$79.99&Color=blue,pink,green,yellow&_thm=3&_img='https://freecart.store/media/white.jpeg'&_d=Formal Shirt for meetings">Add to cart</a>

<textarea>
#Business Shirt$79.99
Add to cart
_d=Formal Shirt for meetings
Color=![dropdown]blue,pink,green,yellow
_img=https://freecart.store/media/white.jpeg
_thm=3
</textarea>

DETAILED FORM MODE

For full control over the product form, build it using regular HTML and your own CSS/Styles. This method gives you complete customization over the form's appearance and behavior:

<form>
    <h2>Oxford Shirt</h2>
    <input type="hidden" name="product-price" value="25.50">
    <input type="hidden" name="product-name" value="Oxford Shirt">
    <label>Quantity:</label>
    <input type="number" name="quantity" value="1" min="1" required>
    <br>
    <label>Color: (Required)</label>
    <select name="color" required>
        <option value="">Select Color</option>
        <option value="blue">Blue</option>
        <option value="white">White</option>
        <option value="grey">Grey</option>
    </select>
    <br>
    <label>Size: (Required)</label>
    <input type="radio" name="size" value="S" required><label>S</label>
    <input type="radio" name="size" value="M" required><label>M</label>
    <input type="radio" name="size" value="L" required><label>L</label>
    <input type="radio" name="size" value="XL" required><label>XL</label>
    <input type="radio" name="size" value="XXL" required><label>XXL</label>
    <br>
    <label>Customize the shirt: (Not Required)</label>
    <br>
    <input type="text" name="details">
    <br>
    <button type="submit" disabled>Add to Cart</button>
</form>

Key points for building custom forms:

• Create an HTML form without an action property to ensure proper integration with FreeCart.
• Include hidden inputs for "product-price" and "product-name" to set the basic product information.
• Use any combination of checkboxes, radio buttons, dropdown lists, and text inputs for options to create a versatile form.
• FreeCart will scan the form and create a product name based on the selected options, making it easy for customers to identify their choices.
• Use the "required" attribute to make fields mandatory, ensuring that customers provide all necessary information.
• Include a quantity input with a default value of 1, allowing customers to easily adjust the number of items they want to purchase.
• You can add your own "Add to Cart" button, or FreeCart will add one automatically if omitted. This flexibility allows you to customize the button's appearance and placement.
• When using product images, descriptions, or multiple options, FreeCart will automatically open a modal detail window. This feature provides customers with a comprehensive view of the product and its options, enhancing their shopping experience.
• The modal window is designed to be responsive and user-friendly, allowing customers to easily view product details, select options, and make purchases without navigating away from the current page.

Modal Detail Window Feature

The FreeCart modal detail window is a powerful feature that enhances the customer's shopping experience. Here's what you need to know:

• Automatic Activation: The modal window automatically opens when you use product images, descriptions, or multiple options in your FreeCart link or form.
• Rich Product Information: The modal window displays comprehensive product details, including images, descriptions, and all available options, giving customers a complete view of the product.
• Interactive Options: Customers can easily select different options, see real-time updates (such as price changes or image swaps), and customize their product directly in the modal window.
• Quick Purchase: The modal window includes an "Add to Cart" button, allowing customers to complete their purchase without navigating away from the current page, streamlining the buying process.
• Responsive Design: The modal window is designed to work seamlessly on both desktop and mobile devices, ensuring a consistent experience across all platforms.
• Customizable Appearance: You can use the '_thm' parameter to select from different themes, helping you match the modal window's appearance to your website's design.

By leveraging the modal detail window feature, you can create a more engaging and informative shopping experience for your customers, potentially increasing conversion rates and customer satisfaction.

Best Practices for Using FreeCart

To make the most of FreeCart's features and the modal detail window, consider the following best practices:

• Use High-Quality Images: Include clear, high-resolution product images to showcase your items effectively in the modal window.
• Write Detailed Descriptions: Provide comprehensive product descriptions that highlight key features and benefits, helping customers make informed decisions.
• Organize Options Logically: Group related options together and use clear labels to make it easy for customers to customize their products.
• Leverage Dynamic Images: Use the option to change product images based on selected options to give customers a visual representation of their choices.
• Keep Forms Concise: While it's important to offer customization options, avoid overwhelming customers with too many choices. Focus on the most important options.
• Test Thoroughly: Ensure that all options, images, and descriptions display correctly in the modal window across different devices and browsers.
• Optimize for Mobile: Remember that many customers shop on mobile devices, so make sure your product forms and modal windows are mobile-friendly.