Set Zakeke to never create a new product for the 3D Product Configurator

These guidelines are specific for all merchants willing to setup 3D Product Configurator on Shopify to never create a new product on the add to cart. The edits you need to make do not interfere with your e-commerce code, your shop management or any of its functionality, but are mandatory with respect of how Shopify let work 3rd party apps on stores and their carts. 

Please remember, do not hesitate to contact our support team at [e-mail] for inquiries on this topic, we'll be glad to help you. 

IMPORTANT

Other product builder apps or discounting apps or in general apps who dinamyically changes the price of products could conflict with the code of the Zakeke 3D Product Configurator. If you have any doubts, please get in touch by writing to [e-mail]

In order to get the 3D Product Configurator works with your Shopify store, you need to edit the theme as follows:

1. Edit theme.liquid

• Add the following code inside the head tag
• Make sure that all snippets are present 

2. Edit product-template.liquid

• Under "Snippets" in the theme menu, select buy-buttons.liquid
• Add the following code after the add to cart button:
• 

{% render 'zakeke-product', product: product %}

3. Edit main-cart-items.liquid

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

• Search for the line {% for item in cart.items %} and create a new line

• Seach for a <td> element with the class="cart-item__media":

Replace it's content with the following one:

{%- if item.properties._configurationPreview -%}
  {%- assign item_img = item.properties._configurationPreview -%}
{%- else -%}
  {%- assign item_img = item.image | image_url: width: 300 -%}
{%- endif -%}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
<div class="cart-item__image-container gradient global-media-settings">
  <img src="{{ item_img }}"
      class="cart-item__image"
      alt="{{ item.image.alt | escape }}"
      loading="lazy"
      width="150"
      height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
  >
</div>

• 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 -%}

Replace it with the following code:

{%- assign property_size = item.properties | size -%}
{% if property_size > 0 %}
  <div class="cart__meta-text">
    {% render 'zakeke-cart-item-properties', item: item %}
  </div>
{% endif %}

• Find this code:

<cart-remove-button id="Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<a href="{{ item.url_to_remove }}" class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
  {% render 'icon-remove' %}
</a>
</cart-remove-button>

Replace it with the following code:

<cart-remove-button id="Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<a href="{{ item.url_to_remove }}" class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
  {% render 'icon-remove' %}
</a>
</cart-remove-button>
{% render 'zakeke-cart-item-edit', item: item %}

Please make sure to open the zakeke-cart-item-edit snippet and replace the class attribute as follow:

• Find any reference of this code:

{{ item.original_price | money }}

{{ item.final_price | money }}

Replace them with this code:

{% render 'zakeke-cart-item-price', item: item, item_price: item.final_price %}

• Find any reference of this code:

{{ item.original_line_price | money }}

{{ item.final_line_price | money }}

Replace them with the following code:

{% render 'zakeke-cart-line-price', item: item, line_price: item.final_line_price %}

• Find any reference of this code:

   <p class="totals__subtotal-value">{{ cart.total_price | money_with_currency }}</p>

  

  Replace them with the following code:

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

  

  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 %}.

{%- assign item_img = line | img_url: 'compact_cropped' -%}
{% if line.properties %}
  {% for property_array in line.properties %}
    {% if property_array.first == '_configurationPreview' %}
      {%- assign item_img = property_array.last -%}
      {% break %}
    {% endif %}
  {% endfor %}
{% 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 them with this code:

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

5. Under Orders, select Abandoned checkout

• In the template, find any reference to this code:

href="{{ url }}"

• replace it with the following code:

href="{{ shop.url }}/cart"

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