Custom field blocks

Plan requirement

Checkout Blocks is available only to merchants on the Shopify Plus plan.

You can collect additional customer information with the Custom field block. Custom fields can be optional or required, so you can configure custom fields to block the checkout before a customer can proceed.

Checkout Blocks supports a variety of input types, including plain text, dropdown menus, checkboxes, and a date picker. The custom field data can be saved as an order metafield, order attribute, or order note.

There are multiple templates available that pre-populate a custom field block's content and settings based on some common use cases:

• Agree to terms: This template requires a customer to agree to your terms of service that can be clicked on and display in a pop-up before checking out. The checkbox isn't selected by default.
• Birthday: This template gives customers the option to provide their date of birth during checkout for marketing purposes.
• Gift message: This template gives customers the option to include an optional written message when they're placing an order as a gift for someone else.

Tip

The default Birthday template doesn't automatically generate or send a discount code for customers to use on their birthday. It also doesn't automatically apply the order's metafield data to their customer profile. You might want to consider creating a birthday discount code and then using Shopify Flow to update a customer's profile with custom field data.

Supported data types

Custom fields save to the customer's order as an order metafield, order note attribute, or the order note itself. Consider using order metafields when possible, as they're the most robust way of storing and retrieving custom data on orders within Shopify.

Checkout Blocks doesn't support adding new fields into existing checkout forms, such as the shipping address or billing address. Instead, add a custom field block above or below the existing checkout form.

Order metafields

When saving custom fields to an order metafield, the namespace it uses is checkoutblocks and the key is defined when you add a custom field to the block (for example, agree_to_terms).

Tip

You can create metafield definitions to display specific custom fields directly on the order detail page.

Order attributes

Order attributes, also known as note attributes or cart attributes, are incompatible with Shopify's default packing slips and draft orders.

If you need to use packing slips or draft orders, then use order metafields as your data type instead.

Order notes

When saving custom fields to order notes, any existing content the customer adds to the note field is replaced with your custom field. If you choose to save your custom field data as an order note, then consider deactivating the option to add an order note in the cart in your theme, if you've activated that setting. This means customers don't have to input their note content twice.

A benefit of using the order notes type is that it displays existing order notes entered in the cart within checkout automatically. This ensure consistency across the checkout flow for specific use cases, such as order notes or delivery notes.

Order notes are incompatible with draft orders.

Supported input types

Custom field blocks support the following types of fields:

• Checkbox
• Date and time picker
• Date of birth
• Dropdown list
• Phone field
• Radio buttons
• Text input

Create a custom field block

You can create and configure a custom field block in the Checkout Blocks app. After you create a custom field block, you must add the block to the checkout.

Steps:

1. From your Shopify admin, go to Sales channels > Checkout Blocks.
2. Click Blocks, and then click Create block.
3. Click Custom field.
4. Select the template for the field that you want to use. If you don't want any fields or settings pre-populated, then select Blank template.
5. In the Block name section, enter a name for the block. This isn't displayed to your customers.
6. In the App block ID section, use the drop-down menu to set the ID as either Dynamic or apply a specific ID number. Learn more about app block IDs.
7. In the Display rules section, configure your block display rules:
   • To display the block to all customers, leave the Display rules section empty.
   • To create a display rule, click ⊕ Add display rule, and then configure your rule. Add as many display rules as required.
8. In the Content section, add and customize the content of your block:
   1. In the Save as menu, select where to save the custom field data. Learn more about custom field data types.
   2. In the Fields section, click ⊕ Add custom field, and then select the type of custom field that you want to use.
   3. Configure your custom field details, such as field labels, field key, choice options, and whether the field is required. Click Done.
   4. Optional: In the Section header section, add a title and subtitle to your custom field.
   5. Optional: In the Settings section, select whether to append "(optional)" to your field label and whether to display all fields.
9. Optional: In the Styles section, click Customize design to customize the block's margins, container, and divider styles.
10. Optional: In the Publishing section, click the pencil icon to select the markets and checkout pages that you want the block to display in.
11. Click Save.

Your block is saved as Draft by default. When you're ready to publish the block, in the Status section, select Active from the drop-down menu.

Add a custom field block to checkout

You can add an existing custom field block to the checkout. Blocks must be set to Active to display in checkout.

Steps:

1. From your Shopify admin, go to Sales channels > Checkout Blocks.
2. Click Blocks.
3. Click the custom field block that you want to add to checkout.
4. Click More actions ⌄ > Add to checkout.
5. Optional: In the Preview block id section, click the clipboard icon to copy the block's unique preview ID.
6. Select your desired checkout configuration, and then click Open editor.
7. In the checkout and accounts editor, add the custom field block to your checkout:
   1. Navigate to the checkout page that you want to add the block to.
   2. Click ⊕ Add app block in the section that you want to add the block to.
   3. Click the Custom field Checkout Blocks option.
   4. Configure the details of the checkout block, and select the block's corresponding app block ID.
   5. Optional: Use the Preview block id (For testing purposes) field and the block's preview ID to preview how the block displays in checkout.
   6. Optional: Drag and drop the dynamic block to change the location on the checkout page where you want the block to display.
8. Click Save.