Theme Migration Without Breaking 85 Pages
A media company has 85 website pages built on three old coded templates. The developer has built a new HubSpot theme with drag-and-drop templates, a global header and footer, and custom modules for CTAs, testimonials, and article cards. The marketing team wants to edit layouts without developer tickets; the brand team wants consistent typography and spacing. Last month, a developer edited the global header to add a webinar link, and the mobile navigation broke on 20 pages because a menu label wrapped. The site also has a 3.2 MB hero image on the homepage, and Lighthouse mobile performance is 38. The migration must preserve all existing URLs and organic traffic. The team has CMS Hub Enterprise and two weeks before a product launch.
1. How should the developer structure templates and modules so marketers can edit layouts but cannot break brand consistency? Include global versus local module decisions.
Read the worked answer
Use drag-and-drop templates with clearly bounded editable areas. Each template should expose only the fields a marketer needs: heading, body, image, CTA link, and a limited choice of layout variants. Put typography, spacing, and color in theme settings or module fields with brand-approved options, not free-text CSS.
Use global modules for header, footer, and announcement bar because they must stay consistent and be edited once. Use local modules for page-specific article cards, testimonials, and CTAs so a change on one page does not cascade. If the brand team needs a locked module, keep the module required in the template and let editors change only its content fields.
The header failure was not caused by global modules; it was caused by publishing a global change without testing responsive breakpoints. Add a checklist: preview mobile, tablet, and desktop; check the longest menu label; test on a page with and without a banner. For the launch, freeze header changes 48 hours before go-live.
2. The migration must preserve URLs and organic traffic. What is your cutover plan, and where do redirects fit?
Read the worked answer
Inventory before cutover. Export all 85 live URLs, their titles, meta descriptions, canonicals, and inbound links. Map each old URL to a new URL. Keep the same path wherever possible; a new theme does not require a new URL.
Redirect only what changes. Use HubSpot URL redirects with 301 for changed paths, one hop, to the closest equivalent page. Do not redirect everything to the homepage; that is treated as a soft 404 and wastes equity. Update internal links in modules and blog posts so they point to final URLs.
Cut over in batches. Publish the new homepage and top 20 revenue pages first, then the rest. Keep the old sitemap until the new one is live and submitted. Monitor HubSpot 404 reports and Search Console for two weeks. If a page must stay on the old template temporarily, keep it live rather than unpublishing it.
3. The homepage hero is 3.2 MB and mobile Lighthouse is 38. What HubSpot-specific changes would you prioritize, and what would you not do?
Read the worked answer
Prioritize the hero first because it is the largest single payload and affects the main conversion path. Export a correctly sized image, compress it, and upload the sized file rather than scaling a 4000px image in CSS. Use responsive images or HubSpot image resizing where the module supports it, and lazy-load below-the-fold images.
Then audit custom modules for render-blocking scripts. A testimonial or carousel module may load a library used on every page. Remove unused libraries, defer non-critical scripts, and avoid loading a video player until the user clicks.
Do not delete modules or templates that live pages still reference; that creates broken pages and 404s. Do not chase a Lighthouse score by hiding content or blocking analytics scripts. Measure field data and page-level conversions after each change.