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:

{%- 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”

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

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

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:

 {%- 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”)

  • 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 <img src=”{{ line | img_url: ‘thumb’ }}” /> 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.

#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.

It is likely that the app may not work on third-party themes, if this is the case please contact us for free support.

Let us know if there’s anything else we can do for you. We’re happy to help you ☺️

PreviousDemoNextProduct Base

Last updated