Installations

Embed customize button

Just some easy steps to make it works! If it's too difficult for you to do, feel free to contact us via Live chat support we will help you install the App for free

Step 1. Go to Theme / Actions / Edit code

Step 2. Open - templates/Product.liquid or sections/product-template.liquid

Step 3. Find Add to cart button . You can use Ctrl+F to find it ( keyword "cart")

Step 4. Copy this Snippet code:

    {%- capture cart_button -%}
        <!-- Paste your cart button to this block -->

         <!-- / End  -->
     {%- endcapture -%}
      {%- if product.tags contains 'lumise'-%}
        {%- if product.tags contains 'lumise-product-base' and product.metafields.lumise and  product.metafields.lumise.product_base %}
            <a class="lumise-button-customize btn button" href="{{shopify.domain}}/apps/design-editor/app/?product_cms={{product.id}}&product_base={{product.metafields.lumise.product_base}}" type="button">Customize</a>
        {%- elsif product.tags contains 'lumise-customize' and product.metafields.lumise and  product.metafields.lumise.product_base  and product.metafields.lumise.product and product.metafields.lumise.product contains 'id:'-%}
            {%- assign lumise_options =  product.metafields.lumise.product | split: '|' -%}
            {%- for opt in lumise_options -%}
                {%- assign field = opt | split: ':'-%}
                {%- if field[0] == 'lumise_disable_add_cart' and field[1] != 'yes'-%}
                    {{-cart_button-}}
                {%- endif-%}
                {%- if field[0] == 'lumise_customize' and field[1] == 'yes' -%}
                    <a class="lumise-button-customize btn button" href="{{shopify.domain}}/apps/design-editor/app/?product_cms={{product.id}}&product_base={{product.metafields.lumise.product_base}}" type="button">Customize</a>
                {% endif%}
            {%- endfor-%}
        {%- else -%}
            {{-cart_button-}}
        {%- endif-%}
      {%- else %}
            {{-cart_button-}}
    {%- endif -%}

Step 5. Then paste it below the block code of button " Add to cart"

Modify Order status page

*Display thumbnail of design when order completed

Step 1. Go to Admin store> Settings> Checkout
Step 2. Copy the snippet code below

{% if order.tags contains 'lumise'%}
<style>
.product-table tr[data-product-id=""] {
display: none
}
.lumise-list-items{
margin-top: 20px;
}
.lumise-list-items tr:not(:last-child) {
border-bottom: 1px solid #d8d8d87d
}
.lumise-list-items td.order-list__item__cell {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.lumise-list-items .product-thumbnail::after {
    border: none;
}
.lumise-list-items p.order-list__item-price {
    min-width: 50px;
}
.lumise-list-items td.order-list__product-description-cell {
    text-align: left;
}
</style>
<div class="lumise-list-items ">
<h2 class="section__title">List your customized products</h2>
<table class="row" style="margin-top:10px">
    {% for line in order.line_items %}
    {% if line.product_id != blank %}{% continue%} {% endif%}
    <tr class="order-list__item">
        <td class="order-list__item__cell">
            <table>
        <td class="product-thumbnail">
            {%- if line.image -%}
                <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image" />
            {%- elsif line.properties != empty -%}
                {% for property in line.properties %}
                    {%- if property.first == "_Preview" -%}
                        <img src="{{ property.last }}" align="left" width="60" height="60" class="order-list__product-image" />
                        {%- break-%}
                    {%- endif -%}
                {%- endfor-%}
            {%- endif -%}
        </td>
        <td class="order-list__product-description-cell">
            {% if line.product.title %}
                {% assign line_title = line.product.title %}
            {% else %}
                  {% assign line_title = line.title %}
            {% endif %}
            {% if line.quantity < line.quantity %} {% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %} {% else %} {% assign line_display=line.quantity %} {% endif %} <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span>
                {% if line.variant.title != 'Default Title' %}
                <br />
                <span class="order-list__item-variant">{{ line.variant.title }}</span>
                {% endif %}
                {% if line.refunded_quantity > 0 %}
                <br />
                <span class="order-list__item-refunded">Refunded</span>
                {% endif %}
                {% if line.discount_allocations %}
                {% for discount_allocation in line.discount_allocations %}
                  {% if discount_allocation.discount_application.target_selection != 'all' %}
                    <span class="order-list__item-discount-allocation">
                        <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                        <span>
                            {{ discount_allocation.discount_application.title | upcase }}
                            (-{{ discount_allocation.amount | money }})
                        </span>
                    </span>
                  {% endif %}
                {% endfor %}
            {% endif %}
        </td>
        <td class="order-list__price-cell">
            {% if line.original_line_price != line.final_line_price %}
            <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
            {% endif %}
            <p class="order-list__item-price">
                {% if line.final_line_price > 0 %}
                {{ line.final_line_price | money }}
                {% else %}
                Free
                {% endif %}
            </p>
        </td>
</table>
</td>
</tr>{% endfor %}
</table>
</div>
{% endif%}

Step 3. Paste it to Additional scripts like this:

Customize order email confirm

When an order is created, an email will be sent to your customer, so you need to modify it to display the thumbnail design
Step 1. Go to Admin / Settings / Notifications / Order Confirmation
Step 2. Copy this block code:

 {%- if line.image -%}
    <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
    {%- elsif line.properties != empty -%}
    {% for property in line.properties %}
        {%- if property.first == "_Preview" -%}
            <img src="{{ property.last }}" align="left" width="60" height="60" class="order-list__product-image"/>
            {%- break-%}
        {%- endif -%}
    {%- endfor-%}
{%- endif -%}

Step 3. Replace this block by the snippet you have just copied. You can use Ctrl+F to find it ( the keyword is "image")

Similar steps with Draft order invoice, Order refund, Order canceled, Abandoned checkout,Draft order invoice,Shipping confirmation,New order

*Note: for New order Replace <img src="{{ line | img_url: 'thumb' }}" /> by the code above

After installing done, Lumise will create 2 ends for you. One is for customers to design a product Another one is for store owner to configure settings on customer's end