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.
Please note that customized products are not visible on your storefront by your customers (you see them only if you're logged as store admin). Anyway if you're using other app for functionalities like the search, can be false. You must always review your store to check that other apps installed are not showing the products created by Zakeke or if some collections settings can be still shown to display products created by Zakeke.
Even if they're not visible to your customers, you may want to avoid the creation of the customized products in your catalog. If so, follow this guide or 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 themes 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