Zakeke

Zakeke is a product customisation tool that allows your website visitors to personalise products before adding them to their basket. When a customer buys a customisable product, the order is automatically exported to Zakeke to help you fulfil the order.

You can read more about Zakeke here.

To install the app:

Navigate to Apps
Locate the Zakeke
Select install this app

Once the app is installed, configure your Zakeke settings by navigating to Apps > Manage > Zakeke.

Connecting ShopWired and Zakeke

To connect your Zakeke account to ShopWired:

Log in to your Zakeke account and select Sales channels
Add a new sales channel
When prompted to connect your store, opt to create an API Integration
Enter your ShopWired store URL and base currency, and create the new sales channel
Open the integration settings for the newly created sales channel
In a new tab in your browser, open your ShopWired account and navigate to Apps > Manage > Zakeke
Copy the Products API URL value displayed in the app
In Zakeke, paste the URL into the Product Catalog API field
Copy the provided Client ID and Secret key from Zakeke into the ShopWired Zakeke app
Save the integration settings in Zakeke
Select connect in the ShopWired Zakeke app

Once connected, a confirmation message will be displayed.

App settings

Export offline payment orders to Zakeke

If you are using the and you want to export orders to Zakeke that are created using the offline payment method, select this setting. If the setting is not selected, these orders will display in the Export errors section of the app.

Customise button text

Use the Customise button text setting to customise the text displayed for the button that appears for Zakeke product pages on your website. This is the button that is used by website visitors to launch the Zakeke window.

Managing customisable products

To allow your customers to customise or configure products on your ShopWired website, you will need to create these products separately within your Zakeke account. Depending on your needs, you can use either the customiser or configurator tools in Zakeke to set up these products.

After you connect ShopWired and Zakeke, the products from your ShopWired store will be listed within Zakeke’s Connect Catalog for you to choose from. Products are not imported or created automatically in Zakeke — you must select them in the Connect Catalog when creating customisable or configurable products.

Using the customiser

The customiser tool in Zakeke allows you to create 2D customisable products for your ShopWired store. To get started:

Log in to your Zakeke account
Navigate to customizable products > add
From the list of products from your ShopWired account, select the product you want to customise
Follow the instructions in Zakeke to customise the product according to your preferences

If your product has variations, it is crucial to import all available variants when creating customisable products in Zakeke. While this may differ from Zakeke's own guidance, importing all variants ensures a smooth experience for your customers when they customise the product on your website.

Once you have customised your product, it will be listed in the 2D customisable products section of the Zakeke app within ShopWired.

Using the Configurator

The configurator tool in Zakeke is used to create 3D configurable products. These products allow customers to adjust or modify specific aspects of a product, such as selecting different components or materials. To configure a product:

Log in to your Zakeke account
Navigate to products in the side menu
Select + add new product in the top right corner
From the list of products in your ShopWired account, select the product you want to configure
Follow the guides in Zakeke to configure the product as needed

If your product has variations, ensure that all variants are imported from ShopWired into Zakeke when creating configurable products. If you create product variations directly in Zakeke instead of importing them from ShopWired, it can cause issues on your website.

Viewing Products

For both 2D customisable and 3D configurable products, you can use the view option in the Zakeke app (in either the 2D customisable products or 3D configurable products sections) to see how the product appears on your ShopWired website. This allows you to check that the customisation or configuration options are displayed correctly to website visitors.

Add to basket and customisation options

For each product in Zakeke that is available to be displayed on your ShopWired website, you can choose:

Whether to enable the Zakeke customiser on the product on your website
Whether to enable visitors to add the product to the basket without customising it

To enable the Zakeke customiser for the product, locate the product in either the 2D customisable products or 3D customisable products section and select enable customisation. Enabling this setting for the product ensures that the customise button appears on the product page on the website. If this setting is disabled, the product's normal add to basket button will be displayed.

To enable visitors to add the product to the basket without customising it, locate the product in either the 2D customisable products or 3D customisable products section and select show the add to basket button. Enabling this setting for the product allows visitors to add the product to the basket without customising it.

Order export

Orders received on your ShopWired website containing a Zakeke customisable/configurable product will be exported to Zakeke automatically. Orders are usually exported to Zakeke within a few minutes.

Occasionally, the app may encounter an error when trying to export an order to Zakeke. Errors that fail to export will be displayed in the Export errors section.

When this happens, the details of the failed order will appear in the export errors section:

Review the error in the Export errors section
Fix the issue (e.g., update the order or product details)
Retry the export by selecting retry auto-export

Theme installation

Code for this app needs to be added to your ShopWired theme:

To display the Zakeke customiser on product pages
To support products with variations
To display information about the customised/configured product in the visitor's shopping basket
To display information about the customised/configured product during checkout

For assistance in adding the required code to your theme files, contact theme support.

Draft theme

ShopWired strongly recommends adding the code to a so that you can test the changes without affecting your live website. Once you've tested the changes, you can .

Product pages Javascript

Using the code editor, within the product_form.twig file, add the Javascript code below before the closing {% endblock %} in the {% block product_form %} block.

<script src='https://portal.zakeke.com/scripts/config.js'></script>
<script src='https://portal.zakeke.com/scripts/integration/api/customizer.js'></script>
<script>const mainProduct = {{ product|json_encode|raw }};</script>
<script data-business-id='BUSINESS-ID' class='main-zakeke-script' 
src='https://hq-apps-sw.s3.eu-west-1.amazonaws.com/zakeke/1/v3/zakeke.js'></script>

You must replace BUSINESS-ID with the Zakeke business ID value shown in the Live theme codes section of the Zakeke app.

Product options

Using the code editor, within the product_form.twig file:

Locate the <select element that contains the class product-option required and add the code below before the closing > tag

data-option-id="{{ option.id }}"

Locate the <div element that contains the class product-option and add the code below before the closing > tag

data-option-id="{{ option.id }}"

Add preview image functionality

Using the code editor, within the checkout_basket.twig file, locate the <td element that contains the class basket-item-image and, directly after this line, add the code below

{% set zakeke_preview_image_url = '' %}
{% if item.comments|length %}
    {% set opts = item.comments|split(' | ') %}
    {% for option in opts %}
        {% set name = option|split(':')[0] %}
        {% set value = option|split(':')[1] %}
        {% if name == 'Preview Image URL' %}
            {% set zakeke_preview_image_url = value %}
        {% endif %}
    {% endfor %}
{% endif %}

Once you've made the changes to your theme, test it thoroughly.

Adding code to platform checkout

You will also need to add the code below to the Advanced customisation section in the Custom Javascript setting of the checkout page.

<script>
    const orderSummaryProducts = document.querySelectorAll('.order-summary__item');
    orderSummaryProducts.forEach(orderSummaryProduct => {
        const orderSummaryProductExtra = orderSummaryProduct.querySelector('.order-summary__extra');
        if (orderSummaryProductExtra && orderSummaryProductExtra.innerText.includes('Preview Image URL')) {
            let zakekePreviewImageURL = orderSummaryProductExtra.innerText.split(":")[1].trim();
            const orderSummaryProductImage = orderSummaryProduct.querySelector('.order-summary__photo img');
            if (zakekePreviewImageURL && orderSummaryProductImage) {
                orderSummaryProductImage.setAttribute('src', `https://${zakekePreviewImageURL}`);
                orderSummaryProductExtra.style.display = 'none';
            }
        }
    });
</script>