Enabling the 3D Product Configurator

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 "Sections" in the theme menu, select main-product.liquid
• Add the following code after the add to cart button:
• 

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

3. Edit the 'zakeke-product' snippet as follows:

• Select the class attribute, as follows:

Replace the selected part with the following code, as follows:

4. 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 follows:

• 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]