Index > Adding a Shop to my Website

The Wizz-it Shop makes it easy to sell and manage your products online.  You can have 1 shop per page on your website (if you have more than one shop in your site then ofcourse when your users are shopping there will be one centralised 'checkout' page).

The Wizz-it shop basic setup consists of three steps:

  1. Adding products.
  2. Adding shipping methods.
  3. Adding payment methods. 

1. Adding Products

First drag the Shop widget (located in the Ecommerce folder) onto your page.

A button will display in the Shop dialog box that opens saying 'Step 1. Add a product'. Click this button to add your first product.

The “Product” setup dialog box provides a variety of options:

  • Title: This is the name of your product, it should be a short description of your product.
  • Description: This is a more lengthy description of your product, it will be displayed when a users clicks through to the product's description page.
  • Price: This is the price of your product in your default currency (which you will choose later on). Please do not enter the currency symbol in this box.
  • Limit: Enter the maxiumum amount of this particular product that a user can buy.
  • Product Image: You can have upto 3 images per product. On the left hand sie you will see the Add Image button. Click this and select upto 3 images. Once added you can re-order the images by dragging them up/down. The image at the top will be used as the main thumbnail image.

  • Product Options: The Wizz-it shop also allows you to add a variety of options to your product. For example, if you are selling coffee beans, you can add options for the different size bags you sell. When customers click to buy a bag of coffee beans, they’ll be prompted to choose a size and if you want can also see the price difference between the various options.

    To add an option without price difference (eg colours etc):  
    1. Check the 'Allow users to select different product types' box.
    2. Add the title (eg Colours).
    3. Click the 'add item' button to add the first option.
    4. Repeat this step for each option.

    To add an option with price differences (eg sizes etc):  
    1. Check the 'Allow users to select different product types' box.
    2. Add the title (eg Sizes).
    3. Click the 'add item' button to add the first option, entering the option name and the price.
    4. Repeat this step for each option.

    If you want to allow users to select the quantity of items from a drop down menu just check the "Allow users to select quantity" box and in the field below enter the maxiumum number of items they can select.

2. Adding Shipping Methods

The Wizz-it shop supports shipping options worldwide. There are three different shipping calculations available:

  • Variable: Calculates shipping cost as a percentage of the subtotal before discounts, 
  • Fixed: a value multiplied by the total quantity, 
  • Flat: Set a flat shipping rate, or specify free shipping. 
  • Function: Alternativly you need another type of shipping than the above - contact us at Wizz-it and we will do this for you!
     
    To add a shipping method:
  1. Click on the Shop Options tab and scroll down to the Shipping Options section.
  2. Select the Shipping Type you want to use above from the Shipping Type menu.
  3. Depending on what Shipping type you selected, enter the value in the Shipping Rate field (eg if you selected 'flat' enter the amount in this box).  If you want people to be able to select from a menu with different shipping options (eg countries) then you need to enter your options in a list using this format below (please copy both curly brackets too)
    { 'UK': 5.00, 'International': 10.00 } 
    NB: You must follow this format if you use the options, eg:
    { 'menu option' : numeric amount, 'menu option 2': numeric amount }
  4. If you want to offer free shipping over a certain amount select 'True' from the Shipping Exempt field and enter the sub-total amount at which shipping becomes free in the Shipping Exempt Value field.
  5. Alternativly if you want to use one of the 3rd party providers to calculate shipping and want to hide the shipping on your wizz-it shop check the 'don't display shipping costs' box at the bottom.
  6. To activate a shipping option, click “Enable”.  

Adding Payment Methods

The Wizz-it shop integrates with some of the most trusted of payment gateways. The two most popular gateways are PayPal and Google Checkout. To use either of these with the Wizz-it shop, you can simply sign up for a merchant account. 

Sign up for a PayPal account
Sign up for a Google Checkout account

Once you have your account set up, you can add a payment method to your shop by following these steps:

  1. Click on the Shop Options tab and scroll across to the Checkout section.
  2. Check the payment gateway that you want to use.
  3. Enter the required information for the payment gateway that you have chosen. If they as for a Username & Domain, this is simply your payment gateway's registered email address divided up: the first half of the email address (upto the @ symbol) goes in the Username field, and the second half (after the @ symbol) goes into the Domain field. This is simply to deter email harvesters.

Other Shop Options

You can also choose other options for your shop which can be found in the Shop Options tab, in the General Options section.

  1. Click through to a description page? If checked, when users click on an item it will take them to a separate page which will display the other image and product description.
  2. Allow magnification of image on description page? This will dispaly a magnifier if the user hovers over the image on the description page, allowing your users to get a closer look at the item. if you would like it more or less magnified just contact us.
  3. Allow discount code option? If checked this will display a field on the checkout page asking users to enter a discount code which will deduct a percentage off the sub-total price. Just enter the code and discount amount (in percent) that you want to offer your users. The discount code will only be applied to items in the user's checkout cart that are from that shop widget (this allows you to have different discounts for each section in your shop).
  4. Thumbnail Options. Select how you want your thumbnails to be displayed.
  5. Thumbnail Size. Select how big you want your thumbnail images on the main shop front page.
  6. Item Width. Total width of each item in the ship front. This is different from the thumbnail size as it is the size of the whole product including the title (allows you to have a smaller thumbnail with a wider title etc).
  7. Currency. Default currency of your shop
  8. Logo to display on payment gateway's checkout page.
  9. Tax Rate. This is the amount of tax you want to add onto the sub-total (leave it at 0 if you don't want to add any on).
  10. Tax Exempt. If true, when the subtotal is greater than the tax exempt value (below), tax is free. If false, tax is free when the subtotal is below the tax exempt value (below).
  11. Tax Exempt Value. The value as defined above.