Add Custom Order Label Support

Neto now supports Custom Order Labels in the control panel. These labels sit along side the Order Status and can be used to sort or provide further context to your control panel staff during order fulfilment. If you wish to make these custom labels customer facing you can tweak your webstore theme templates using the following guide.

Custom Order Label Example

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

Read through the Getting Started Guide to get a better sense of how the control panel, Database and Front End store interact.
Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1: Locate your themes customer template

In your control panel, navigate to Settings & Tools > All Settings & Tools > Webstore Templates and locate the folder of the theme you wish to update. This could be a staging theme based off your current active theme, or any other theme you have installed. Within your theme folder, navigate to: templates > customer.

You can also make these changes via SFTP if you have access. Don't have SFTP access, read this first.

Step 2: Update customer template

In the customer folder, locate the main template.html file. This is the main content for the webstore's My Account page.

/httpdocs/assets/themes/[THEME-NAME]/templates/customer/template.html

Locate the badge element within the 'My Orders' thumb_list codeblock, it should look something like this. Update the [@order_status@] line to the following:

[%if [@order_label_name@]%][@order_label_name@][%else%][@order_status@][%/if%]

e.g:

<span class="badge float-right
    [%if [@order_status@] eq 'On Hold' or [@order_status@] eq 'Backorder Approved' or [@order_status@] eq 'New Backorder'%]
            badge-warning
        [%elseif [@order_status@] eq 'Pick' or [@order_status@] eq 'Pack'%]
            badge-info
        [%elseif [@order_status@] eq 'New'%]
            badge-primary
        [%elseif [@order_status@] eq 'Dispatched'%]
            badge-success
        [%elseif [@order_status@] eq 'Cancelled'%]
            badge-danger
        [%else%]
            badge-secondary
    [%/if%]
    ">
-   [@order_status@]
+   [%if [@order_label_name@]%][@order_label_name@][%else%][@order_status@][%/if%]
    [%if [@refund_status@]%]([@refund_status@])[%/if%]
</span>

This code will check for a Custom Order Label, and if one exists on the order - display it as the badge text instead of the Order Status

Customise this feature

By default the above code will use the badge colour assigned to the orders current Status, and will replace the Status text with the Custom Label text. It would be possible to adjust this by changing the suggested template logic or associated styling classes.

For example, to display both the Status text and Custom Label text in the same badge:

-   [@order_status@]
+   [@order_status@] [%if [@order_label_name@]%] - [@order_label_name@][%/if%]

Or, to split the Order Status and Custom Label into their own badges:

<span class="badge float-right
    [%if [@order_status@] eq 'On Hold' or [@order_status@] eq 'Backorder Approved' or [@order_status@] eq 'New Backorder'%]
            badge-warning
        [%elseif [@order_status@] eq 'Pick' or [@order_status@] eq 'Pack'%]
            badge-info
        [%elseif [@order_status@] eq 'New'%]
            badge-primary
        [%elseif [@order_status@] eq 'Dispatched'%]
            badge-success
        [%elseif [@order_status@] eq 'Cancelled'%]
            badge-danger
        [%else%]
            badge-secondary
    [%/if%]
    ">
    [@order_status@]
    [%if [@refund_status@]%]([@refund_status@])[%/if%]
</span>
+ [%if [@order_label_name@]%]
+ <span class="badge float-right badge-info mr-1">
+     [@order_label_name@]
+ </span>
+ [%/if%]

You could also update the badge colour using the same IF/ELSE setup the Order Status text uses, just on the [@order_label_name@] tag instead. Note, as custom labels can change at anytime you will need to ensure you include a fallback or default colour for when a custom label text doesn't match one of the expected checks:

[%if [@order_label_name@]%]
<span class="badge float-right
    [%if [@order_label_name@] eq 'Waiting on Courier'%]
            badge-warning
        [%elseif [@order_label_name@] eq 'Delayed'%]
            badge-info
        [%else%]
            badge-secondary
    [%/if%]
    ">
    [@order_label_name@]
</span>
[%/if%]

Custom Order Label Example

Note: depending on the length of your Custom Label text, the badge on the My Account page may wrap onto a new line, or break out of the order thumbnail, especially if you have the Order Status text showing as well. If you see this is the case you may need to add additional styling to handle the text overflow, adjust the length of your label text, or move it into the 'account-order-card' element as part of the thumbnail body.

Once you are happy with the badge setup, set the staging theme as your active webstore theme to push the changes live and make them visible to your customers.

Your webstore now supports Custom Order Labels on the customers My Account page

Not sure about the above changes, or looking for something a bit different? If you are experienced with HTML and CSS, our developer docs provide details on the Neto by Maropost specific parts of web development. If you are not comfortable editing code, we recommend submitting a request to a Neto by Maropost design partner.

Request a quote