​
Setup

1

Orders List Wrapper

Add a empty div block on your page.

2

Orders List Wrapper - Attributes

Add following attribute to the div block:

looop=order-list
3

Order Item Template

Add a div block inside the order-list. The div will be used as a template to each individial order.

4

Order Item Template - Attributes

Add following attribute to the div block:

looop=order-item
5

Order Item Template - Sub-elements

Use avilable sub-elements to design the order item.

​
Avilable Sub-elements

​
Order number

This is a text block that will display the order number.

looop=order-number

​
Order fullfilment status

This is a text block that will display the fullfilment status of the order.

looop=order-status

​
Order payment status

This is a text block that will display the payment status of the order.

looop=payment-status

​
Order page link

This attribute should be added to a button/link block. When clicked, it will redirect the user to the order page.

looop=order-link

​
Order tracking number

This is a text block that will display the tracking number of the order.

looop=order-tracking-number

This attribute should be added to a button/link block. When clicked, it will redirect the user to the carrier tracking page.

looop=order-tracking

​
Order date

This is a text block that will display the date of the order.

looop=order-date

​
Order total

This is a text block that will display the total amount of the order.

looop=order-total

This attribute should be added to a button/link block. When clicked, it will redirect the user to the Shopify account page, where they can manage subscriptions.

looop=order-shopify-account

Order list should be only accessible to logged in users. Use customer variables to add conditional visibility to the order list.

​
Order Status Bagdes

You can use custom code embed to change the color of order and payment status badges.

<script>
function badges() {const orderStatusElements = document.querySelectorAll('[looop="order-status"]');
const orderPaymentElements = document.querySelectorAll('[looop="payment-status"]');

orderStatusElements.forEach((element) => {
    if(element.textContent === "UNFULFILLED") {
        element.classList.add("is-warning");
    } else if(element.textContent === "FULFILLED") {
        element.classList.add("is-success");
    } 
});

orderPaymentElements.forEach((element) => {
    if(element.textContent === "UNPAID") {
        element.classList.add("is-warning");
    } else if(element.textContent === "PAID") {
        element.classList.add("is-success");
    } else if (element.textContent === "REFUNDED") {
        element.classList.add("is-danger");
    }
});}

const orderList = document.querySelector('[looop="order-list"]');
const observer = new MutationObserver(() => {
    badges();
});
observer.observe(orderList, { childList: true, subtree: true });
</script>

The code above will add color to the order and payment status badges. It is using combo classes to change the color of the badges. You can change the color of the badges by changing the combo classes in the code.

​
Setup

1

Orders List Wrapper

Add a empty div block on your page.

2

Orders List Wrapper - Attributes

Add following attribute to the div block:

looop=order-list
3

Order Item Template

Add a div block inside the order-list. The div will be used as a template to each individial order.

4

Order Item Template - Attributes

Add following attribute to the div block:

looop=order-item
5

Order Item Template - Sub-elements

Use avilable sub-elements to design the order item.

​
Avilable Sub-elements

​
Order number

This is a text block that will display the order number.

looop=order-number

​
Order fullfilment status

This is a text block that will display the fullfilment status of the order.

looop=order-status

​
Order payment status

This is a text block that will display the payment status of the order.

looop=payment-status

​
Order page link

This attribute should be added to a button/link block. When clicked, it will redirect the user to the order page.

looop=order-link

​
Order tracking number

This is a text block that will display the tracking number of the order.

looop=order-tracking-number

This attribute should be added to a button/link block. When clicked, it will redirect the user to the carrier tracking page.

looop=order-tracking

​
Order date

This is a text block that will display the date of the order.

looop=order-date

​
Order total

This is a text block that will display the total amount of the order.

looop=order-total

This attribute should be added to a button/link block. When clicked, it will redirect the user to the Shopify account page, where they can manage subscriptions.

looop=order-shopify-account

Order list should be only accessible to logged in users. Use customer variables to add conditional visibility to the order list.

​
Order Status Bagdes

You can use custom code embed to change the color of order and payment status badges.

<script>
function badges() {const orderStatusElements = document.querySelectorAll('[looop="order-status"]');
const orderPaymentElements = document.querySelectorAll('[looop="payment-status"]');

orderStatusElements.forEach((element) => {
    if(element.textContent === "UNFULFILLED") {
        element.classList.add("is-warning");
    } else if(element.textContent === "FULFILLED") {
        element.classList.add("is-success");
    } 
});

orderPaymentElements.forEach((element) => {
    if(element.textContent === "UNPAID") {
        element.classList.add("is-warning");
    } else if(element.textContent === "PAID") {
        element.classList.add("is-success");
    } else if (element.textContent === "REFUNDED") {
        element.classList.add("is-danger");
    }
});}

const orderList = document.querySelector('[looop="order-list"]');
const observer = new MutationObserver(() => {
    badges();
});
observer.observe(orderList, { childList: true, subtree: true });
</script>

The code above will add color to the order and payment status badges. It is using combo classes to change the color of the badges. You can change the color of the badges by changing the combo classes in the code.