Order Builder

This guide shows how the Order Builder lets you control exactly how customers see and interact with their orders—where details appear, which orders are hidden, and how action buttons and badges display. It explains adding dynamic features like tag-based badges, recommended products, and custom metafield buttons/files (downloads, URLs, videos) to orders. Follow it to customize customer order pages without coding and surface only the info and actions your customers need.

Ezra Miller
20 steps
4 minutes

Run

My Shopify

Shopify

Order Builder Overview

The order builder is one of the most powerful tools inside of the C:Hub customer accounts hub app. It allows you to set how and when your customers see their orders on their account page, as well as the ability to add custom badges to show if an order is in pre-order for example. As well as, add custom buttons with download links, files and so much more.

Opening the Order Builder

To navigate to the order builder, simply open the preview editor in the C:Hub app. Click on the order builder tab on the left side of the editor. And you'll see the order builder configuration. The preview editor will also automatically navigate to the orders page to preview the changes you make here

Order Detail Display Mode

Inside of the order builder, you'll see the options: - **Order Detail Display Mode** - Which allows you to select the method in which you'd like customers to view their entire order when they click the 'View' button to view a more detailed order summary instead of just the overview. By default, this is set to - **inline under the order summary** - which is a slide down option. When the view button is clicked, the order details simply slide down to show to entire order. This keeps the customer on the same page for easy viewing. - **Dedicated order detail page** - A dedicated page to display the order details.

So for example, if you have the 'inline under the order summary' selected, when on the order page, you could open the complete order details, without leaving the order page. Where as the Dedicated order detail page, opens in a seperate page.

Order Button Layout

Beneath the order detail display mode, you'll be able to change the way in which the buttons are displayed on the orders overview through the: - Order Button Layout - From here you can select either - **Column layout** - The default layout, which stacks the buttons in a single coumn - **Grid Layout** - An optional layout that displays the buttons in a grid layout, with 2 buttons per row

Hide Orders By Tag or Status

Beneath the order button layout, you'll see the section: - **Hide Orders by Tags** - If you have orders with specific tags, that you'd like to hide from customers, you can do that from here. If you have a tag on an order, and want that order hidden from the customer account. Simply type the same tag into this section and hit enter and save. Once done, any order with the same tag, will be hidden from the customer account. (order tags can be managed from the Shopify adming panel under 'Orders')

Below the 'Hide Orders by Tags' you'll also see the section: - Hide Orders By Status - From here, you can select from the tick boxes to hide all orders based on their status: - **[['Payment statuses']]** [[Authorized]] [[Expired]] [[Paid]] [[Partially paid]] [[Partially refunded]] [[Pending]] [[Refunded]] [[Unpaid]] [[Voided]] - **[['Fulfillment statuses']]**\ [[Complete]] [[Fulfilled]] [[Partial]] [[Restocked]] [[Unfulfilled]] Once selected, any order with the status you've selected, will be hidden from the customer account page.

Order Tag Badges

A powerful feature that's been added to the order builder is the 'Order Tag Badges', Which allow you to add badges to orders with corresponding tags. For example, if you wanted to relay quickly to a customer, that an order was on 'pre-order' you could add a badge to do this. To add a badge to your orders, simply click 'Add Badge' from the order tag badges section. Once clicked you'll see the options: - **Order tag to match** - This is the corresponding tag you'll also have assigned to the order (to manage tags on orders, open 'Orders' from the Shopify admin panel). For example the tag 'pre-order'. We'd also want this identical tag on the order we'd like the badge to appear on. - **Customer label** - What text the badge will display on the order - **Badge Color** - What color you'd like the badge to be (you can choose from a list of pre-defined colors)

Recommended Products

Beneath the Order Tag Badges, you'll see the section, 'Recommended Products' which allows you to add a recommended products section directly to customers order details section. When they open their order, they'll see recommended products based on that order. To enable this, simply toggle the '**Show recommended products on order details**' and you'll see the configurable options: - **Section Title -** Which allows you change the title of this section from 'Recommended with this order' to something else you'd prefer - **Position -** Allows you to change the position of the recommended products section. By default '**Above order details**', can be changed to '**Below order details**'. - **Recommendation types** - This allows you to more fine tune what type of recommendations you'd like to show the customer. You can choose from 'Related products' set by default. Or 'complimentary products'. - **Products to Show** - This allows you to simply select how many products you'd like recommended on the order details, you can select 2, 3, 4, 6. By default, we also exclude products already in the order, however you can toggle this off below the 'products to show' section as well.

Adding Custom Buttons to Orders

Inside of the order builder, is also the 'Order Details Top Buttons' and 'Order Detail Extra Fields' sections. These sections allow you to add existing and create new Shopify order metafields, direclty to customers orders. For example, if you needed to add a download link, url path, video link, PDF download, etc, to specific orders. These can all be done, through these sections. Starting with the 'Order Detail Top Buttons', from here you can add buttons, directly to the order overview and top of the order details page, along side existing buttons.

To demonstrate this, we'll add a new button, by clicking on '+ Custom Metafield'.

You'll see a new pop-up window with a selector between 'Insert Existing' and 'Create New'. By default, we're already on the 'Insert Existing', for this example, we already have an order metafield called 'User Manual', from this pop-up, we can simply tick the box to select 'User Manual' and click 'Insert Meta Fields' down the bottom right of the pop-up.

You'll now see that the 'User Manual' field has been added to the 'Order Detail Top Buttons' section. Any order, with this Shopify order metafield populated, will display a button, directly on the order overview and order details, to download the attached file.

If you open the Shopify admin panel and go to Orders and select an existing order or create a new order, you'll see the same metafield on the order. If this is populated, the C:Hub app will display a button to download the file.

Don't see your existing metafield when trying to add them? It could simply be that you haven't selected their namespace to be accessible in the order builder. Down the very bottom of the order builder, you'll see the 'Active Namespaces' section. Simply click 'manage' in this section to ensure you have selected the correct namespace for the C:Hub app to search for. By default, the C:Hub app only looks for the namespace 'custom' and you'll need to add additional namespaces if needed. Then simply hit the 'Reload Fields' button in the section 'Manage Order Data' which is below the 'Order Detail Extra Fields' section.

To create a new order metafield and add it to your order details extra fields. Simply click on the '+ Custom Metafield' button.

Inside of the pop-up window, click on the 'Create New' tab, and you'll be given a section with fields to fill in, for the new field you'd like to create: - **Name** - The name of the field, for this example, we'll call it 'Video Tutorial' - **Type** - The type of field you'd like for it to be, we're going to select URL for this example - **Namespace** - Unless you need to, we recommend keeping this as 'custom' - **Key** - Set to not editable, however can be toggled to editable. For advanced users - **Description** - An optional field for a descripion of the field you're created

Types of fields, you can select to use in the 'Type' drop down: We support the following custom data types: Single line text, Multi-line text, True or False, File, URL, Integer, Decimal, Date or Date and time.

Once those fields have been filled in. You can also manage the 'Validation rules' by clicking on the 'Show Validation rules' drop down. Lastly, you can select where you'd like this field to be added: - Order Summary - Order Detail Top - Order Detail Bottom Once you're happy with your new field, simply click on the 'Create custom data' button, which will create and add your new Shopify order metafield.

You can also add exiting or create new fields, in the 'Order Detail Extra Fields' section. This section works in the same way as the 'Order Detail Top Buttons', except the content is added to the bottom of the order details page. Inside of the body of the order. This allows you to add text for example, like coupon codes, or instructions.