Fast, lightweight, and unobtrusive

The installation tool in our Customer Fields app has been purpose-built with one primary goal in mind: make things fast and easy for everyone involved. By everyone, we mean store owners & staff, agencies, developers, Shopify, and even us here at Helium!

In fact, we're on a mission to set a higher standard for app developers within the Shopify ecosystem. Providing transparency regarding changes to theme code and giving the user control over these changes are critical pieces of the puzzle, yet they are often overlooked or in some cases outright disregarded. We want to be different - we want to be better. This is why we've detailed out exactly what the app changes in a theme, when it is changed, and how it is changed. 

Select a theme

The form installer will display a list of all of the store's available themes in a dropdown. Note that the store's live (aka "published") theme will always show at the top of the list, appended with the word live in parenthesis. Simply select the theme you wish to use so the app knows where to install the frontend code. You can find more details on the frontend code at the bottom of this article.

Install Location(s)

After selecting a theme, you'll need to chose an install location for the form.  There's normally 4 options to choose from, but in some cases, a 5th option will show: 

  • Registration page
  • Login page (only shown if the selected theme has a signup form on login)
  • Edit account page
  • Separate page
  • Other location

All of the options above are referred to as Install locations in the app admin. Each install location has its own unique set of changes that are made to the theme's liquid templates, and these specific changes are noted directly in the app under the Theme changes section. See below for an example:

Frontend app code

In addition to the location-specific changes, the following changes are also made to the selected theme when a form is installed:

  • Create/update snippets/customer-fields.liquid 
  • Create/update assets/customer-fields.js 
  • Create/update assets/customer-fields.css 
  • Create/update assets/cf_form_data.<FORM ID>.json 

Notice that the last file in the list above is a form specific asset, with form's ID in the file name. If there are multiple forms installed on the same theme, then there will be multiple asset files in that theme.

Important note: Do not make any code edits to the 4 files listed above, otherwise you'll run the risk of breaking things. If you need any help making customizations to the app or its forms, please contact us via live chat or email and we'll be happy to assist, or at least point you in the right direction 👍 

Did this answer your question?