Koigo is a shopping cart that is placed in a website using a script tag and simple tags for Add to Cart and View Cart buttons. Information like price, description and other product traits can be pulled into a web page with Koigo Traits API tags.

With Koigo you maintain product information (prices, etc) using the Koigo web app. This means that when changes are made to a product they are applied automatically to your website.

Koigo can be used with static or dynamic web pages including WordPress. Read more about using Koigo with WordPress.

To generate an Add to Cart button and a View Cart button for a product, you would cut and paste code like this into your html:

<button onclick="koigoAdd('item_number')" type="button">Add to Cart</button>
<button onclick="koigoView()" type="button">View Cart</button>
<script src="https://js.koigo.io" data-koigo="unique_identifier_from_your_dashboard"></script>

Read more about Koigo tags here.

If you would like to have someone build a store for you using Koigo, please contact us.

Starting Your Subscription

To start with Koigo, subscribe to a free 30 day trial. You need a credit card and some basic information like your store name, contact information and email address.

To accept payments you need a PayPal account and/or a Stripe merchant account (for credit card payments).

You can open an account with Stripe from within the Koigo app in the Payments panel. Visit PayPal to set up an account if you don't have one. Koigo just needs the PayPal email that you will use to receive payments.

Detailed information on Koigo subscription plans is here.

To get started with Koigo you need to set up some details about your store, what taxes you charge, what kinds of shipping you provide (if you ship physical products) and how you want to get paid. Koigo supports payments using Stripe and PayPal as payment processors.

After the initial set up you can add to or change any of these settings. Any changes made are live as soon as you save them.

Once you've signed up for your Koigo account, the next step is to enter your store details in Store Settings.

You can manage your account details by clicking on manage_accounts at the top right-hand corner of the Koigo app.

You'll find the details you entered when you signed up for your account. These can be changed as needed.

• Subscription Type
  The plan that you're subscribed to. Please email us to change this.
• Organization Details
  Your business name and contact information for our bills to you.
• Email Address
  How we contact you.
• Payment Method
  The card used for paying your Koigo subscription.
• Billing History
  A summary of our bills to you and a link where you can download a pdf of your monthly subsctiption bill.
• Close My Account
  For closing your Koigo account.

Click Edit to enter basic information about your store that your customers can see:

• Currency
  Select USD to collect payments in US Dollars or CAD for Canadian Dollars. Note that you can only collect payments in currencies that your PayPal or Stripe account supports.

• Contact Email
  The email address that your customers will see in confirmation emails they receive when a purchase is completed.

• Timezone
  The time zone you want used for the time stamp for orders place in your store.

• Show Thumbnails in Shopping Cart
  If you have pictures of your products, this setting will display small thumbnail images in the shopping cart if selected.

• Send Order Confirmation Emails to Buyer
  Deselect this if you don't want notifications sent to your customer when they complete an order.

• Email Signature
  The signature that appears at the bottom of confirmation emails sent to your customers. Accepts basic text formatting.

If you've signed up for a plan that features digital downloads, you'll see additional settings:

• Shipping calculation includes non-physical items
  Decide whether bundled downloads count towards any free shipping threshold you offer (see Shipping Rules, below). Sometimes customers will add files to get enough in the cart for free shipping. You can decide if you want to allow this.

• Download Link Lifespan
  For security reasons, you'll want to limit this to a reasonable value so that your files aren't shared online. If you're selling physical products with files, you might want to make sure the Lifespan is long enough to allow for shipping of the physical product that it goes with.

• Download Link Max Hits
  Allow a reasonable number of attempts to download the file. Default is 10.

Press Save Changes to update the settings.

If you do not need to charge tax, you can skip this setting.

If you will be charging the same tax to all your customers, you can set a Default Tax Rate. Optionally, you can give the default rate a Sales Tax Description and a Sales Tax Number which will appear on invoices generated for your customers, if you use them.

To charge different rates in different regions, click Create a Tax Rule. Now, you can specify country-specific tax rules as well as per-state rules for the USA and per-province for Canada.

Following the prompts, enter the Tax Rate for each region and the Sales Tax Description and Sales Tax Number if needed.

Shipping rules determine how much you charge for freight or delivery and how it's calculated. If you're only selling downloads or you don't charge shipping at all, go ahead and skip this step.

Click Create to make a rule. You can make as many different Shipping Rules as you need.

Each Shipping Rule has a Name that identifies it in the Koigo app (only you see this) and a Label that the customer sees in the Koigo cart.

When a customer starts the checkout process, they're asked to slect a ship-to country and state/province (Canada and the USA). At this point, if there is more than one shipping option available for their location, they'll see a dropdown selector showing the different shipping Labels for the rules you've created here. Then, the shipping rate is displayed in the cart and they can see their total charge for the order.

Thus, you can offer multiple shipping methods to one location - for example, Standard, Priority and Express.

Shipping Rules are based on:

• Shipping Countries/Regions
  Select the country this rule applies to, and the states (USA) or provinces (Canada).
• Pricing Calculation
  Each shipping rule can have a different price calculation. This can be Free Shipping, a Flat Rate that's the same for every order or an Advanced calculation which allows you to charge shipping in a variety of ways:
  • Charge Per Item
    Set a Base Rate (Handling Charge) and a Charge Per item
  • Charge as a Percentage of Order Cost
    A Base Rate + a Percentage of Order cost
  • Charge Per Unit Weight
    Charge a Base Rate + a Charge Per Unit Weight. You can use kilograms or lbs/ounces as your units.
    Shipping is calculated as the Charge Per Unit Weight X kilograms, or Charge Per Unit Weight X ounces, depending on the units you've chosen
  • Charge by Weight Range Select a Minimum Weight (usually zero) and a Maximum Weight for a fixed charge. Select as many weight ranges as needed.

For example:
Charge $10 up to 1 lb:
Minimum Weight = 0 lbs 0 oz, Maximum Weight = 1 lb 0 oz
Charge $15 over 1lb:
Minimum Weight = 1 lb 0 oz, check Unlimited if this is the maximum shipping you'll charge

• Additional Options
  
  • Minimum Order Threshold
    Set a minimum Order Total (minimum order cost), Minimum Weight or Minimum Number of Pieces
  • Free Shipping Threshold
    Offer free shipping for a minimum Order Total or Number of Pieces in the orders

Koigo Cart collects order information from your customer and provides a secure interface to the payment processor. You can accept payments using Stripe or PayPal.

Click Edit to connect Koigo to Stripe and/or PayPal.

If you select Stripe, you'll be given the option to open a new account or connect to an existing one.

For PayPal, enter the email address of the PayPal account that you will use to accept payments. If you haven't set up a PayPal account, visit PayPal.com to do so.

You can specify the available payment methods by the customer's location.

• Select Stripe-Enabled Regions to set countries and states/provinces (USA and Canada) where Stripe payments will be available.
• Select PayPal-Enabled Regions to set countries and states/provinces (USA and Canada) where Stripe payments will be available.

If the customer selects a country or region that you haven't made available for Stripe or PayPal, that payment method will be hidden. You will need to enable at least one country or region for the payment method to be available in the checkout.

Koigo keeps track of your product traits using the Product Manager. Rather than storing information about your products in the front end - in your actual web page - the Koigo approach is to keep this data in the Koigo app and call on it when it needs to be displayed in your site.

This way, if you make changes to your product - for example updating the price - the changes appear right away on your website.

There are two ways to add products to Koigo:

• Product Manager
  This is where you can see all of your products and associated data. You can add products here one by one, or change any of the saved product data. Changes made here are live as soon as you Submit your changes.
• Product CSV Import
  This feature allows importing any number of products in bulk using a CSV file.

More information on Products is in the following sections in this guide.

The Product Manager tab displays your existing products and allows you to Create new ones. You can also search your existing products.

All of the product information below can be embedded in a web page using Koigo Traits API tags.

More information about Koigo Traits API tags.

The basic information that most products will have is:

• Images
  Images are optional, but recommended. Four images can be uploaded here (or selected from existing images in the Image Library). You can also add more images in the Custom Fields section.
  Image1 will be automatically used in thumbnail form if you have enabled images in the shopping cart.
• Short Description
  This is displayed in the cart and is usually a brief descriptive name for the product.
• Item Number
  A 'number' for the product which can consist of digits or letters. This is typically the SKU (Stock Keeping Unit) you use for this product.
  This number is used in Add to Cart and Koigo Traits API tags to identify the product.
• Long Description
  More details about the product can go here. This is not showed in the cart, but can be used in your web page using Koigo Traits API tags.
• Price
  The product price to be used in your site and in the cart. This can be called into a web page using a Koigo Traits API tag.
• Product Type
  Specify whether the product is:
  • Physical
    A shipping calculation will be performed; a Product Weight and Weight Units are required.
  • Digital
    This is a file download. Shipping and weight are not used.
    You can upload a file for the download using Select File Using System Dialog or pick it from files you've already downloaded using Select File from Existing Downloads. To learn about uploading files in bulk see Files.
  • Payment Only
    This is a product that doesn't require shipping, but isn't a digital file. It could be an item that is for pick-up, or a service provided.

Custom fields can also be added, and are accessible in a web page through Koigo Traits API tags.

You can add products one at a time in the Product Manager or upload any number at once in Product CSV Import.

CSV (Comma Separated Value) files are text files that can be generated from a spreadsheet. The individual cells are separated by commas.

Using the Product CSV Import feature, you can upload large numbers of products at once to Koigo.

You can download a CSV template file in the CSV Importer. This can be opened in Excel, Open Office, Libre Office or any other csv program. Once you've entered the product information in your spreadsheet, save it as a CSV file.

Here are a few points to remember:

• Some fields are required. See the chart below for details.
  If a field is not required, you can leave it blank if you're not using it. This way you can use the template as is, even if you don't need all the fields.
• Uploading the CSV will overwrite the information in existing products and will create new products if they're not already present.
• If you have a plan that has digital products and you specify the product_type of digital then you must upload the file for the digital product before trying to upload the CSV. The CSV upload will fail if it's not done in that order.
• When you're uploading custom fields, the column header will be the field name for the trait in the Traits API tags.
• Field names (column headers) are case-insensitive, only letters, numbers, underscores and dashes are allowed.

After creating the CSV, click Choose File to select it from your device. The file will be checked for errors, and if it's OK, you'll be able to click Process File to load it into Koigo. At that point, the data will be live in your site.

Product CSV Import Fields

The Image Library allows you to manage your saved images. You can search for images or Upload new ones.

Uploading a new image with the same filename as an existing image will overwrite the image.

If you want to Edit an image, click on the create icon. You will be able to rename the image or upload a new file.

You can upload images here to use as Product Images in the Product Manager, or access them in a web page using a Koigo Traits API tag.

To access any random image by filename, use a Traits API tag like this:

<koigo-image filename="someimage.jpg" trait="original"></koigo-image>

More information about Koigo Traits API tags.

The Image Uploader is a shortcut to uploading images from your device. Select Choose Images to select and upload images.

These images can be used as Product Images in the Product Manager, or accessed in a web page via a Traits API tag.

If you have a plan that features file downloads, File Manager and File Uploader are available.

If you have digital products, you can use File Manager to upload new files and manage existing ones, including manually sending download links to customers.

Before using Product CSV Import to load your products, you must upload your digital products to Koigo using File Manager.

Download Links:
Koigo creates an encrypted link to the item automatically, but you can also do this manually:

• Generate a link manually by clicking on the link in File Manager.

• Email a link with send

To edit a file -- rename it or change the source file -- use create

File Uploader lets you upload many files at once using a system dialog. It's a shortcut to the Upload function in File Manager.

Koigo tools are the Invoice Manager where you can review and manage customer transactions as well as generating invoices and HTML Tags where you can generate cut-and-paste tags for product data to include in a web page as well as cart tags.

You can also Connect to ShipStation.

Invoice Manager lets you search existing invoices, and save or send invoices. If you've selected Send Order Confirmation Emails to Buyer under Store Settings, these are sent automatically when a purchase is made, but you can re-send them here.

You can also filter your search results by Date Range, Payment Method and Payment Status.

The ShipStation tab in the Koigo app covers the steps to set up sending orders to ShipStation^*.

To use this feature, sign up with ShipStation separately, and then follow the instructions in the Shipstation tab in the Koigo app to generate the endpoint which supplies ShipStation with your order data. You'll need the custom username and password that Koigo app generates for you in the last step of the set up procedure.

*Koigo is not affiliated with ShipStation, but we're happy to provide an endpoint to use with their service. Trademarks belong to the registered owners.

Koigo generates HTML tags that you use to build your ecommerce website.

There are two types of Koigo tags:

Koigo Cart Tags

Koigo Cart Tags use a Koigo function to build a cart tag, like this Add to Cart button:

<button onclick="koigoAdd('item_number')" type="button">Add to Cart</button>

Koigo Traits API Tags

Koigo Traits API tags are special tags that pull product data into your site, like this Price tag:

  <koigo-product itemnumber="item_number" trait="price"></koigo-product>

or this image tag:

  <koigo-image filename="someimage.jpg" trait="original"></koigo-image>

Read more about Koigo tags in the following sections.

Include a Koigo script tag

To use the Koigo shopping cart, include the Koigo script in your page once:

<script src="https://js.koigo.io/cart" data-koigo="unique_identifier_from_your_dashboard"></script>

You can find a customized tag with you unique identifier in the Koigo app, in the HTML Tags section (HTML Tags > Shopping Cart > Step 1).

A good place is just before the closing </body> tag. The contents of the data-koigo field is the unique identifier for your cart.

View Cart

Copy and paste a KoigoView() button tag from HTML Tags>Step 2 wherever you want an View Cart button:

<button onclick="koigoView()" type="button">View Cart</button>

The resulting button will be displayed using the existing formatting from your page. If you've used css to style buttons, Koigo will follow that style. Here is the result with the styling we're using in this documentation site:

View Cart

The code for this button, with our Bootstrap css styling applied is:

<button onclick="koigoView()" type="button" class="btn btn-primary">View Cart</button>

You can use images or other elements for cart buttons - anywhere you can add an onclick method you can use KoigoView() to display the cart. For example, in our demo we use a cart icon to display the cart like this:

Here we've used a Font Awesome icon as the cart image, rather than a button.

The code for this button using Font Awesome css is:

<i class="fa fa-shopping-bag" img onclick="koigoView()"></i>

Add to Cart

The KoigoAdd() function needs the item number that is to be added to the cart when the button is clicked:

<button onclick="koigoAdd('item_number')" type="button">Add to Cart</button>

Just replace item_number with any item number that you've already added in the Product Manager. If you used CSV Uploader this is the item_number field.

You can use onclick="koigoAdd('item_number') with images or icons as well, and the styling will follow your css.

For example:

Add to Cart

The code for this button, with our Bootstrap css styling applied is:

<button onclick="koigoAdd('FRT124')" type="button" class="btn btn-primary">Add to Cart</button>

See a live Koigo cart demo here.

The Koigo Traits API provides a special <koigo-product> tag that lets you include product information - we call them Traits - in your page. Any product information field that you specify in the Product Manager can be pulled into your page this way.

<koigo-product> tags behave like <span> tags when the Trait is text or a number, so you can apply css with class or style attributes as usual.

When the Trait is an image, the <koigo-product> tag behaves like an <img> tag.

Include a Koigo Traits script tag

To use Koigo Traits tags, include the script in your page once:

<script src="https://js.koigo.io/traits" data-koigo="unique_identifier_from_your_dashboard"></script>    

You can find a customized tag with you unique identifier in the Koigo app, in the Traits API section (HTML Tags > Traits API > Step 1).

A good place is just before the closing </body> tag. The contents of the data-koigo field is the unique identifier for your cart.

Available Traits

You can embed information about your products using tags like this:

<koigo-product itemnumber="item_number" trait="trait_name"></koigo-product>

Here are some examples using the basic and custom fields that you enter in the Product Manager or upload using the CSV Uploader.

Item_number is the unique identifier that you are using for each product.

Long text fields - long_description and custom fields - preserve whitespace (eg. newlines). If you want to render this whitespace, you can apply css styling like white-space: pre to render the whitespace similar to a <pre> tag. More information is in the MDN Docs.

• Short Description
  

      <koigo-product itemnumber="item_number" trait="short_description"></koigo-product>
  

• Long Description
  

      <koigo-product itemnumber="item_number" trait="long_description"></koigo-product>
  

• Price
  

      <koigo-product itemnumber="item_number" trait="price"></koigo-product>
  

• Image
  A full size version of any of the images entered into the Product Manager can be embedded this way. Use image_1, image_2, image_3 or image_4 as needed.

      <koigo-product itemnumber="item_number" trait="image_1"></koigo-product>
  

• Thumbnail
  To embed a 128px X 128px thumbnail of one of the four primary product images, use a tag like this:

      <koigo-product itemnumber="item_number" trait="image_1_thumbnail"></koigo-product>
  

• Custom
  Any of the custom fields that you have created in the Product Manager or the CSV Uploader can be embedded using a tag like this. The custom value below represents the field name that you specified and the value is returned with white space preserved.
  

  <koigo-product itemnumber="item_number" trait="custom"></koigo-product>
  

Image Tags use the same Koigo Traits API script as Product Tags. The tag needs to be included once in every page:

<script src="https://js.koigo.io/traits" data-koigo="unique_identifier_from_your_dashboard"></script>  

Any image saved in Koigo can be embedded in a web page using a <koigo-image> tag. You can manage your saved images in the Image Library.

The <koigo-image> behaves like a <img> tag and can be styled with class or style attributes in the same way.

To embed a full size image, use a tag like this:

<koigo-image filename="someimage.jpg" trait="original"></koigo-image>

For a 128px X 128px thumbnail use:

<koigo-image filename="someimage.jpg" trait="thumbnail"></koigo-image>

The image below is styled using css from this docs page:

The HTML for this image is:

<koigo-image filename="kissin-koi-1408235-400h.jpg" trait="original" class="img-fluid" alt="Kissin Koi"></koigo-image>

In this case, we've applied our Bootstrap css and supplied an alt attribute.

Koigo tags can be embedded anywhere that you can use HTML tags, including WordPress.

WordPress Using Gutenberg Editor

The easiest way to add Koigo HTML to a WordPress site is using the modern Gutenberg block editor.

1. Start a new post or page or open an existing once
2. Click on some content to find the + icon button and click on it.
3. Search for 'Custom HTML' and click to open.
4. Enter your Koigo HTML at the 'Write HTML...' prompt.

In order to use all the Koigo tags, you need to include the script tags for the Cart and Traits once in each page:

<script src="https://js.koigo.io/cart" data-koigo="unique_identifier_from_your_dashboard"></script>
<script src="https://js.koigo.io/traits" data-koigo="unique_identifier_from_your_dashboard"></script>

You can put the scripts above into its own block, and then add other Koigo tags in separate blocks, or have everything in one block.

Any Cart or Trait tags need to be enclosed in a <div> tag with the correct class attribute to render properly. Older themes use

<div class="wp-block-button"></div>

and later ones use

<div class="wp-block-buttons"></div>

You may have to try both ways to see which one works in the theme you're using.

Buttons should have this style applied: class="wp-block-button__link".

To add a View Cart button, you would use:

<button onclick="koigoView()" type="button" class="wp-block-button__link">View Cart</button>

It would also be helpful to add a short_description, picture and a price to make a product card. A completed WordPress code block with script tags and a few Traits could look like this:

<script src="https://js.koigo.io/cart" data-koigo="unique_identifier_from_your_dashboard"></script>
<script src="https://js.koigo.io/traits" data-koigo="unique_identifier_from_your_dashboard"></script>
<div>
  <koigo-product itemnumber="item_number" trait="image_1" alt="alt_text_goes_here"></koigo-product>
  <koigo-product itemnumber="item_number" trait="short_description"></koigo-product>
</div>
<div>
  Only $<koigo-product itemnumber="item_number" trait="price"></koigo-product>
<div class="wp-block-buttons">
  <button onclick="koigoView()" type="button" class="wp-block-button__link">View Cart</button>
  <button onclick="koigoAdd('item_number')" type="button" class="wp-block-button__link">Add to Cart</button>
</div>

To use this code block, substitute the placeholder_values for real values from your Koigo app.