Overview

The Warehouse theme has a unique way of handling customer registration, 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 store's registration page and edit account page.

Please note that you still need to use the installation tab in the form builder to install the form on the theme first, and then you can follow the steps below.

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:

  1. An "Edit account" link needs to be added to the account dropdown in the header (sections/header.liquid)
  2. The "Edit account" link in the account template (templates/customers/account.liquid) needs to be moved to be part of the left sidebar
  3. 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 title/description
  4. The addresses template (templates/customers/addresses.liquid) needs to be edited to include the "Edit account" link

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 the install on your behalf if needed 🤗

Did this answer your question?