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.
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):
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:
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.
The app block includes a few settings so you can adjust how the form is displayed:
Controls the max-width for the form container
Controls the top and bottom margins for the form container
Controls the left and right margins for the form container