How to Use Custom Header/Footer in Case Studies (Beta) That Use Elevate Theme?

[VJindal]

Hi HubSpot Devs,

I'm working with the Case Studies (Beta) feature in HubSpot CMS, and I’d like to customize the header and footer. Right now, it uses the default Elevate theme, and I’m facing these limitations:

What I’ve Tried:

• I cloned the Elevate theme to elevate-custom and added a custom header/footer.

• But Case Study Beta pages don’t let you assign a different theme — it stays locked to Elevate.

• I don’t want to contact HubSpot support and would prefer a developer workaround.

What I'm Trying to Achieve:

• Replace or override the default Elevate header/footer on Case Study Beta pages.

• Do this either through layout/module override, JavaScript, or other means — without rebuilding all pages manually as landing pages.

My Questions:

1. Is there a way to override or replace the header/footer on Case Study Beta pages?

2. Can we use HubL, JavaScript, or layout hacks to hide the Elevate header/footer and load our custom one?

3. Any plans for allowing theme switching or custom layout assignments in Case Studies Beta?

Any help or suggestions from the community would be amazing!

Thanks 🙏

[evaldas · Accepted solution]

Hi @VJindal

Unfortunately, this is not yet possible.

You may have noticed that there is a link to "Edit template" when creating/editing a case study, but that link is misleading.

Typically you would be able to either clone or create a child theme, then select that theme for your content. At the moment, the case studies are locked to the Elevate theme and does not allow changing the theme or even the templates within that theme. 

There are also currently no options to add custom HTML to the header/footer of these case study pages specifically. However, you could utilize some JS and target case studies specifically in the Site header HTML (Settings > Content > Pages >  Templates tab). You can use HubL there as well.

Sample script using JS and HubL:

<script>
document.addEventListener("DOMContentLoaded", function () {
  if (window.location.pathname.includes("/case-studies/")) {
    // Do something on the case studies pages
    {% set custom_message = "this is a case study" %}
    console.log("{{ custom_message }}");
  }
});
</script>

As you probably understand, this would be a "hacky" approach, but you can use this approach to manipulate the header and footer elements on the case study pages.

Hope this helps!

[Jaycee_Lewis]

Hey, @VJindal 👋 If you are following the steps outlined for Editing Case Study Appearance, and it's not working, reporting this to support is likely the best next step. @evaldas @GiantFocal do you have any suggestions for @VJindal?

Thank you! — Jaycee