The Shopify Order Status Widget is used to display the custom order status and timeline directly on the Shopify Order Status page sent to your customers after placing an order on Shopify, as well as the order detail page available under the customer account.
Add the Snippet to the Shopify Order Status page.
Steps
- Go to your shop Settings
- Press Checkout
- Scroll down to Order Status Page
- Copy and paste the following snippets into the additional Scripts Field
- Press Save
<script>var shopName = '{{shop.permanent_domain}}'; var orderID= '{{order.id}}';</script>
<script src="https://orderstatus.w3apps.co/js/shopify-order-status.js"></script>
Once the snippet is added, the widget will appear at the top of the Order Status Page.
If the Status is part of a Workflow, the widget will display the progress in a timeline format.
If you would like to change the location of the order status content box, you can include the Javascript variable "osIndex" in the script tag.
<script>var shopName = '{{shop.permanent_domain}}'; var orderID= '{{order.id}}'; var osIndex=1;</script>
The osIndex is the index number of the content box on the page that you would like the order status to display above. Note: the index is 0 based (the first item starts with 0)
For example, if you set the osIndex to 1, the script will find the existing content box with an index of 1 and then place the order status above it.
Add the Snippet to the Customer Order Detail Page
Steps
- Select "Edit Code" to edit the code files for your theme
- Locate the content for the "customer/orders" template. This may be in another section file.
- Paste the following HTML into the page where you would like the status to appear.
<div class="w3-customer-account-order-status"></div>
- Press Save to save your changes, and then exit the code editor.
- Press the "Customize" button next to your theme.
- In the theme settings, select the App Embeds icon and turn on the "Customer Account Status" app embed
- Click on the App embed to see the available appearance settings that can be configured.
- Press Save
Language and Template
The content of the order status information is controlled by the template and language settings found on the Order Status Widget page of the app.
Order Status Title Block:
Large title font at the top of the block
Status Not Set:
The message that is displayed when the order does not have a custom status set.
Order Details Not Available:
The message that is displayed when the app is unable to find the order in the app. This is generally caused when the checkout page does not contain the order number.
Current Order Status:
Text that is displayed just before the name of the current status.
Order Status Primary Color:
This is the color that is used for the progress icons. This setting is only used when the current status is part of a workflow.
Intro Template:
The HTML Code used to display additional content. The content entered into this field will appear just below the "Current Order Status" field. This field accepts all the same short codes that are available on the message templates. It is commonly used to display the Due Date. Read more about date formatting.
Order Status Template:
The HTML Code used to display the message. The field accepts all the same short codes that are available on the message templates.