Customer Fields is fully compatible with OS 2.0 themes

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 on your theme, you can use an app block in all sorts of places!

There are two requirements for using a Customer Fields app block:

  1. The theme you're using must be designed for Online Store 2.0

  2. 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):

❗ Note: The option above 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

Did this answer your question?