Step-by-Step Guide to Setting Up Magical Order Form Fields on Shopify

In this article I will walk you through how to install and set up the Magical Order Form Fields app developed by the Magical Apps team on your Shopify Store.

Our team builds Shopify apps that solve real problems and helps businesses of all sizes thrive online. To date, we have developed over 130 Shopify stores and developed apps such as the 4.9-star rated Magical Order Form Fields.

To put these instructions together, I worked with our team of developers and support agents to outline not only the basic install and setup instructions, but some key troubleshooting issues you may run into and how to solve them.

If you find anything is missing, please feel free to get in touch with me.

Table of contents

App Install Instructions

Installing the app in Shopify is easy.

  1. Visit Magical Order Form Fields on the Shopify App Store
  2. Click “Install”

App Setup Instructions

After completing the app installation, read the setup instructions to learn how to activate or deactivate the app embed block, add additional app blocks and create, edit, or delete a field group.

Initial App Setup

Setup Instructions

For assistance with setup, contact the Magical Apps team once the app is installed.

The guided setup process within the app will help you add and activate your first form fields in minutes. Open the app within your Shopify store to complete each of the following steps:

Add a field group
  1. Click the View Groups button to go to the Groups page.
  2. Click the Create custom field group button to create a new group.
  3. Click the Add first item button to add a field.
  4. Select the type of field you would like from the Type dropdown.
  5. Fill out the required fields and click the Add button.
  6. Click the Save button to save the group.
Activate the app embed block
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click the App embeds tab.
  4. Beside Magical Form Fields, click the toggle to activate it.
Activate fields app block
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Open the drop-down menu at the top of the page.
  4. Select Products, and then select the product template that you want to edit from the dropdown menu.
  5. Under the panel click the + Add block or + Add section button depending on where you want the product custom fields to appear.
  6. From the APPS section, click Fields to add the block.
  7. Click Save to activate it.

App Setup Instruction Library

Add fields to theme template

If you are using a Vintage theme or your theme does not allow you to place app blocks in the product section, you will have to add the custom fields code to your theme template manually.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Actions > Edit code.
  3. Under the Templates header, click into the product-template.liquid file.
  4. Locate where you would like the Custom fields to appear.
  5. Paste the following code block:
    <custom-fields></custom-fields>
  6. Click Save.
Change the style of the form fields

You can customize the style settings of the form fields to match your theme in the App embed settings.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click the App embeds tab.
  4. Beside Magical Custom Fields, click the expand icon.
  5. Make your changes to the style settings. From the theme editor page selector, search for a product that contains custom fields so you can preview the updated styles before making them live.
  6. Click Save.
Add field answers to Shopify email notifications

To add field answers to a Shopify email notification:

  1. From your Shopify admin, go to Settings > Notifications.
  2. Click the name of the notification that you want to change.
  3. Click Edit code.
  4. Find the line that contains the following code:
    {% for line in subtotal_line_items %}
  5. Find the block of code referencing the product title that comes shortly after the code above. Paste the following code after the code block for the product title:
    {% unless line.properties == empty %}
    {%- for prop in line.properties -%}
    {{ prop.first }}: {{ prop.last }}<br/>
    {%- endfor -%}
    {% endunless %}
  6. Click Save.
Add field answers to Shopify packing slips

To add field answers into a Shopify packing slip:

  1. From your Shopify admin, go to Settings > Shipping and delivery.
  2. From the Shipping and delivery menu, click Packing slip template.
  3. Find the line that contains the following code:
    {{ line_item.title }}
  4. After the closing </span> tag for <span class=”line-item-description-line”> surrounding the above code, paste the following code after the code block for the product title:
    {% unless line_item.properties == empty %}
    {%- for prop in line_item.properties -%}
    {{ prop.first }}: {{ prop.last }}<br/>
    {%- endfor -%}
    {% endunless %}
  5. Click Save.
Add products to fields

To add a product variant to field with options:

  1. From your Shopify admin, go to Fields.
  2. Click Create field group or edit an existing Field group.
  3. Add or Edit a multiple choice, checkbox or dropdown field.
  4. Add or Edit an option
  5. Click on the Attach variant button next to the field input.
  6. Select the variant you would like to add.
  7. Click Apply changes
  8. Click Save.
Add an additional price to a field

To add a fixed or percentage amount to a field with options:

  1. From your Shopify admin, go to Magical Form Fields.
  2. Click Create field group or edit an existing Field group.
  3. Add or Edit a multiple choice, checkbox or dropdown field.
  4. Add or Edit an option
  5. Click on the Add paid field button next to the trash can.
  6. Select Fixed amount or Percentage from the dropdown.
  7. Enter an amount of the field.
  8. Click Apply changes
  9. Click Save.
Enable Checkout UI extension (Growth only)

With the Checkout UI extension you can add a group of fields to your checkout. This allows you to add fields to the entire order, not just individual products.

  1. From your Shopify admin, go to Settings > Checkout and accounts.
  2. In the Checkout customization section, click Customize next to the checkout that you want to edit.
  3. Select the checkout page that you want to add an app to at the top menu bar.
  4. Click Add app.
  5. In the Apps available for this page section, click Magical Form Fields. The app is automatically placed in the recommended area of your checkout.
  6. Click on the Magical Fields app block.
  7. Enable Allow app to block checkout.
  8. Click Save.

After you add an app to your checkout, you can move the app and place it to your preferred checkout area.

Export Orders with the Order Form Field options

You can export all orders that contain Order form field options:

  1. Navigate to Exports
  2. Click Request Export
  3. Wait until the process is Complete
  4. Click Download CSV
View answers submitted by customers to an order form field

You can view them in the Shopify admin or you can export a CSV document:

  1. From your Shopify admin, go to Orders.
  2. Click the order number.
  3. The answers will show below the product title for each item in the order.
Displaying titles for Order Form Fields

You can add a title when creating a form group and display it within the App block:

  1. Navigate to Fields
  2. Click Edit or Create new field group
  3. Enter a title under Group Name
  4. Save
  5. In the Shopify menu navigate to Online store
  6. Click Customize on your published theme
  7. On the left hand side open up App embeds
  8. Expand the settings and toggle Show group name
  9. Save
Filtering orders that have field data

When viewing orders, you can filter orders that have field data:

  1. From your Shopify admin, go to Orders.
  2. Click the magnifying glass to Search and Filter on the right-hand side above the list.
  3. Click the Add Filter + button to the left.
  4. Select Tagged with 
  5. Search “Magical Form Fields”. Be sure to include the full name.
  6. All orders with fields are now displayed. You can view individual orders by clicking the Order Number.

Frequently Asked Questions

Discover answers to common questions about the Magical Order Form Fields app for Shopify.

Read FAQs

Magical Order Form Fields

Use the Magical Order Form Fields app to easily add form fields to products and checkout forms. Start collecting additional order details.

View App on Shopify