Set Zakeke to never create a new product

When a customer buys a customized product at your website, a new product is created in your Shopify catalog. This is because Shopify does not allow to modify an existing product.

This article is based on the Dawn theme provided by Shopify. If you have troubles to follow this guide, you can contact us at [e-mail]

Step 1: Go to your Shopify theme code editor

• Duplicate the theme to create a backup copy.
• From the Shopify admin, select Online Store.
• Select Actions.
• Select Edit code.

Step 2: Add Snippet Files

• Duplicate themes to create a backup copy
• Follow the article to create the snippets needed by Zakeke

Step 3: Edit theme.liquid

• Under "Layout", select theme.liquid

• Copy and paste the following code below the {{ content_for_header }} line:

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

• Select Save

Step 5:  Edit main-cart-items.liquid

• Under "Sections" in the theme menu, select main-cart-items.liquid

• Search for the following code:

{%- for item in cart.items -%}

• The following code should be inserted directly after:

{%- if item.properties._previews -%}
  {%- assign item_img = item.properties._previews -%}
{%- else -%}
  {%- assign item_img = item.image | image_url: width: 300 -%}
{%- endif -%}

 

• Search for the following code:

{{ item.image | image_url: width: 300 }}

• Replace it with:

{{ item_img }}

• Search for this code:

{%- for property in item.properties -%}
  {%- assign property_first_char = property.first | slice: 0 -%}
  {%- if property.last != blank and property_first_char != '_' -%}
    <div class="product-option">
    <dt>{{ property.first }}: </dt>
    <dd>
    {%- if property.last contains '/uploads/' -%}
      <a href="{{ property.last }}" class="link" target="_blank">
      {{ property.last | split: '/' | last }}
      </a>
    {%- else -%}
      {{ property.last }}
    {%- endif -%}
    </dd>
    </div>
  {%- endif -%}
{%- endfor -%}

• The following code should be inserted directly after:

{% if item.properties._previews %}
    {% assign previews = item.properties._previews | split: ',' %}
    {% if previews.size > 0 %}
  	<div class="glide zakeke-cart-previews" style="width: 260px">
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        {% for preview in previews %}
          {% assign preview_url = preview | split: '#' | first %}
          {% assign preview_label = preview | split: '#' | last %}
          <li class="glide__slide zakeke-cart-preview"
              data-url="{{ preview_url }}"
              data-label="{{ preview_label }}"
              >
            <img style ="width: 130px" src="{{ preview_url }}" alt="{{ preview_label }}" title="{{ preview_label }}">
          </li>
        {% endfor %}
      </ul>
    </div>
      <div data-glide-el="controls">
        <button class="slider__arrow prev glide__arrow" data-glide-dir="<">
          <svg xmlns ="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
            <path d ="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
          </svg>
        </button>
        <button class="slider__arrow next glide__arrow" data-glide-dir=">">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
            <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
          </svg>
        </button>
      </div>
    </div>
   {% endif %}
{% endif %}
{% render'zakeke-cart-item-edit', item: item %}

Step 4: Edit the order confirmation email

• Go to: Settings > Notifications > Order confirmation
• Copy and paste the following code directly below this code: {% for line in subtotal_line_items %}.
• In order to complete the path of the src of the image correctly,  please make sure to insert the url of the store of the client before the first / in the item_img variable 

{%- if line.properties._customization -%}
 {%- assign item_img = '/apps/zakeke/preview/' | append: line.properties._customization -%}
{%- else -%}
 {%- assign item_img = line | img_url: 'compact_cropped' -%}
{%- endif -%}

• Find any reference of this code:

<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>

• Replace all with:

 <img src="{{ item_img }}" align="left" width="60" height="60" class="order-list__product-image"/>

If you need help or you want us to make it on your behalf, please send a message to [e-mail]