Good news! Online Store 2.0 themes can now use an app block for Customer Fields to install forms in more places with less code.
This option is perfect for merchants who wish to install a customer form in other places on their storefront -- beyond the typical registration/edit account flow handled by the Customer Fields app embed.
The most common example of using an app block is when installing a form on a separate page (e.g. example.com/pages/reseller-signup) or a collection template (e.g. example.com/collections/vip-line). Depending upon the capabilities built into your store's theme, you might be able to use an app block in all sorts of other places as well!
There are two requirements for using a Customer Fields app block:
The theme you're using must be designed for Online Store 2.0
The Customer Fields app embed must be enabled (see docs here)
Once you've met these requirements, you can follow the steps below to find and use an app block.
How to find the Customer Fields app block
Our 'Customer form' app block can be found directly inside Shopify's theme editor. To launch the editor, login to the Shopify admin and go to Sales channels > Online Store > Themes > Customize. Once you're inside the theme editor, you'll need to navigate to the page you want to add a form to.
❗ If you're trying to install a form on its own page, you may need to create a new page template. In the dropdown menu at the top of the theme editor, simply select Pages > Create template. Don't forget to assign the template to your page in the Shopify admin
Depending on the type of template you're editing, there will be one or two options for using an app block; (1) by creating a new section and (2) by editing an existing section.
Creating a new section with an app block is supported by all Online Store 2.0 themes and most templates within OS 2.0 themes
Adding an app block to a template's existing section requires the section to support app blocks
Create a new section
This example shows how to find our app block when creating a new section:
Edit an existing section
The example below shows how to find our app block when editing an existing section (this is the 'Email signup' section in Shopify's Dawn theme):
❗ Note: Adding an app block to an existing section is only available for themes with sections that support app blocks.
Most modern Shopify themes include sections with built-in support for app blocks, but a theme developer can easily add custom app block support to sections that do not support them natively.
App block settings
When you select an app block in the theme editor, Shopify will show the app block settings on either the left or right side of your screen. The example below shows the app block settings on the right side:
Form ID
This field controls which Customer Fields form will be displayed inside the app block. Enter a valid form ID into the field, and the app block will automatically install the form you specified.
💡 Pro-tip: You can find form ID(s) in several places in the app admin for Customer Fields, including the 'Forms' page (see example) and the 'Installation' tab in the form builder (see example).
Display
The app block includes a few settings so you can adjust how the form is displayed:
Width
Controls the max-width for the form container
Vertical spacing
Controls the top and bottom margins for the form container
Horizontal spacing
Controls the left and right margins for the form container