# Installations

### 1. Embed customize button <a href="#span-stylecolor-0033661-embed-customize-buttonspan" id="span-stylecolor-0033661-embed-customize-buttonspan"></a>

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 and as soon as possible.**

**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**“)<br>

<figure><img src="https://cdn.shopify.com/s/files/1/0121/5945/1236/files/Screenshot_at_Mar_06_17-00-06.png?13822997068911432409" alt=""><figcaption></figcaption></figure>

**Step 4.** Copy this Snippet code:

```liquid
{%- 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}}&amp;product_base={{product.metafields.lumise.product_base.value}}" 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.value contains 'id:'-%}
            {%- assign lumise_options =  product.metafields.lumise.product.value | 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}}&amp;product_base={{product.metafields.lumise.product_base.value}}" type="button">Customize</a>
                {% endif%}
            {%- endfor-%}
        {%- else -%}
            {{-cart_button-}}
        {%- endif-%}
      {%- else %}
            {{-cart_button-}}
    {%- endif -%}
```

**Step 5.** Then **paste it below** the block code of the button “Add to cart”

<figure><img src="https://cdn.shopify.com/s/files/1/0121/5945/1236/files/Screenshot_at_Mar_06_19-03-47.png?6097022809019377933" alt=""><figcaption></figcaption></figure>

### 2. Modify the Order status page <a href="#span-stylecolor-0033662-modify-the-order-status-pagespan" id="span-stylecolor-0033662-modify-the-order-status-pagespan"></a>

\*Display a thumbnail of the design when the order completed

**Step 1.** Go to **Admin store -> Settings -> Checkout**

**Step 2.** Copy the snippet code below

```liquid
{% 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:

<figure><img src="https://cdn.shopify.com/s/files/1/0121/5945/1236/files/Screenshot_at_Mar_06_17-05-49.png?14235440889459585386" alt=""><figcaption></figcaption></figure>

### 3. Customize order email confirm <a href="#span-stylecolor-0033663-customize-order-email-confirmspan" id="span-stylecolor-0033663-customize-order-email-confirmspan"></a>

\
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:

```liquid
 {%- 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 the below code blocks with the snippet you have just copied.

* With **Shopify OS 1.0** themes, you can use Ctrl+F to find it (the keyword is “image”)

<figure><img src="https://cdn.shopify.com/s/files/1/0121/5945/1236/files/Screenshot_at_Mar_06_18-41-12.png?9533437877464086883" alt=""><figcaption></figcaption></figure>

* With the **Shopify OS 2.0** themes, please find the keyword “**shop.email\_logo\_url**“

<figure><img src="https://wiki.the4.co/wp-content/uploads/2019/09/image-2048x947.png" alt=""><figcaption></figcaption></figure>

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

Similar steps with **| 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.

### 4. Add the CSS code to Lumise settings <a href="#span-stylecolor-0033664-add-the-css-code-to-lumise-settingsspan" id="span-stylecolor-0033664-add-the-css-code-to-lumise-settingsspan"></a>

**Step 1.** Go to **Lumise app -> Settings -> Editor -> Custom CSS box**.

**Step 2.** Copy the below code and paste it to the Custom CSS box.

```css
#lumise-stage-nav [data-tip="true"] span {
opacity: 1;
bottom: 80%;
z-index: 10;
transition: all 300ms ease 150ms;
visibility: visible;
display: block !important;
}
ul.lumise-list-items li {
background-size: contain !important;
background-repeat: no-repeat;
}
```

Like this:

<figure><img src="https://wiki.the4.co/wp-content/uploads/2019/09/setting1-2048x956.png" alt=""><figcaption></figcaption></figure>

### 5. Create a new Product base to see how the app work. <a href="#span-stylecolor-0033665-create-a-new-product-base-to-see-how-the-app-workspan" id="span-stylecolor-0033665-create-a-new-product-base-to-see-how-the-app-workspan"></a>

**Step 1.** Go to **Lumise app -> Product Base -> Add new product base.**

<figure><img src="https://wiki.the4.co/wp-content/uploads/2019/09/add-product-2048x958.png" alt=""><figcaption></figcaption></figure>

**Step 2.** Enter your product information.

**Step 3.** After creating a product base, it will appear in your Shopify as a new product with the tag **Lumise base**. Please don’t remove that tag, your product must have that tag to work with Lumise. Go to **Shopify -> Products -> find that product to preview it.**

<figure><img src="https://wiki.the4.co/wp-content/uploads/2019/09/product-2048x947.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
It is likely that the app **may not work** on **third-party themes**, if this is the case please **contact** us for free **support**.
{% endhint %}

<figure><img src="https://wiki.the4.co/wp-content/uploads/2019/09/support-2048x954.png" alt=""><figcaption></figcaption></figure>

Let us know if there’s anything else we can do for you. We’re happy to help you :relaxed:&#x20;