Articles in this section

See more

Enabling the 3D Product Configurator

  • Updated

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 help@zakeke.com

 

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

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:
  • mceclip1.png
{% render 'zakeke-product', product: product %}

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

  • Select the class attribute, as follows:

mceclip3.png

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

mceclip4.png

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:

mceclip5.png

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

mceclip0.png

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

mceclip6.png

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

mceclip15.png

 

  • Find any reference of this code:

 {{ item.original_price | money }}
 {{ item.final_price | money }}

 

mceclip9.png

 

Replace them with this code:

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

mceclip11.png

  • Find any reference of this code:

{{ item.original_line_price | money }}
 {{ item.final_line_price | money }}

 

mceclip12.png

Replace them with the following code:

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

mceclip13.png

 

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

     

    mceclip14.png

  •  

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

    • Make sure to prepend the url of the store of the client at the beginning of the item_img path.
{%- if line.properties._configuration -%}
 {%- assign item_img = '/apps/zakeke/preview/' | append: line.properties._configurationPreview -%}
{%- 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 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

mceclip0.png

  • 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 help@zakeke.com

Related articles