Order Builder - Adding and Managing Shopify Order Metafields

This guide provides a step-by-step process for setting up Shopify Order Metafields for customer accounts, enhancing user experience by facilitating easy access to important files and cont. It details how to create custom order metafields in the C:Hub Customer Accounts app and add buttons into order summary and detail sections. By following this guide, users can streamline order management and improve customer satisfaction by ensuring essential documents and important info is readily available.

Ezra Miller
32 steps
4 minutes

My Shopify

Customerhubapp

Shopify

Navigate to the C:Hub Customer Accounts app

Click "Customize"

Click "Order Builder"

From here you'll be able to see the 'Manage Order Data' section. From here, you're able to click on the 'Create Custom Data' button, which will navigate you directly to the Shopify settings 'Add order metafield definition' page, to create a new order metafield. You're also able to click on the 'Reload Fields from Shopify' button, which will check your Shopify order metafields for any order fields, and load them into this section.

Click "Create Custom Data" to navigate to the 'Add order metafield definition' page, to create a new metafield.

Inside of the 'Name' field, type in the name you'd like to give your order metafield. In this example, we'll create a PDF Download order field, so in the name field, we'll type in 'PDF Download'. Click 'Select Type' to select the type of order metafield you'd like to add. For this example, we'll select 'File'.

And as we'll be add PDF files and not images or videos, we'll select 'Accept all file types' from the validation section.

Click "Save"

From the 'Order Builder' inside of the C:Hub Customer Accounts app, click "Reload Fields from Shopify".

Click "Reload Fields" in the pop-up window.

You'll receive another pop-up window to let you know that the order namespace has been re-synced. Click "Ok"

You'll now see the new order metafield you've created, on the Shopify platform, has been loaded into the order builder and is ready to use.

Note: Only File or URL data types are supported for Order Summary Buttons.

Now that the new order metafield has been added to the order builder, we add the button to the the customers order, for customers to have easy access to the PDF Download file. The first section we can add the button to is the "Order Summary Buttons" section. When an order metafield is added to this section, it displays the button on the order summary/overview section of the customers order. In this example, the 'PDF Download' button. We'll click on the 'Insert Field' button:

Select the "PDF Download \[custom.pdf_download\]" option from the drop down:

Click "Insert Button"

Note: Only File or URL data types are supported for Order Detail Buttons.

We'll also add the field to the 'Order Detail Buttons" section, which will add the 'PDF Download' button to the order details page. Click "Insert Field" inside of the "Order Details Buttons" section

Select the "PDF Download [custom.pdf_download]" option.

Click "Insert Button"

Note: You can use Single line text, Multi-line text, True or False, File, URL, Integer, Decimal, Date or Date and time fields for your order detail extras.

Lastly, we can also add the field to the "Order Detail Extras" section. This section is primarily used for adding additional text to an order, for example, instructions, an important notice, etc. However, files can also be added to this section, and will still be clickable. Click "Insert Field"

Select the "PDF Download [custom.pdf_download]" option.

Click "Insert Button"

Click "Save"

You'll be prompted to "Login & View My Account" or "Continue Editing". We'll click "Continue Editing", as we need to add content to the field on an order, for the buttons and order extras to appear. While we have added the buttons to the order, they will not display on an order yet, as no PDF file has been added to the field. The Buttons will only appear on the order, if content has been added to the order field.

Adding Content to the Order Metafield

Click "Orders"

Click on the order, you'd like to add the PDF file to

Inside of the order, you'll see the 'Metafields' section, with your newly created Order Metafield. In our example, we're able to see "PDF Download". Click inside of the empty field:

Click "Select file" and add a file to the field

Viewing the buttons on the Customer Account Page

Once done, open the customer account page, with the order and you'll see the "PDF Download" button on the order overview.

If you clikc on the "View" button, on the order, you'll be taken to the "Order Details Page" of the order.

You'll now be able to see the "PDF Download" button on the Order Details Page, at the top of the order alongside any other order buttons.

Lastly, if you scroll to the bottom of the order, you'll see the "Additional Order Information" section, with the "PDF Download" available to also be clicked, and downloaded. This is the "Order Details Extras" section.

Advanced

Inside of the "Order Builder", if you scroll to the very bottom of the page, you'll also see the "Advanced Setup" section. This section allows you to change the namespace and choose from any other namespace that's being used on the Shopify platform. This allows you to sync pre-existing metafields, using an alternate namespace (instead of the default namespace: custom). This does also allow you sync 3rd party app fields into the "Order Builder" for use as well. Please note, only one namespace can be used. If you have metafields created under multiple namespaces, you can only sync one namespace into the "Order Builder".