ESHOPMANESHOPMAN Logo
Our Blog

HubSpot Email Preferences Page: Unraveling the 'Cloned Template' Publish Error

HubSpot Email Preferences Page: Unraveling the 'Cloned Template' Publish Error

Hey ESHOPMAN community and fellow HubSpot aficionados!

Ever found yourself deep in the HubSpot CMS, trying to customize something seemingly straightforward, only to hit a wall of cryptic error messages? If you’ve ever tried to tweak the default email subscription preferences page, you might just relate to a recent discussion that caught our eye in the HubSpot Community.

It’s a common scenario: you want to brand your system pages, make them truly yours, but HubSpot’s underlying structure can sometimes throw a wrench in the works. Let’s dive into a specific problem that a community member faced and, more importantly, the brilliant solution that emerged.

The Frustration: Cloning HubSpot System Pages

The original poster in the community thread was trying to customize their HubSpot email subscription preferences page. The recommended method is simple enough: go to Settings → Marketing → Email → Subscriptions → Actions → Edit → Clone template. Sounds easy, right?

However, even with a fresh, unedited clone, as soon as they made any change and hit 'Publish', two persistent errors popped up:

  1. The source doesn't contain the required module email_subscriptions
  2. Missing template /system-base.html (line 12: {% extends "../system-base.html" %})

They’d checked everything: the clone was identical to the original, the module path path="@hubspot/email_subscriptions" was correct, and even HubSpot AI support suggested the same cloning steps with no success. It felt like a portal-level bug.

The Community's Expert Breakdown: Solving the Mystery

Luckily, the HubSpot Community is a treasure trove of expertise. One incredibly helpful respondent, let’s call them our resident CMS wizard, swooped in with a detailed explanation and a solution that cleared up the confusion.

Understanding the `{% extends %}` Tag

The core of the problem, especially with the Missing template /system-base.html error, lies in how HubSpot themes handle template inheritance. When you clone a system template, it often lives within your custom theme structure. System templates, by default, extend a HubSpot-specific system-base.html. However, your custom theme likely has its own base.html or similar layout file.

The expert explained that you need to change the {% extends "../system-base.html" %} line to point to your theme's main layout file. For example, if your theme structure looks like this:

theme
├── css
├── modules
├── templates
│   ├── layouts
│   │   └── base.html
│   └── system
│       └── custom_preference-center.html <- your cloned template
├── fields.json
└── theme.json

Then your {% extends %} tag should be updated to:

{% extends "../layouts/base.html" %}

or

{% extends "./templates/layouts/base.html" %}

Why is this critical? HubSpot templates require {{ standard_header_includes }} and {{ standard_footer_includes }} for essential scripts and styles. Your theme's base.html typically contains these, ensuring your page functions correctly. Extending it is the easiest way to ensure these crucial elements are present.

Tackling the `email_subscriptions` Module Error

The second error, regarding the missing email_subscriptions module, was a bit more nuanced. The community expert suggested two possibilities:

  1. The {% extends %} tag issue might be overriding everything and causing HubSpot to misfire this error.
  2. There might be an unclosed module_block somewhere in the template.

They provided the full, default module_block for the email subscription preferences:

{% module_block module "email_subscription_preferences"
      path="@hubspot/email_subscriptions",
      extra_classes="form-wrapper form-wrapper--subscription-preferences",
      email_heading_level="p",
      language_dropdown_label={{ template_translations.subscription_preferences_language_input_label.message }},
      resubscribe_butt template_translations.subscription_preferences_resubscribe_button_text.message }},
      subheader_text="",
      unsubscribe_all_unsubbed_text={{ template_translations.subscription_preferences_resubscribe_text.message }},
      butt template_translations.subscription_preferences_button_text.message }},
      header="",
      unsubscribe_all_option={{ template_translations.subscription_preferences_unsub_all_option.message }},
      unsubscribe_all_text=""
    %}
      {% module_attribute "unsubscribe_single_text" %}
        {% if business_unit().name %}
          {{ template_translations.subscription_preferences_single_text_business_unit.message }}
        {% else %}
          {{ template_translations.subscription_preferences_single_text.message %}
        {% endif %}
      {% end_module_attribute %}
    {% end_module_block %}

For most basic setups, this can be drastically simplified to the bare minimum:

{% module "email_subscription_preferences" path="@hubspot/email_subscriptions" %}

If you're working with multi-language portals or business units, you’d need to include the relevant attributes as seen in the larger block, often leveraging template_translations loaded from a _locales folder.

The Solution and Key Takeaways

The original poster confirmed that these detailed instructions provided a complete solution. It highlights a crucial aspect of working with HubSpot's CMS: understanding how system templates interact with your custom theme's architecture.

So, if you're ever cloning a system page like the subscription preferences, here’s your quick checklist:

  1. Review your {% extends %} path: Make sure it points to your theme's main base.html or layout file, not the default system one.
  2. Ensure essential includes: By extending your theme's base, you automatically pull in standard_header_includes and standard_footer_includes.
  3. Verify module syntax: Double-check your email_subscriptions module block for correct syntax and ensure it's properly closed. Simplify it if you don't need all the advanced translation or business unit attributes.

ESHOPMAN Team Comment

This community discussion perfectly illustrates a common developer headache when trying to customize HubSpot's powerful but sometimes opaque system pages. The detailed, step-by-step solution provided by the community expert is exactly what HubSpot users need: practical advice that goes beyond basic documentation. We wholeheartedly agree that understanding template inheritance and the role of base.html is paramount for any serious HubSpot CMS development, saving countless hours of frustration.

Customizing these critical pages is essential for a seamless brand experience, especially for e-commerce stores running on platforms like ESHOPMAN, where every touchpoint with a customer counts. A well-branded subscription preferences page isn't just a technical detail; it's part of the overall customer journey that reinforces trust and professionalism. So, next time you're deep in the HubSpot CMS, remember these insights – they might just save your day!

Share: