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.
If you have troubles to follow this guide, you can contact us at help@zakeke.com
Step 1: Create a new product with the following data
- Name: you can name it as you want
-
Price: 0.01
-
Inventory policy: Don't track inventory
-
Uncheck "This is a physical product"
- Change the state of the product by selecting the active option
- Set the state of the product as active
-
Product type: zakeke-design
-
Go to the bottom of the page in "Search engine listing preview" section and click on "edit website SEO" > URL and handle: replace the handle (last part of the URL) with the word "customization"
Step 2: 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 3: Add Snippet Files
- Duplicate themes to create a backup copy
- Follow the article to create the snippets needed by Zakeke
Step 4: 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._customization -%}
{%- assign item_img = '/apps/zakeke/preview/' | append: item.properties._customization -%}
{%- 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 %}
-
Find any reference of this code:
{{ item.price | money }}
- Replace all with this code:
{% render 'zakeke-cart-item-price', item: item, item_price: item.final_price %}
-
Find any reference of this code:
{{ item.line_price | money }}
- Replace all with:
{% render 'zakeke-cart-line-price', item: item, line_price: item.final_line_price %}
Step 6: Edit main-cart-footer.liquid
- Under "Sections" in the theme menu, select main-cart-footer.liquid
- Find the following code:
<p class="totals__subtotal-value">{{ cart.total_price | money_with_currency }}</p>
- Replace it with:
<p class="totals__subtotal-value">{% render 'zakeke-cart-subtotal' %}</p>
Step 6: 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 -%}
- If the above solution didn't work, copy and paste the following code in the same position as the above one:
{%- assign item_img = line | img_url: 'compact_cropped' -%}
{% if line.properties %}
{% for property_array in line.properties %}
{% if property_array.first == '_previews' %}
{%- assign item_img = property_array.last -%}
{% break %}
{% endif %}
{%endfor %}
{% endif %}
as follows:
- 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"/>
6. 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 help@zakeke.com