# Set Up Order Notes

Use this feature to send order notes and attributes from your funnel to Shopify.&#x20;

The notes and attributes tool is vital for print-on-demand services that ask the customer to input a custom element (e.g. text or photo) with their purchase. A popular example is customer text printed on mugs, t-shirts, hoodies, or tote bags.&#x20;

It's a three-step process:

1. [create forms](#adding-a-note-form)
2. [enabling notes and attributes](#enabling-notes-and-attributes)
3. [run a test purchase](#test-the-fields)

## Creating forms

The first step is to create a form on your funnel step. This form collects custom notes and attributes from the user.

1. Open a funnel.
2. Open the step with your product.
3. Drag a Select form element to the canvas to create a drop-down menu.

{% hint style="info" %}
To convert any other form element into a **Select form element** on the side navigation, go to the **Input type** heading and click **Select.**
{% endhint %}

5. Scroll down to the **Props** heading.

&#x20; 6\. Click the **Data type** field.

&#x20; 7\. Select **Custom** on the drop-down menu.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2Fa9BIUaq9FCWBHjdwQNp5%2Fimage.png?alt=media&#x26;token=347e7182-921c-4e4b-a85c-7c3912f9d656" alt=""><figcaption></figcaption></figure>

### Configuring the form

Now add a Data name and placeholder text.&#x20;

1. Toggle off the **Show label?** feature. (optional)
2. Click the **Data name** field and enter a unique name. This is for internal use. The customer does not see this text.

{% hint style="info" %}
Make sure the **Data name** has no spaces or special characters. For example, PrintOnMug.
{% endhint %}

&#x20; 3\. Enter placeholder text (e.g. user instructions).

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F8DF3U1kgkCbw6P2ILvnt%2Fimage.png?alt=media&#x26;token=554b1eb3-5dca-42a0-992a-fe0381b80de2" alt=""><figcaption></figcaption></figure>

### Adding other form types

You can add other form types (e.g. checkbox) to the funnel to collect a note attribute. Here's how.&#x20;

* In this example, we ask the customer to tell us if they want a left-handed or right-handed mug. (It changes which side of the mug receives the print-on-demand text). We use a checkbox to collect this information.&#x20;

1. Click the **Add new element** button at the top of the page.
2. Click the **Form element widget** and drag it to the canvas.
3. Click the new element one time.
4. Go to the **Input type** heading and select one option. We select **Checkbox**.

![Select an input type](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FV8budYCKahWZU681PZtW%2Fa-3a.png?alt=media\&token=2419b744-2d90-41b3-9f2b-63e0a2b151de)

&#x20; 5\. On the side navigation, go to the **Input type** heading and make sure **Input** is selected.

&#x20; 6\. On the side navigation, click the **Data type** field.

&#x20; 7\. Select **Custom**.

#### &#x20;Configuring the form

1. Click the form.
2. Replace **Label** with your instructions or question.

![Add a Yes-No question with a checkbox](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FhkrEW64GLrZJc43Mjdug%2Fb-2a.png?alt=media\&token=5a23e529-e175-473d-a78f-7e7941b6d05d)

{% hint style="info" %}
In this example, we ask if the mug user is left-handed. If yes, the user checks the box. If the box is unchecked (default setting), we assume the user is right-handed.&#x20;
{% endhint %}

&#x20; 3\. Click the **Data name** field and enter a unique name. This is for internal use.&#x20;

&#x20; 4\. Enter True in the **Value** field. If the box is unchecked, the value is false.

&#x20; 5\. For checkboxes, leave the Placeholder field blank.

![](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FtzpxIiJA0PAOP7d9mtQE%2Fa-4b.png?alt=media\&token=34f9d5d4-edb8-4490-8366-1ff32460c4a5)

### Previewing the fields

You can preview the note and attribute fields.&#x20;

1. Click **Save changes**.
2. Click **Preview**.

* The step displays in a new browser tab.

![Preview the fields](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FbcOxnyouE870aiLtWCLI%2Fb-3.png?alt=media\&token=2e9863b5-f8b2-4468-a72c-abdac6557db9)

## Enabling notes and attributes

The next step is to customize the automation for the product and enable the notes and attributes feature.

1. Open the funnel step with the product.
2. Click the product one time.
3. Scroll down and click the product automation.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F0iMlwpfNvHL9DOEp9aWO%2Fimage.png?alt=media&#x26;token=8a696101-42b1-454c-91a0-9e3fe2f11cef" alt=""><figcaption><p>Click the automation to add notes and attributes</p></figcaption></figure>

&#x20; 4\. On the edit automation panel, open the **Additional settings**

5. Click **Notes & dynamic variants** button.<br>

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FNQqyFR4qs44xEokCONSW%2Fimage.png?alt=media&#x26;token=973eeede-75f3-45b6-8548-cdf5c8ff78da" alt=""><figcaption></figcaption></figure>

&#x20; 5\. On the popup window, switch on the **Enable sending notes and attributes?** toggle.

&#x20; 6\. Go back to the funnel step and copy the **Data name** of the note.

&#x20; 7\. Go back to the Edit automation window and paste the **Data name** into the **Note** field.

![](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FEEO8OMTlTXJ25QpwdlG0%2Fb-6a.png?alt=media\&token=328ff57f-89df-4c82-a889-f21ab6e84e89)

### Adding an attribute

If you created an attribute on the funnel step, add it here.&#x20;

* In our example, we created an attribute that asks the customer to choose a right-handed or left-handed print-on-demand mug.

1. Click the **Add new attribute** button.
2. Go back to the funnel step and copy the **Data name** of the attribute.
3. Go back to the Edit automation popup window and paste the data name into the **Value** field.
4. Click the **Name** field and enter a description.
5. Repeat steps to add more attributes.
6. Click **Done**.
7. Click **Save changes** on this panel and the next panel.

![.](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F40yZQSFlqJ42lW9ZFHCL%2Fb-7b.png?alt=media\&token=01fb5459-f249-40b1-859c-a717b7737c31)

## Testing the fields

Now you can test the fields and see how they display on the Shopify admin page.

1. Go to the funnel step and click **Preview**.
2. Select the product and add a note and attribute.

![Add note and attribute](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FH7LOnOoGTYvlx2e38uSX%2Fc-1.png?alt=media\&token=ab6084ff-1982-46d3-a116-0df3a6191902)

&#x20; 3\. Complete the test transaction. (Use [test credit card numbers](https://stripe.com/docs/testing).)

&#x20; 4\. Go to your Shopify account.

&#x20; 5\. Open the **Orders** page.

&#x20; 6\. Open the order.

* You can see the note and attribute.

![Review order on Shopify](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FrRym3IzDF6my0alALAvz%2Fb-9a.png?alt=media\&token=951d8f35-17d0-4353-b433-d95dc078ee91)
