Manual Installation

The Customer Account Fields app has an automated installer that can handle most installations. If, for some reason, the automated installer fails, here is how to install the app yourself.

1. Make a Backup of your Theme

In the Shopify admin, click on Online Store, then Themes then the Actions dropdown. Select "Duplicate". If you decide not to use the app or run into problems, just activate your backup theme to get back to where you started.

2. Open Your Theme's Code Editor

On the same page as step 1, reopen the Actions dropdown and select Edit Code.

3. Update customers/account.liquid

If you'd like to allow customers to edit their profiles, edit the customers/account.liquid file to add a link to the account edit page that we'll create later in the tutorial.

Copy the following line

<p><a href="/account?view=edit">{{ shop.metafields.cf_app.account_edit_link_title }}</a></p>

Search the file you just opened for this variable.

customer.account.details

Then paste the code you copied below the highlighted line. Save the file, but leave it open for now. See screenshot.

 4. Update customers/register.liquid. 

Delete everything between the form tags. The tags are

{% form 'create_customer' %}

and

{% endform %}

Insert this line where you deleted the original form.

{% include 'cf-app.customers.register' %}

See before and after screenshots below.

Before:

After: 

5. Create "cf-app.customers.register.liquid" snippet

This step creates the form that your customers will interact with during registration.

Insert the following code into the new file called cf-app.customers.register.liquid

{% form 'create_customer' %}<br>
<div id="cf-app-customer-fields">
  <!-- Fields will be dynamically included here. -->
</div>

<script src="https://cdn.apps.bonify.io/customer_fields/public/live/CustomerFieldsApp-min.js"></script>
<br><script>
  if (typeof CustomerFieldsApp !== 'undefined') {
    CustomerFieldsApp.initFields("#cf-app-customer-fields", {
      base_url: "https://apps.bonify.io/",
      styles_url: "https://cdn.apps.bonify.io/customer_fields/public/live/cf-app-form.css",
      site_id: "{{ shop.metafields.cf_app.internal_site_id }}",
      shop_domain: "{{ shop.permanent_domain }}",
      {% if customer %}
      customer_id: "{{ customer.id }}",
      customer_token: "{{ customer.metafields.cf_app.api_token }}",
      {% endif %}
    });
  }
</script>

{% endform %}

6. Create "customers.account.edit.liquid" template file

This step creates the page and form that your customers will interact with when editing their account.

Simply reopen the file customers/register.liquid and copy the contents of that file (from step 3 above) into this new file. Save the file.

7. Test Your Work

The app is now installed on your live theme. 

Head over to the page at YOURSHOPIFYURL.com/account/register to check it out. 

Once registered as a test user, the page at /account will include an Edit link. Clicking the edit link will take you to the new page, YOURSHOPIFYURL.com/account?view=edit