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

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

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>

Set Zakeke to do not create new 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 visible on your storefront.

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

  1. Create a new product with the following data:

    • Price: 0.01
    • Inventory policy: Don't track inventory
    • This is a physical product: set as false
    • Product type: zakeke-design
    • Edit website SEO > URL and handle: set "customization" as handle

    You're free to set the product name and image as you need.

  2. Add Snippet Files

    All the needed snippets are automatically added to the active theme once Zakeke is added to the store. In case you intend to change your main theme or they are missing, follow this guide.

  3. Edit theme.liquid

    • Under "Layout", select theme.liquid.
    • Copy and paste the following code directly above the </head> tag.

      
      {% include 'zakeke-customizer-price', product: all_products.customization %}
                      

      Shopify Product liquid

  4. Edit cart-template.liquid

    • Under "Sections", select cart-template.liquid.
    • Add the following 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 -%}
                      

      Replace the cart item image with the item_img variable:

      
      <img class="cart__image" src="{{ item_img }}" alt="{{ item.title | escape }}">
                      
    • Find any reference of this code:

      {%- assign property_size = item.properties | size -%}
      {% if property_size > 0 %}
      <div class="cart__meta-text">
      {% for p in item.properties %}
      {% unless p.last == blank %}
      {{ p.first }}:

      {% comment %}
      Check if there was an uploaded file associated
      {% endcomment %}
      {% if p.last contains '/uploads/' %}
      <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
      {{ p.last }}
      {% endif %}
      {% endunless %}
      {% endfor %}
      </div>
      {% endif %}

      Replace them with the following code:

      {%- assign property_size = item.properties | size -%}
      {% if property_size > 0 %}
      <div class="cart__meta-text">
      {% include 'zakeke-cart-item-properties' with item %}
      </div>
      {% endif %}
    • Find any reference of this code:

      {{ item.price | money }}
                      

      Replace them with this code:

      {% include 'zakeke-cart-item-price' with item %}
                      
    • Find any reference of this code:

      {{ item.line_price | money }}
                      

      Replace them with the following code:

      {% include 'zakeke-cart-line-price' with item %}
                      
    • Find any reference of this code:

      <span class="cart__subtotal">{{ cart.total_price | money }}</span>
                      

      Replace them with the following code:

      <span class="cart__subtotal">{% include 'zakeke-cart-subtotal' %}</span>
                      

Snippet Files

All the needed snippets are automatically added to the active theme once Zakeke is added to the store. In case you intend to change your main theme:

  1. From "Shopify Admin", select Online Store.

  2. Select Actions > Edit code.

  3. Under "Snippets", find these files:
    • zakeke-customizer-price.liquid
    • zakeke-cart-item-price.liquid
    • zakeke-cart-item-properties.liquid
    • zakeke-cart-line-price.liquid
    • zakeke-cart-subtotal.liquid
  4. For any that don't exist:

    1. Select Add a new snippet.
    2. Enter the correct snippet name in the "Create a new snippet called" field.
    3. Select Create snippet.
    4. Copy and paste the code found in each of these links into their respective files:
    5. Select Save.
    6. Repeat these steps for each missing snippet file.
  5. Select Save.
  6. Repeat these steps for each missing snippet file.

If you need help, please contact us.