Zakeke Documentation v1.3


Zakeke Interactive Product Designer for WooCommerce

Created: 06/12/2017
By: Zakeke
Email: help@zakeke.com

Thank you for purchasing Zakeke. If you have any questions that are beyond the scope of this help file, please please contact us. Thanks so much!


Table of Contents

  1. Introduction
  2. Quick start guide
  3. Full guide
    1. Create a new account
    2. Installation of the Zakeke plugin
    3. Back Office
    4. User profile
    5. Dashboard
    6. Orders
    7. Products
    8. Theme
    9. Sides
    10. Printing methods

1) Introduction - top

Zakeke is a cloud-based platform empowering eStores to offer their customers live product customization. By integrating Zakeke, the merchant will enable eShoppers to personalize products before buying. Zakeke is multi-language and multi-currency to automatically fit any store anywhere in the world.

This document contains a full guide to properly install, configure and manage Zakeke.

Besides the full guide, a quick start guide is provided in this document.

Zakeke

2) Quck start guide - top

Integrate and configure Zakeke for your WooCommerce store in a few steps.

  1. Create an account with Zakeke here.
  2. Integrate Zakeke with your WooCommerce store:
    1. Upload Zakeke zip file in the section Plugins in your WordPress admin panel.
    2. Insert your Zakeke account details (username and password) in WooCommerce > Settings > Integrations > Zakeke Interactive Product Designer.
    3. Generate API keys by clicking on Add Key in WooCommerce > Settings > API > Keys/Apps. Permissions must be set on Read/Write value.
    4. Access your Zakeke account, select WooCommerce in ADVANCED > E-Commerce and insert Consumer Key and Consumer Secret values generated in the previous step. Insert your WooCommerce URL as well (note: if you have a multisite installation, make sure to include the installation path in the URL, es: https://www.store.com/en).
    5. Activate your Codecanyon license by clicking on NEXT in the “License” step in your Zakeke admin panel. You will be redirect to Envato login where you will need to login with your Envato/Codecanyon credentials and click on APPROVE.
  3. Configure your first product to allow your customers to personalize and buy it:
    1. Click on Products in the sidebar of your Zakeke account dashboard, click on Add Product in the right top corner of the window and select the product to be configured for customization from your store catalog.
    2. You now need to configure the product. Follow the steps:
      1. Choose / Add the printing method that will be used to produce the product.
      2. Select the range of colors and/or a set of attributes of the product. If the product has no colors or attributes, the system will skip this phase.
      3. Select / Create the areas of the product to make available for the customization (for t-shirt, as example, it will be front, back and/or sleeves).
      4. Upload the image corresponding to each color/side of the product. Your client will make his/her customization on this image.
      5. Define printing areas within which the customer can customize the product with texts, cliparts, or images.
      6. Set the customization cost. This cost will be add to the product price to get the final price of the product.
      7. Save.

Your first customizable product is now online! On the product page in your store, next to the “BUY” button, “CUSTOMIZE” button appeared. By clicking that button, your customer will be able to enter Zakeke platform and personalize the product before buying!

If any of the step is not clear to you, please refer to the Full guide in this document or feel free to contact us at help@zakeke.com.


3) Full guide - top


A) Create a new account - top

The first step to start using Zakeke is the creation of a new account on Zakeke: https://codecanyon.zakeke.com/Admin/Register.

You are asked to enter:

Registration step

Besides, there are two checkboxes:


B) Installation of the Zakeke plugin - top

Before you start, make sure you use at least WordPress 4.6 and WooCommerce 2.6. Permalinks must be enabled, and you must have php-xml module enabled.

The following instructions are about the WooCommerce integration with Zakeke:

  1. Log into your WordPress site.
  2. Go to: Plugins > Add New.
  3. Click on Upload Plugin.
  4. Select The zip file of the Zakeke plugin that you downloaded.
  5. Click on Install Now.
  6. Click on Activate.

Plugin configuration and integration of Zakeke:

  1. Go to: WooCommerce > Settings > Integrations > Zakeke Interactive Product Designer.
  2. Setup Zakeke as follows:
    • Zakeke username: your Zakeke username. If you haven't created an account yet, please create one;
    • Zakeke password: your Zakeke password.
  3. Zakeke Setup

  4. Finish by clicking on Save Changes.
  5. Go to: WooCommerce > Settings > API and make sure that REST API are enabled.
  6. Go to: WooCommerce > Settings > API > Keys/Apps.
  7. WooCommerce api add Zakeke key

  8. Click on Add key.
  9. Setup the details as below:
  10. Click on Generate API key.
  11. Take note of Consumer key and Consumer secret values.
  12. Take note of the Zakeke API keys

  13. Access to your Zakeke account and navigate to: ADVANCED > E-Commerce.
  14. Select WooCommerce.
  15. Setup the E-Commerce as below:
  16. Click on CONFIRM.

Activate your Codecanyon license:

  1. Go to: Zakeke admin
  2. Click on NEXT in the "License" step.
  3. Activate codecanyon license

  4. Type your product license code in the box and click ACTIVATE.
  5. Start the activation process

  6. Zakeke will check if the license code is valid and compatible with your e-commerce and activate it.
  7. If a valid license is found, you will be redirect to the Zakeke admin dashboard with a message that confirm the activation.
  8. You are readu for Zakeke


C) Back Office - top

The Back Office of Zakeke is your control panel where you can manage your personal account, navigate between received orders, configure your customizable products, manage your image gallery and set printing areas and modes.

The Back Office is composed by:

Main page of Backoffice

D) User profile - top

The user profile has all information associated with your account on Zakeke. In order to access to your profile section and to see or change data, click on User profile into sidebar.

User profile access

The window that opens lets you see your user information like name, email and username and allows you to upload a profile image of your brand / logo. The images must be saved in PNG, GIF (not animated), BMP and JPEG files with a maximum size of 5 MB.

Uploading profile image

From here it's also possible to set the timezone used by Zakeke to show you all times and dates according to the schedule more suited to you. When you register to Zakeke the system automatically recognise your most suited timezone, but you're always free to change it into this section.

Managing timezone

Besides, you can change your access password to Zakeke by confirming your current password and by inserting twice your new one.

Managing new password

If you want to quit from Zakeke, you can logout by pressing on the Logout button into the sidebar.

Logout

E) Dashboard - top

The Dashboard is the section of BackOffice which show in real time all usage statistics of Zakeke. The data are into special rectangular boxes and they are represented with numbers or graphs.

Dashboard overview

In the Dashboard you see the following boxes:


F) Orders - top

The Orders section into Zakeke Back Office contains the whole list of orders from your customers, with all customization details, including downloadable print-ready files.

Orders table

Each element in the table has the following fields:

If you want to see the details you can just click on the table row that refers to the selected order.

Order details

Besides the ability to read all the details of the order like the name, code, quantity, printing method and design code it's possible to download printing files. These are into a ZIP archive and actually are in PNG and SVG files.


G) Products - top

The creation of your catalog of customizable products begins from Products section where you can import all your products, available into your e-commerce. You can have up to 200 customizable products.

Access to the catalog of customizable products

Here there are the needed steps to create and manage your product catalog:

If you're interested in specific functionalities of the product configuration:

  1. Printing methods;
  2. Colors;
  3. Sides;
  4. Images;
  5. Print areas;
  6. Pricing;
  7. Replicate.
  8. Save.

Add a new product to the catalog

The addition of a new products to the Zakeke catalog simply happens by clicking on Add product button at the top right of the window.

Add product button

The pop window contains the list of all available products of your e-commerce which you can add to Zakeke by clicking on them. If you can't find your product to be configured you can also search for it if you know its name or its SKU thanks to the search bar at the top of the product list.

Available products into your e-commerce

Configure your product for customization

The product configuration for the customization begins as soon as a new product is added to your Zakeke catalog.

Here how the window of the product configuration is:

Window of product configuration

1. Printing methods

The first step of configuration process is related to the choice of printing methods to be used for product customization.

add printing method

By clicking on Add printing method it's possible to:

Window of printing methods

If you want to create a new printing method, click on Add new method.

Add new method

You'll see the form for the creation of printing method where you can fill out all required field.

Form for new printing method

Here there's the meaning of each field:

If you want to save your new printing method you have to click on Ok button at the bottom of form.

You can combine the product with all printing method you prefer! When you've finished this configuration phase, click on Next in order to proceed with the configuration of colors and product variants.

2. Colors

The second step of configuration process is related to the choice of colors or attributes to combine with the product to customize, letting you manage all its variants.

Note: if the product hasn't variants, this step is skipped to jump directly to the next step.

In order to navigate between subsections of this configuration phase you can use the selectors you can find at the top of working area.

Window of choosing colors

Into colors subsection it's possible to decide the range of colors which you consumer will be able to use - during customization - for the product you're configuring. The set of available colors are directly taken from your e-commerce and you must choose at least one of it if you want to proceed with the configuration process.

Alternatively, you can go into ATTRIBUTES subsection to immediately set the attributes of product. The content of the form of configuration attributes changes depending on selected product and attributes already set into your e-store. If you do not set any color, you must set at least one attributes configuration.

Attributes setting

It's naturally possible to choose more than one color and more than one attributes configuration for each product.

When this phase is done, you can continue with the selection of sides.

3. Sides

Into the third step of configuration process we can see the choice of sides of your product.

Add side

By clicking on Add side it's possible to:

Window of sides

If you want to create a new side, click on Add new side.

Add new area

You'll see the form of creation of a new side where you can fill out all required fields.

Creation form of a new area

Here there's the meaning of each field:

In order to save your new side you have to click on Ok button at the end of the form.

You can combine the product with all sides you prefer! When you've finished this configuration phase, click on Next in order to proceed with the configuration of preview images.

4. Images

The fourth step of configuration process requires the uploading of preview images of the product.

In order to upload an image you can just click on Load image placed in correspondence to the color and side related to what the model of product really represents. The table row are labeled with colors / attributes selected into the phase of color selection, while the table columns are named with the sides set into the phase of selection of sides.

Images uploading

You have to upload an image for each side set into previous phase. This is necessary to provide your consumers the possibility to customize the product directly upon the model images.

It's possible to upload images in JPEG, PNG and BMP files with a maximum size of 5 MB.

By this way for every cell of the table you'll obtain a grid containing all inserted images.

Window of uploaded images

When you've finished this phase, you can proceed with the settings of printing areas.

5. Print areas

Into the fifth step of configuration process you can set the printing areas of product. These ares are basically the print limits on which consumers can apply their own customizations (text, images, etc..) on the final product.

Here how the window of printing areas selection is:

Window of creation of printing areas

Let's have a look at the toolbar and at what it embeds:

The first action to do on model consists of setting of real dimensions. Be careful to measure the product correctly and to use the same references for both the model and the product.

With handy measures, use the ruler to draw a line which has for references the limits of the measurement done on the real product. In the section that appears, enter the value of the actual measurement.

The use of ruler

At this point you can continue with the creation on printing areas on product. In order to create a printing area you can just choose one of the tools of the toolbar and move into working area. Draw your printing areas carefully, in respect of model limits.

Be careful with model limits

Obviously you can drag, rotate, scale or delete each area by using the buttons which appear into the rectangle of the area just drawn.

The sidebar for options / info let you see and modify all information about position and dimension of selected or just drawn area.

Crop output

The option Crop output is useful when you want to delete from output printing files (loaded into Orders) all the customizations that don't respect limits of printing areas. It's obviously that if you want to save all customized elements of your consumers it's necessary to disable this option (enabled by default).

When you've finished the configuration of printing areas for each side you can continue with the configuration of pricing rules.

6. Pricing

Into the sixth step of configuration you can set your customization costs of final customized product on the basis of different parameters.

Into the window, select the printing method for which you want to set customization costs.

Select printing method window

Fill out the form.

Filling out

Here there's the meaning of each field:

7. Replicate

The seventh step of configuration process lets you replicate the whole configuration of the current product in other products from your store, if you want to.

You can use this feature also on products the have been already configured to update them.

Please note that with the replication of the configuration, the product is also saved, so the last step will be skipped.

8. Save

Into the eighth and last step of configuration process you can finally save your product and all configuration associated to it, by clicking on Save product.

Save product button

Wait until the process is correctly saved - the loading symbol will appear into the window.

Loading of uploading 3D model

When everything is ok, the system will communicate the end of this operation.

Loading correctly done

By clicking on Ok you'll be redirected again to Products section.

Modify or remove a product from the catalog

The modification of an existing product into the Zakeke catalog happens by clicking directly on the product of the list you want to modify.

Modify product

The process of product configuration will start - it's the same of the initial configuration, but in this case all section are already compiled with saved settings.

You only need to modify the parameters you want to change and then proceed with the saving of the new configuration.

The elimination of an existing product from your Zakeke catalog begins by clicking on Delete product at the bottom right of each product of the list.

Delete product

A pop window will be opened, and into this one you have to confirm the elimination of product from the catalog.

Confirm deleting product

The elimination of a product from the catalog is an irreversible process and can't be undone.


H) Theme - top

Feel free to add your style to the customizer that your consumers will use to customize their product! Into the Theme section you can choose your favorite combination of colors.

Theme section access

The window you can see contains the following options:

At the end of your choice of theme, click on Save settings at the top right of the section in order to save your changes.

Save settings button

I) Sides - top

Into Sides you can find all sides you set during the addition of sides of product during configuration.

Printing areas section

You can naturally manage them here, adding new sides or deleting those already set.

The addition of a new side happens when you click on Add side at the top right of section.

Add area button

Into the pop window, insert the name of side and then click on Add.

Adding area pop window

To define the new side, please follow instructions at Section G – Point 3 of this guide.

The elimination of an existing side happens when you click on bin at the bottom right side of each side on the list.

Delete area button

You'll be asked to confirm the elimination on the pop window.

Elimination area window

After confirmation, the system will notify the correctness of elimination.

Elimination area outcome

The elimination of a side from the list is an irreversible process and it can't be undone. Besides, if the selected side is already in use for at least one product, the elimination is forbidden.


J) Printing methods - top

The Printing methods section has all printing methods which you set during the addition of printing methods for a product into configuration phase.

Printing methods section

You can naturally manage them here, adding new printing methods or deleting those already set.

The addition of a new method happens when you click on Add printing button at the top right of the section.

Add printing button

Into the window that appears insert the name of new printing method and the type of output to create, then click on Add.

Finestra di aggiunta tecnica di stampa

You'll be notified on saving completion of the printing method with a pop window.

Completion printing method

The elimination of a printing method happens when you click on bin presente at the bottom right side of each method on the list.

Elimination method button

You'll be asked to confirm the elimination on the pop window.

Elimination method window

After confirmation, the system will notify the correctness of elimination.

Elimination method outcome

The elimination of a printing method from the list is an irreversible process and it can't be undone. Besides, if the selected method is already in use for at least one product, the elimination is forbidden.


Go To Table of Contents