Template Selection

The Template Selection feature provides a powerful interface for previewing and applying pre-designed templates to your Matrix Framework Style Editor.

It allows users to quickly switch between different design templates while maintaining control over global colors and custom CSS through lock features. Templates are dynamically loaded from a CDN, ensuring the latest versions are always available without requiring application updates.

In the MatrixConfig object set templateSelection: true

1. Access the Style Editor: Open the Matrix Framework Style Editor

2. Locate the Template Selection button: Find the template selection icon button in the Style Editor header (right side)

3. Click the button: Click the template selection button to open the popup

4. View templates: Browse through available templates with visual previews

1. Browse templates: Scroll through the template preview cards

2. Select a template:  Click on any template preview card

3. Template applied: The template is immediately applied to your Style Editor

4. Save changes: Click the Style Editor Save button to persist the changes

Default Templates (15)

These are the core templates included with the Matrix Framework:

1. Alsten

2. Lemberg

3. Zion

4. Bergen

5. Tjorn

6. Lacksund

7. Agen

8. Horten

9. Hafen

10. Nordland

11. Hisingen

12. Oland

13. Enkel

14. Varmdo

15. Gotland

Pre-Built Templates (15)

These are additional pre-built templates for specific use cases:

1. Corporation

2. Creative Studio

3. Artisan

4. Coaching

5. Construction

6. Organic

7. Beauty Spa

8. Freelancer

9. Mechanic

10. Fashion Store

11. Hotel

12. Cleaning

13. Photography

14. Pet Care

15. Event

1. Open Template Selection: Open the template selection popup

2. Locate Lock button: Find the "Lock Global Colors" button in the popup description area

3. Enable lock: Click the button to enable color locking (button will show active state)

4. Switch templates: Apply different templates - your global colors will be preserved

5. Disable lock: Click the button again to disable color locking

How it works:

- When locked: Global colors from the current template are saved and restored after applying a new template

- When unlocked: Global colors from the new template will overwrite existing global colors

- Lock state persists across popup sessions using localStorage

1. Open Template Selection: Open the template selection popup

2. Locate Lock button: Find the "Lock Custom CSS" button next to "Lock Global Colors"

3. Enable lock: Click the button to enable CSS locking (button will show active state)

4. Edit CSS (optional): You can manually edit the custom CSS field - changes are automatically saved

5. Switch templates: Apply different templates - your custom CSS will be preserved

6. Disable lock: Click the button again to disable CSS locking

How it works:

- When locked: Custom CSS from the current template (or manually edited CSS) is saved and restored after applying a new template

- When unlocked: Custom CSS from the new template will overwrite existing custom CSS

- Auto-update: If you manually edit CSS while the lock is active, those changes are automatically saved

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