# Installations
### 1. 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 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**“)
**Step 4.** Copy this Snippet code:
```liquid
{%- capture cart_button -%}
{%- endcapture -%}
{%- if product.tags contains 'lumise'-%}
{%- if product.tags contains 'lumise-product-base' and product.metafields.lumise and product.metafields.lumise.product_base %}
Customize
{%- 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' -%}
Customize
{% 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”
### 2. Modify the Order status page
\*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'%}
List your customized products
{% for line in order.line_items %}
{% if line.product_id != blank %}{% continue%} {% endif%}
{%- if line.image -%}
{%- elsif line.properties != empty -%}
{% for property in line.properties %}
{%- if property.first == "_Preview" -%}
{%- break-%}
{%- endif -%}
{%- endfor-%}
{%- endif -%}
{% endif%}
```
**Step 3.** Paste it to `Additional scripts` like this:
### 3. 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:
```liquid
{%- if line.image -%}
{%- elsif line.properties != empty -%}
{% for property in line.properties %}
{%- if property.first == "_Preview" -%}
{%- 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”)
* With the **Shopify OS 2.0** themes, please find the keyword “**shop.email\_logo\_url**“
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 \ by the code above.
### 4. Add the CSS code to Lumise settings
**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:
### 5. Create a new Product base to see how the app work.
**Step 1.** Go to **Lumise app -> Product Base -> Add new product base.**
**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.**
{% 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 %}
Let us know if there’s anything else we can do for you. We’re happy to help you :relaxed:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.nitroapps.co/lumise/integration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
