Skip to content
  • Home
  • Features
    • Matrix Framework
    • Matrix One
    • Plugin Toolkit
    • Matrix Library
  • Templates
  • Support
  • Pricing
  • Home
  • Features
    • Matrix Framework
    • Matrix One
    • Plugin Toolkit
    • Matrix Library
  • Templates
  • Support
  • Pricing
  1. Support
Framework Core Updated · v1.7.6

Template Selection

Your starting design is never final. No matter which look you set up first — a default theme, a custom palette, or a hand-tuned Style Editor — you can always open the Template Selection popup and switch to a new design in one click.

5 min read
Beginner friendly

On this page

  • Change anytime
  • Overview
  • Quick setup
  • Switch a template
  • Lock colors & CSS
  • Update Template
  • What you get
  • Troubleshooting

Change anytime — starting design doesn’t lock you in

Always reversible

Whether you began with a Matrix default, a premade pack, or a fully custom Style Editor setup — open Style Editor → Template Selection, click another preview, and your site’s design updates immediately. Then hit Save to keep it.

  • You’re never stuck with the first template or layout you chose
  • Switching is done from the same popup, any time you’re editing
  • Optional locks keep your brand colors and custom CSS while the rest of the design changes
  • Your page content (text, images, modules) stays — only the theme/config layer updates
Think of it this way: the initial design is a starting point, not a commitment. Template Selection is the permanent door back to a fresh look whenever you need one.

Overview

Template Selection lives inside the Style Editor. A button in the editor header opens a draggable popup with visual previews. Click a card to apply that template’s colors, layout classes, and config — then save when you’re happy.

  • Visual preview cards — see the design before you commit
  • Active template highlighted (and moved to the top when you reopen)
  • Templates load from a CDN so the list stays up to date
  • Lock Global Colors / Lock Custom CSS when you want a new look without losing your brand
browser-frame

1 Quick setup

Template Selection is off by default. Turn it on once, then the button stays available in Style Editor.

Step 1 — Enable the feature

      matrix-config.js
window.MatrixConfig = {
  features: {
    templateSelection: true // Show Template Selection in Style Editor
  }
};

Note: Make sure Style Editor is also enabled (styleEditor: true). Upload the latest template-selection.matrix.js (or full Matrix build) so the button appears.

Step 2 — Open Style Editor

In the Jimdo admin, open the Matrix Style Editor. You’ll see the Template Selection icon in the header.

2 Switch a template

This is the whole workflow — use it on day one or months later.

1

Open Template Selection

In Style Editor, click the template button in the header.

2

(Optional) Turn on locks

Use Lock Global Colors and/or Lock Custom CSS if you want to keep your palette or CSS.

3

Click a preview

The new template applies instantly in the editor preview.

4

Save

Click Save in the Style Editor to keep the change on the live site.

Tip: Not sure yet? Apply a few templates to compare. Until you Save, you can keep exploring — and you can always switch again later even after you’ve saved.

Lock colors & CSS

Switching templates normally brings the new design’s colors and custom CSS. Locks let you keep your brand while still changing layout and other config.

Control When locked When unlocked
Lock Global Colors Keeps your primary/secondary palette and button colors New template’s colors replace yours
Lock Custom CSS Keeps your Custom CSS field (and related head CSS) New template’s CSS replaces yours

Note: Lock preferences are saved with the Style Editor table when you click Save — they’ll still be there next time you edit.

Update Template

Already on a Matrix template and the creator shipped improvements? Use the blue Update Template button to refresh the template structure while keeping your colors, config classes, and CSS.

  • Best when new Style Editor options were added to your current template
  • Not for switching looks — pick a different preview card for that
  • Only available when an official (listed) template is active

What you get

The popup loads templates from the Matrix CDN and groups them for browsing:

Group Examples
Default templates Alsten, Lemberg, Zion, Bergen, Nordland, Enkel, and more
Pre-built / niche Corporation, Creative Studio, Hotel, Photography, Beauty Spa, Fashion Store, and more

Custom / premade packs: if your site uses a template that isn’t in the list, you’ll see a non-clickable “Custom Template” placeholder. You can still apply any listed template to switch away from it.

Troubleshooting

Issue Fix
No template button in Style Editor Set templateSelection: true, confirm Style Editor is on, and upload the latest build.
“Loading templates…” never finishes Check network access to the templates CDN; reload and reopen the popup.
Colors/CSS change when I didn’t want them to Enable Lock Global Colors / Lock Custom CSS before clicking a new template, then Save.
New look disappears after reload You must click Save in the Style Editor after applying a template.
Can I go back to my old design? Yes — reopen Template Selection and pick the previous template again (or any other). Locks still apply if enabled.

If you have encountered any bugs, errors, or unexpected behavior in Template Selection module, please leave a comment below.

Comments: 0

Get started
Gobal colors
  bg-primary
  bg-primary-light
  bg-primary-dark
  bg-secondary
  bg-secondary-dark
Template colors
  body
  top-header
  top-header-inner
  header
  header-inner
  navigation-inner
  navigation color
  dropdown background color
  content
Footer Styles
  background
  text color
  link color
  horizontal line
Buttons
  style 1
  style 2
  style 3
  text color
Mobile navigation
  background color
  navigation color
Other elements
  social icons
  top header border
  header border
  nav inner border
  footer border
 
Template configurations
 
has-sticky-logo has-large-header primary-font has-center-nav has-header-blur no-shopping-cart
 
Top header inner
 
 
 
Header inner
 
 
 
Navigation inner
 
 
 
Navigation styles
 
size-15 weight-400 color-nav
 
Sub-menu (breadcrumbs) styles
 
size-15
 
Mobile Navigation styles
 
size-30
 
Content styles
 
form-white
 
Footer styles
 
o-form has-thin-border has-border-style-solid has-border-top has-footer-border-color
 
Footer background image
 
 

 

Typography

Heading H1
weight-400
 
Heading H2
weight-400
 
Heading H3
weight-400
 
Body text (p, table, td)
 
 
Buttons
weight-400
 
 
Advanced settings
 
Custom CSS

#cc-inner .my-class {

color:#f0f0f0;

}

/* MATRIX-CUSTOM-MODULES-START */

#cc-m-7792741551 h1, #cc-m-7792741551 h2, #cc-m-7792741551 h3 {font-size:20px !important;}

#cc-m-7792741851 h1, #cc-m-7792741851 h2, #cc-m-7792741851 h3 {font-size:20px !important;}

#cc-m-7792930551 h1, #cc-m-7792930551 h2, #cc-m-7792930551 h3 {font-size:20px !important;}

#cc-m-12388126494 h1, #cc-m-12388126494 h2, #cc-m-12388126494 h3 {font-weight:600 !important;}

#cc-m-12388126494 h1, #cc-m-12388126494 h2, #cc-m-12388126494 h3 {font-size:40px !important;}

/* MATRIX-CUSTOM-MODULES-END */

/* MATRIX-GLOBAL-SETTINGS-START */

:root {

--content-width: 1170px;

--special-pages-content-width: 900px;

}

/* HAMBURGER-BAR-START */

:root { --hamburger-btn-background: transparent; --hamburger-btn-bg: transparent; --hamburger-btn-bg-active: transparent; }

/* HAMBURGER-BAR-END */

#cc-inner #hs-container .j-formnew input[type='submit'],

#cc-inner #hs-container input.submitUser,

#cc-inner .hs-button,

#cc-inner .j-calltoaction-link,

#cc-inner input.cc-checkout-btn,

#cc-inner a.cc-shop-addtocard {

padding: 14px 35px !important;

border-radius: 8px;

}

/* MOBILE-FULLWIDTH-BUTTONS-START */

@media only screen and (width <= 746px) {

#cc-inner #hs-container .j-formnew input[type='submit'],

#cc-inner #hs-container input.submitUser,

#cc-inner .hs-button,

#cc-inner .j-calltoaction-link {

width: 100% !important;

margin: 5px auto 0 auto;

box-sizing: border-box;

text-align: center !important;

}

}

/* MOBILE-FULLWIDTH-BUTTONS-END */

/* MATRIX-GLOBAL-SETTINGS-END */


Note:
All changes made here will be applied to your entire website.
Matrix Framework
draggable-logo

Matrix Framework

Build faster, smarter, and more flexible Jimdo websites.

has-right-col-border

Products

Matrix Framework

Matrix One

Matrix Plugin Toolkit

Resources

Support

Matrix Academy

FAQs

Changelog

Community

Showcase

Marketplace

Blog

Archive


About | Privacy Policy | Cookie Policy | Sitemap | Withdraw contract
Created with Jimdo
Log in Log out | Edit
  • Scroll to top
Close