VipCart Comprehensive Reference Guide

Setup

To activate VipCart on your website, follow these steps:

1. Add the VipCart Script

<script src="https://vipcart.eu?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 VipCart 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>

VipCart replaces # with the product name (e.g., Cool T-Shirt).
VipCart replaces $ with the price + store currency (e.g., 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 in the product modal and cart.

3. With Product Description

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

Use # and $ inside descriptions to inject the name/price. Don’t use & inside _d.

4. With Weight for Shipping Calculations

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

_w is kilograms (used by shipping rules).

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
[radio]
[checkbox]
[text]

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. 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. 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>

Prefix with ! to make an option required.

4. 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 Caption/Name to show a friendly label but keep a clean field name.

5. Labels, Names & 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. Selecting an option can swap the main image.

Textarea Mode

Use a textarea for readable, multi-line product definitions.

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>

Each line is either key=value or plain button text. Parsing is newline-based (line breaks = separators).

Themes

Customize the appearance of your buttons and forms.

Button Themes

Use _btm (1–20):

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

If omitted, theme 10 is used by default.

Form Themes

Use _thm (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)

Set a class on the <a> and omit _btm:

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

Custom Forms (Detailed Form Mode)

Full control over markup and styling:

<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>

Submit calls addToCart(this) just like generated forms.

Images & Galleries

There are several ways to attach images:

Image inside the link (used as main image).

<a href="#Ring$49"><img src="/img/ring.jpg" alt="Shiny ring"></a>

_img parameter (supports quoted complex URLs and multiple entries).

<a href="#Ring$49&_img='/cdn/img/r1.jpg'&_img='/cdn/img/r2.jpg'">Buy #</a>

Plus-links for extra images – place one or more links with href="+" immediately after the main link:

<a href="#Lamp$29.90"><img src="/i/lamp-1.jpg"></a>
<a href="+"><img src="/i/lamp-2.jpg"></a>
<a href="+"><img src="/i/lamp-3.jpg"></a>

Option images – with Label*name*image.jpg the main image swaps when selecting.

Pro Tips & Edge Cases

Force modal view: prefix the product name with * to always open the product modal (even without options).
```
<a href="#*Poster$12.00&_img='/p1.jpg'&_d=Great wall poster">See #</a>
```

Custom button label: override via _lt.

<a href="#Socks$5.99&_lt=Grab # for $">Default ignored by _lt</a>

Hide the inline “Add” button on product cards: _ab=0 (useful when you only want a modal).
```
<a href="#Tea Set$39&Color=Green,Blue&_ab=0">View details</a>
```
Ignore original link class: _ic removes the original class on the <a> when theming the button.
```
<a class="my-old-class" href="#Necklace$79&_btm=8&_ic">Buy #</a>
```
Provide your internal Product ID: set name (preferred) or id attribute on the link/textarea.
```
<a name="SKU-123" href="#Cap$14.90">Buy #</a>
```
This ID is stored with the cart item and passed to checkout metadata.
JPY / HUF: these currencies use whole units only. Prices are rounded client-side and a notice is shown.
Modal vs Direct Add: if a product has images, description, or options, clicking the card opens the modal; otherwise it adds directly.

Parameters

VipCart supports various parameters to customize your product links and forms.

1. _btm (Button Theme)

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

Values: 1–20, or omit and use your own CSS class.

2. _thm (Form Theme)

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

3. _img (Product Image)

Accepts simple or quoted URLs. Multiple _img entries become a gallery.

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

4. _d (Product Description)

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

Don’t include & inside _d. You may use # and $ placeholders.

5. _w (Product Weight)

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

6. Required options (`!`)

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

7. Option types

<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

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

9. Labels, names & images

<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>

10. Extra helpers

_lt – override button text
_ab=0 – remove inline “Add” button from product card
_ic – ignore the original CSS class on the link
* before product name – force modal
name/id attribute on the link/textarea – pass your internal product ID

Setup

1. Add the VipCart Script

2. (Optional) Specify Cart Position

3. Configure Settings

Simple Mode (No Options)

Basic Syntax

Examples

1. Basic Buy Button

2. Image Button

3. With Product Description

4. With Weight for Shipping Calculations

Advanced Mode (Multiple Options)

Basic Syntax

Option Types

Examples

1. Basic Multi-option Product

2. Different Option Types

3. Required Options

4. Option Captions

5. Labels, Names & Images

Textarea Mode

Basic Syntax

Example

Themes

Button Themes

Form Themes

Custom CSS (No Theme)

Custom Forms (Detailed Form Mode)

Images & Galleries

Pro Tips & Edge Cases

Parameters

1. _btm (Button Theme)

2. _thm (Form Theme)

3. _img (Product Image)

4. _d (Product Description)

5. _w (Product Weight)

6. Required options (!)

7. Option types

8. Option captions

9. Labels, names & images

10. Extra helpers

6. Required options (`!`)