Skip to main content
How-to

Runbook: Switch the StoreFront Theme

Account: VITAG (Vitagen Labs)
Navigation: StoreFronts → [vitag.ultracartstore.com] → Themes

When to Use This Runbook​

Use when changing the visual theme of the VITAG storefront — switching from one Elements theme version to another, applying a new theme from the library, or rolling back after a theme change causes issues.

Who handles this: Owner or Marketing with full StoreFronts access.

⚠️ High impact: Changing a theme affects every page of the storefront simultaneously. Custom CSS, Visual Builder customizations, and theme-specific settings may behave differently under a new theme. Do this during low-traffic hours and have a rollback plan ready.

Before You Start​

  • [ ] Know the current theme name and version (noted in README.md: Elements v2.20)

  • [ ] Screenshot or document any custom CSS currently applied (StoreFronts → CSS)

  • [ ] Note any theme-specific settings you've configured

  • [ ] Plan to switch during off-peak hours (early morning, weekday — avoid weekends and sale periods)

  • [ ] Have the owner on standby in case a rollback is needed

Step 1: Preview the New Theme (Without Publishing)​

  1. Go to StoreFronts → select vitag.ultracartstore.com

  2. Click Themes

  3. Browse the available themes

  4. Click Preview on any theme to see it applied to your storefront content without publishing

Preview mode shows the theme applied to your actual content — not a demo with placeholder content. This is the most accurate view of what the switch will look like.

Check the preview across multiple pages:

  • [ ] Homepage (hero banner, product grid)

  • [ ] Product page (images, add to cart, subscription selector)

  • [ ] Checkout (payment form, order summary)

  • [ ] Mobile view (use your phone or browser DevTools to resize)

Step 2: Note What Will Change​

Before switching, identify elements that may need adjustment:

ElementRisk
Custom CSSMay target theme-specific class names that differ in the new theme
Visual Builder element stylingSome style properties are theme-dependent
Header/footer customizationsNew theme may have different header/footer layout
Font choicesTheme may use different default fonts
Color schemeTheme colors may override your custom palette unless re-applied
Navigation menuMenu structure may render differently

Step 3: Apply the New Theme​

  1. In the Themes section, find the target theme

  2. Click Apply or Activate

  3. Confirm the action in the dialog

The theme is applied immediately to the live storefront.

Step 4: Verify the Live Storefront​

Open the live site in an incognito browser (to avoid cached styles from your regular browser):

  • [ ] Homepage loads correctly

  • [ ] Navigation menu works (desktop and mobile hamburger menu)

  • [ ] Product pages display correctly

  • [ ] Add to cart and checkout flow work end-to-end

  • [ ] Custom CSS is still rendering as expected (check elements you customized)

  • [ ] Mobile view is acceptable

  • [ ] Any custom fonts or brand colors are displaying correctly

Step 5: Reapply Custom CSS If Needed​

If the theme change broke any custom CSS:

  1. Go to StoreFronts → [vitag.ultracartstore.com] → CSS

  2. Review the custom CSS — any selectors targeting old theme-specific class names need to be updated for the new theme's class structure

  3. Use browser DevTools (F12) to inspect elements and find the correct new class names

  4. Update the CSS selectors accordingly

  5. Save

Rollback: Revert to the Previous Theme​

If the new theme causes serious issues (checkout broken, major display problems, customer complaints):

  1. Go to StoreFronts → Themes

  2. Find the previous theme (it should still be listed)

  3. Click Apply to reactivate it

The rollback takes effect immediately. The previous theme restores all its settings.

If you can't remember the previous theme: Check the README.md project file — it documents the current theme as "Elements v2.20." If in doubt, contact UltraCart support who can check account history.

When Upgrading Within the Same Theme Family​

If you're updating from one version of Elements to a newer version (e.g., Elements v2.20 → v2.21):

  • These are minor updates and are lower risk than switching to a completely different theme

  • Still preview before applying

  • Still check custom CSS after applying — minor version updates sometimes shift class names

  • Check the UltraCart changelog or release notes for the theme version to see what changed

If VITAG is doing a full site redesign (not just a theme version update):

  1. Create a staging StoreFront (a copy of the VITAG storefront) — contact UltraCart support

  2. Apply the new theme on the staging storefront

  3. Rebuild or adjust all Visual Builder content on staging

  4. QA the full site on staging before touching the live storefront

  5. Once approved, apply to the live storefront

This approach eliminates customer-facing downtime during a redesign and gives you a safe space to iterate.

Was this page helpful?