HubSpot Membership Login: Customize or Remove Default Text for a Branded Experience

Ever found yourself staring at a HubSpot membership login page, wondering how to tweak that one pesky piece of auto-generated text? You’re not alone! Customizing every corner of your digital storefront, especially critical touchpoints like login pages, is key to delivering a seamless brand experience. Whether you're a seasoned developer or just getting started with building your online store on HubSpot, having full control over your messaging is paramount.

Recently, a common customization challenge popped up in the HubSpot Community, and the discussion offered some incredibly valuable insights for anyone looking to go beyond the default settings. The original poster (let's call them the "initial inquirer") was trying to customize the text inside the #hs-login-self-registration-link element within the member_login module. This text, like "Don’t have an account? Please register here," often appears automatically and isn't immediately obvious how to change directly in your template code.

The initial inquirer had already done some smart detective work, noting that the text was generated by HubSpot and wasn't in their template. They even considered a workaround: hiding the element with CSS and then adding their own custom text. While this can work in a pinch, the community discussion revealed a much more robust and HubSpot-native approach.

Unlocking HubSpot System Page Customization

A helpful community member quickly jumped in with excellent guidance. The core of the solution lies in understanding how HubSpot handles "System pages" – those essential pages like membership login, password reset, and subscription preferences that are part of the HubSpot CMS default setup. These pages, while powerful, often need a personal touch to align with your brand, especially if you're aiming for a distinctive feel for your builders online store.

The first crucial step is to locate and clone the default system page template. For membership pages, this is typically found at:

@hubspot/cmsdefaultsystempages/templates/membership

By copying this template (and its associated assets) into your own theme, you gain the power to modify it without affecting HubSpot's core system files. Think of it as creating your own editable version.

Once you have your cloned template, you'll find that HubSpot uses a clever system for managing labels and text, particularly for multi-language setups. This is done through template_translations, which pulls messages from translation files. Here’s an example of how the member_login module defines its text:

{% member_login "login_form"
      extra_classes="form-wrapper form-wrapper--membership-login",
      email_label={{ template_translations.member_login_email.message }},
      password_label={{ template_translations.member_login_password.message }},
      remember_me_label={{ template_translations.member_login_remember_me.message }},
      reset_password_text={{ template_translations.member_login_reset_password.message }},
      submit_butt template_translations.member_login_submit.message }},
      show_password={{ template_translations.member_login_show_password.message }}
    %}

    {% module "admin_contact"
      path="@hubspot/rich_text",
      html={{ "
" ~ template_translations.member_login_contact_admin.message ~ "
" }}
    %}

The community expert outlined two main strategies for customization:

1. Static Text (Single Language): For simpler setups, you can directly replace {{ template_translations... }} with your custom text. This is straightforward but not scalable for multi-language sites.
2. Translation Files (Multi-Language & Recommended): This is the professional approach. HubSpot automatically matches translations to specific folder and file name conventions. You'll typically have a _locales folder containing subfolders for each language (e.g., de, en) and a messages.json file within each.

- _locales (folder)
- - de
- - - messages.json
- - en
- - - messages.json
- - ...

The translations are loaded using a line similar to this (which you might find in system-base.html or copy into your template):

{% set template_translati html_lang, "en") %}

Overwriting or Removing Existing Text

The initial inquirer had a crucial follow-up: they didn't just want to add text; they wanted to completely replace or remove the existing HubSpot-generated text. Their goal was to replace the default

Don’t have an account? Please register here.

with their own messaging or remove it entirely.

The community expert clarified that you can indeed overwrite defaults by using the exact same setup and variables. This means if HubSpot is pulling a message from, say, template_translations.member_login_contact_admin.message, you can define that key in your own messages.json file to provide your custom content.

For example, to customize the admin_contact module's text, your messages.json would look something like this:

{
"member_login_contact_admin":{
   "message": "Your custom translated content",
   "description": "optional information",
   "placeholder": null
}
...
}

You can do this for other elements like email, password, remember me, and reset password labels:

{
"member_login_contact_admin":{
   "message": "Your custom translated content",
   "description": "optional information",
   "placeholder": null
},
"member_login_email":{
   "message": "Your custom translated content",
   "description": "optional information",
   "placeholder": null
},
"member_login_password":{
   "message": "Your custom translated content",
   "description": "optional information",
   "placeholder": null
},
"member_login_remember_me":{
   "message": "Your custom translated content",
   "description": "optional information",
   "placeholder": null
},
"member_login_reset_password":{
   "message": "Your custom translated content",
   "description": "optional information",
   "placeholder": null
}
...
}

And here’s the neat trick for removing text entirely: simply set the html attribute of the module to an empty string. If you want to get rid of the admin_contact module's output, you'd modify it in your cloned template like this:

{% module "admin_contact"
      path="@hubspot/rich_text",
      html=""
%}

Step-by-Step Customization

Here’s a summary of the recommended approach to customize or remove text on your HubSpot membership login pages:

1. Clone the System Template: Navigate to the default membership login template (@hubspot/cmsdefaultsystempages/templates/membership), copy its contents, and save it as a new HTML template within your theme.
2. Create/Update Translation Files: In your theme, create a _locales folder if you don't have one. Inside, create language-specific subfolders (e.g., en, de) and place a messages.json file in each.
3. Define Your Translations: Populate your messages.json files with the keys used by the member_login module (e.g., member_login_email, member_login_contact_admin). Set the "message" value to your desired custom text.
4. Remove Unwanted Modules: If you want to completely remove a module's output, find its declaration in your cloned template and set its html attribute to an empty string (e.g., html="").
5. Apply the Custom Template: Ensure your HubSpot membership settings are configured to use your newly customized template for the login page.

ESHOPMAN Team Comment

This community discussion highlights a fundamental aspect of HubSpot CMS customization that is critical for any serious builders online store: the ability to override system defaults gracefully. The solution, leveraging translation files and module overrides, is robust and scalable, perfectly aligning with best practices for multi-language e-commerce. We strongly advocate for this approach over CSS-based hiding, as it ensures cleaner code, better SEO, and a more maintainable setup for your storefront.

Mastering these customization techniques means you're not just using HubSpot, you're truly owning your digital experience. It empowers you to craft a login page that feels native to your brand, enhances user trust, and ultimately contributes to a more cohesive customer journey. Don't let default text dictate your brand voice!