How to Set Up Magical Form Fields (Growth Plan)

Install Magical Form Fields from the Shopify App Store, then follow the steps below to go live.

Step 1: Create a field group

1. In Shopify admin, go to the Magical Form Fields app.
2. Click Create field group.
3. On the Create Field Group page:
   • Click Add field.
   • Under Type, select the field type you want.
   • Fill in the required fields, then click Add.
   • Under Conditions, choose whether the fields apply to products, collections, or the cart.
4. Click Save and confirm the field group shows as Active.

Step 2: Activate app embed block

Note: This is a one-time setup. If you've already done it, skip this step.

1. In the Magical Form Fields app, click Setup in the left sidebar.
2. Click Activate app embed block:
   • In the theme editor, toggle Magical Form Fields on.
   • Click Save.

Step 3: Activate the fields app block

Note: This is a one-time setup. If you've already done it, skip this step.

1. From your Shopify admin, go to Online Store > Themes, then click Edit theme next to the theme you want to edit.
2. Open the drop-down menu at the top of the page.
3. Select Products, then select the product template that you want to edit.
4. In the left panel, click Add block or Add section depending on where you want the custom fields to appear.
5. In the panel that opens, click Apps, then click Fields to add the block.
6. Click Save.

Step 4: Turn on the Checkout UI extension

Note: This is a one-time setup. If you've already done it, skip this step.

1. From your Shopify admin, go to Settings > Checkout.
2. In Configurations, click Customize next to the checkout you want to edit.
3. In the editor, open the Checkout page.
4. In the left panel, click Add block under the section where you want the fields to appear.
5. Select Magical Fields to place the app block at checkout.
6. Click the Magical Fields block in the left panel. Under Checkout behavior, enable Allow app to block checkout.
7. Click Save.

That's it — your custom fields are now live on your storefront.