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 Shopify

Shopify

On this page

Add Zakeke to your Shopify shop

The following instructions are about the Shopify integration with Zakeke:

  1. Go to Zakeke Shopify App Store page.
  2. Click on Get.
  3. Shopify get

  4. Complete the process by clicking Install app.
  5. Shopify Install

  6. A new Zakeke account associated with the shop will be created automatically.

Log in to Zakeke using your Shopify account

To login with your Shopify account in Zakeke:

  1. Access your Shopify admin.
  2. Go to: Apps and then click on Zakeke Interactive Product Designer
  3. Shopify Apps

Standard login is not possible for those integrated with Shopify.

Customize button in the product page

Zakeke automatically adds the "Customize" button to the product page of customizable products.

To change the position and text of the button, edit the liquid section product-temperate file by adding this code as shown in the image:


{% unless product.content contains 'zakeke-design-tag' %}
    {% if product.tags contains 'zakeke-product' or product.content contains 'zakeke-product-tag' %}
        <div class="product-form__item product-form__item--submit zakeke-product-button-container">
        <button disabled id="zakeke-product-button" class="btn product-form__cart-submit">
            <span>Customize</span>
        </button>
        </div>
    {% endif %}
{% endunless %}

Shopify Product liquid

Customized products

Customized products by their nature are different from each other, which is why Zakeke creates a new product when adding the cart of a customised product. However, customized products are not visisble on your storefront.

It's possible to avoid the creation of the customized products following these steps:

Note: This method can not be applied to products that change the price based on personalization.

  1. Edit the liquid section product-temperate file by adding this code inside the add to cart form, as shown in the image:

    
    <input type="hidden" name="zakeke-product-advanced-processing" value="true" />
            

    Shopify Product liquid

  2. Edit the liquid section cart-template file by adding this code at the begin of the cart item for loop, as shown in the image:

    
    {%- if item.properties.customization -%}
       {%- assign item_img = '/apps/zakeke/preview/' | append: item.properties.customization -%}
    {%- else -%}
       {%- assign item_img = item | img_url: '95x95', scale: 2 -%}
    {%- endif -%}
            

    Shopify Product liquid

    Replace the cart item image with the item_img variable:

    
    <img class="cart__image" src="{{ item_img }}" alt="{{ item.title | escape }}">
            

Enabling the "Customer's draft designs" feature

To enable the ability to edit the saved designs of you registered customers, you must edit your theme.liquid file by adding the following code directly below the <head> tag:


  <script>
    var customer_id = false;
    {% if customer.id > 0 %}
    	customer_id = '{{ customer.id }}' + ' ' + '{{ customer.email }}' + ' ' + '{{ customer.name }}';
    {% endif %}
  </script>

Change the Zakeke url

To change the zakeke url from /app/zakeke to something else:

  1. Access your Shopify admin.
  2. Go to: Apps and then click "View details" on Zakeke Interactive Product Designer
  3. Change the Edit proxy URL field with the url you want and click on Save. In the example the new url will be /tools/customizer.
  4. Zakeke view details

  5. Edit the template liquid file by adding the following code, with the url that you set before, in this case /tools/customizer. The code must be placed before the closing of the head tag, as shown in the image:
  6. 
        <script>
        window.zakekeUrl = '/tools/customizer';
        </script>
    

    Zakeke view details

If you need help, please contact us.