How to Setup Magical Order Form Fields

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.

App Install Instructions

Installing the app in Shopify is easy.

Click “Install” on the Magical Order Form Fields app listing.

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:

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.

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 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

Yes. To add field answers into 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 }}
   {%- endfor -%}
   {% endunless %}
6. Click Save.

Add field answers to Shopify packing slips

Yes. To add field answers into a Shopify packing slip:

1. From your Shopify admin, go to Settings > Shipping and delivery.
2. In the “Packing slips” section, click “Edit” link in the “Packing slip template” card.
3. Click Edit code.
4. Find the line that contains the following code:
   {{ line_item.title }}
5. 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 }}
   {%- endfor -%}
   {% endunless %}
6. 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.

Frequently Asked Questions

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

Read FAQs