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 Snippet to the Shopify Order Status page using App Block
- Add the Snippet to the Customer Order Detail Page
Add the Snippet to the Shopify Order Status page using App Block.
NOTE: Requires Checkout Extensibility
Steps:
- Navigate to the Order Status page in your theme customizer.
- navigate to the sections menu by selecting the icon in the upper left:
- select "add app block" button
- Select "Order status block"
- Edit the app block settings:
- Block Title: Title that appears at the top of the block
- Intro Paragraph: Static text that appears just below the block title
- Status Message: Message that appears when there is a status set for the order. use the shortcodes {{current_status}} and {{due_date}} to include the current status and due date for the order.
- Show Status Description: If set to true, the description will be displayed just below the intro paragraph.
- No Status Message: This message is shown if the order does not have a custom status set.
If the current order status is part of a workflow, you will see a timeline that displays all of the steps and indicates which steps are complete and which steps remain.
If the order is not part of a workflow, you will only see the information related to the current status.
- Drag and drop the app block to position it on the order status page.
- You can save the app block settings by pressing the save button in the upper right-hand corner of the theme customizer.
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.