Zakeke uses cookies to provide necessary site functionality and improve your experience. By using our website, you agree to our privacy policy and our cookie policy.   

Integration

Discover how to use Zakeke with BigCommerce

BigCommerce

On this page

Get the Zakeke App

  1. Go to BigCommerce Apps Marketplace and search for Zakeke - Interactive Product Customizer.
  2. Click on GET IT NOW.
  3. Click on Confirm.

Log in to Zakeke using your BigCommerce account

To login with your BigCommerce account in Zakeke:

  1. Access your BigCommerce admin.
  2. Click on Apps.
  3. Click on Zakeke - Interactive Product Customizer.

Standard login is not possible for those integrated with BigCommerce.

Installing Zakeke

In order for the installation process to go smoothly, we recommend that you follow the instructions carefully and ensure not to skip any of the steps. If you need help, please contact us.

  1. Access your BigCommerce admin.
  2. Click on Storefront.
  3. Click on My Themes.
  4. Click on Advanced.
  5. Click on Edit Theme Files.

    Note: Some of the themes that are offered on BigCommerce themes marketplace may require making a copy of the theme files before making any changes to them. As a baseline, we recommend making a copy of your theme before editing it, as a backup.

  6. Click Templates > Components > Products > Options > set-select.html.
  7. Replace the code with the following:

    
    {{#if this.display_name '!==' 'Customization'}}
        <div class="form-field" data-product-attribute="set-select">
            <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_{{id}}">
                {{ this.display_name }}:
        
                {{#if required}}
                    <small>{{lang 'common.required'}}</small>
                {{/if}}
            </label>
        
            <select class="form-select form-select--small" name="attribute[{{this.id}}]" id="attribute_{{id}}" {{#if required}}required{{/if}}>
                <option value="">{{lang 'products.choose_options'}}</option>
                {{#each this.values}}
                    <option data-product-attribute-value="{{id}}" value="{{id}}" {{#if selected}}selected data-default{{/if}}>{{label}}</option>
                {{/each}}
            </select>
        </div>
        {{else}}
        <div id="zakeke-attribute"
             data-attribute-id="{{id}}"
             style="display:none">
            <select name="attribute[{{this.id}}]" id="attribute_{{id}}">
                {{#each this.values}}
                    {{#if selected}}
                        <option data-product-attribute-value="{{id}}" value="{{id}}" selected data-default>{{label}}</option>
                    {{/if}}
                {{/each}}
            </select>
        </div>
    {{/if}}
            
  8. Click Save.
  9. Click Lang > en.json.
  10. Paste the following code as show in the image

    
    "zakeke": {
        "customize": "Customize"
    },
            

    Zakeke Stencil lang

  11. Click Save.
  12. Click Templates > Components > Products > add-to-cart.html.
  13. Paste the following code under the form-action-addToCart element, in which you can find by searching for it:

    • Ctrl + F on Windows
    • command + F on Mac
    
    {{#if (occurrences product.description "zakeke") '>' 0}}
        <input id="zakeke-button" class="button button--primary"
        data-product-name="{{product.title}}"
        data-currency="{{currency_selector.active_currency_code}}"
        data-store-hash="YOUR-STORE-HASH"
        data-product-id="{{product.id}}"
        data-cart-url="{{product.cart_url}}"
        data-zakeke-client-id="bo07cpzkan3r7ktlwk2w1t96p3d5zoa"
        data-zakeke-instance="https://www.zakeke.com"
        data-zakeke-api-instance="https://api.zakeke.com"
        type="button" value="{{lang 'zakeke.customize'}}">
    {{/if}}
            

    Note: The Bigcommerce store hash value can be derived from your temp URL. For example, if your temp URL is https://store-xxxxxxxxx.mybigcommerce.com/ then your store hash value is the xxxxxxxxx.

  14. Click Save.

Integration details

When a product is configured on Zakeke, an hidden html element is added in the description, and based on the product:

It is therefore important that you do not change the name of these options added by Zakeke or remove them from the option set of customizable products.

When a customer completes the customization of the product, Zakeke creates a new product rule that updates the image and cost to reflect the customization made.

When a custom product order is placed, you will be able to get the files ready to print in the Zakeke application under "Orders".

To allow Zakeke to read the product options in the "Variations" step, the product must have a SKU for each variation. You can read how to generate these SKUs here.