Disclaimer: The latest version of our Customer Fields app uses Shopify's theme app extensions for form installation. The previously-known installation issues with the Warehouse theme no longer exist when using the new installation process. All details in the article below only pertain to shops that have used the app's vintage form installation process.

Overview

The Warehouse theme has a unique way of handling customer registration forms, so additional changes need to be made to the theme's code in order to properly install a Customer Fields form. We have provided some instructions in this help article that explain the changes needed in order to install a form on the registration page and edit account page using the Warehouse theme.

Please note that you still need to use the app's form builder to install a form on the theme first, and then you can follow the steps outlined in this help article.

Warehouse: pre-Online Store 2.0

Follow the steps below if you're using an older version of the Warehouse theme that was developed prior to the Online Store 2.0 update. If you're using a newer version of the Warehouse theme, use these steps instead.

Registration page

After installing a form on the Warehouse theme using the Registration page location, the following changes need to be made to the theme's code:

1. Edit templates/customers/register.liquid and search for "customer-fields"

2. You should find a line in the code that starts with {% render "customer-fields" ...

3. Make note of the Form ID found in this render tag, since you will need this later on

4. Replace all of the code in the file with the following:

<section>
  <div class="container">
   <div class="cf-form" style="margin:60px auto; text-align:center; max-width:600px;">
     
    <header class="form__header">
      <h1 class="form__title heading h1">{{ 'customer.register.create_account' | t }}</h1>
      <p class="form__legend">{{ 'customer.register.description' | t }}</p>
    </header>
     
    {% render "customer-fields", form_id: "ABC123" %}
     
   </div>
  </div>
</section>

5. After you have replaced the code, change ABC123 in the new code to use the proper Form ID from Step 3

6. Edit sections/header.liquid and make the following change:

Replace this:

<p>{{ 'customer.login.new_customer' | t }} <button data-action="show-popover-panel" aria-controls="header-register-panel" class="link link--accented">{{ 'customer.login.create_your_account' | t }}</button></p>

With this:

<p>{{ 'customer.login.new_customer' | t }} <a href="{{ routes.account_register_url }}" aria-controls="header-register-panel" class="link link--accented">{{ 'customer.login.create_your_account' | t }}</a></p>

Edit account page

After installing a form on the Warehouse theme using the Edit account page location, you need to make the following changes to the theme's code:

The "Edit account" link in the account template (templates/customers/account.liquid) needs to be moved to be part of the left sidebar.
The edit account page template (templates/customers/account.edit.liquid) needs to be copied over from the register template (templates/customers/register.liquid), and then modified to use the correct page title and page description.
The addresses template (templates/customers/addresses.liquid) needs to be edited to include the "Edit account" link.
An "Edit account" link needs to be added to the account dropdown in the header (sections/header.liquid).

Warehouse: Online Store 2.0

Follow the steps below if you're using a newer version of the Warehouse theme that has been designed for use with Online Store 2.0.

Registration page

After installing a form on the Warehouse theme using the Registration page location, the following changes need to be made to the theme's code:

1. Edit sections/main-customers-register.liquid

2. On line 3, you should find code that starts with {% render "customer-fields" ...

3. Make note of the Form ID found in this render tag, since you will need this later on

4. Replace all of the code in the file with the following:

<section data-section-id="{{ section.id }}" data-section-type="register">
   <div class="container">
     <div class="cf-form" style="margin:60px auto; text-align:center; max-width:600px;">
       <header class="form__header">
         <h1 class="form__title heading h1">{{ 'customer.register.create_account' | t }}</h1>
         <p class="form__legend">{{ 'customer.register.description' | t }}</p>
       </header>
       {% render "customer-fields", form_id: "ABC123" %}
    </div>
   </div>
</section>

{% schema %}
{
"name": "Register"
}
{% endschema %}

5. After you have replaced the code, change ABC123 in the new code to use the proper Form ID from Step 3

Edit account page

After installing a form on the Warehouse theme using the Edit account page location, you need to make the following changes to the theme's code:

1. The "Edit account" link in the account section (sections/main-customers-account.liquid) needs to be moved to be inside of the theme's left sidebar.

2. All of the code found in the edit account template (templates/customers/account.edit.liquid) needs to be replaced by copy/pasting the code from the register section (sections/main-customers-register.liquid).

The code then needs to be modified to use the correct page title and page description.
The schema tags at the bottom of the file also need to be removed.

3. The addresses section (sections/main-customers-addresses.liquid) needs to be edited to include the "Edit account" link in the left sidebar.

4. An "Edit account" link needs to be added to the account dropdown in the header (sections/header.liquid).

Questions or concerns?

Reach out to our support team via chat or email and we'll be happy to assist! We have no problem stepping in and performing a form install on your behalf if needed 🤗