Customize Your Template - Guides for every template | JoomShaper

Customize Your Template

Updated 8 Oct 2026 4 min read

JoomShaper templates are built on the Helix Ultimate framework, which gives you control over the visual design and overall structure of your website.

From the Helix template settings, you can customize your layout, header, footer, colors, typography, and responsive behavior without editing the template's core files.

Note: Available settings may vary depending on the template and Helix Ultimate version.

Before You Begin

Make sure you have:

  • A JoomShaper template installed and set as the default template
  • Helix Ultimate installed with the template
  • Your pages and content set up
  • A backup of your website before making major changes

If you installed a Quickstart package, many of the template settings are already configured to match the demo.

Open the Template Settings

To access the Helix Ultimate settings:

  1. Go to Systems > Templates > Site Template Styles.
  2. Find your JoomShaper template.
  3. Open the template style.
  4. Open the available Helix or template settings.

The exact interface may vary depending on your Joomla and Helix Ultimate version.

Customize the Layout

Use the Layout settings to control the structure of your website.

Depending on the template, you can configure areas such as:

  • Header
  • Main content
  • Sidebar
  • Sections
  • Footer
  • Module positions

You can adjust the position and structure of these areas to fit your content.

Some templates also include predefined layouts that you can use as a starting point.

Customize the Header

The header controls the top section of your website and can include elements such as:

  • Logo
  • Main navigation
  • Search
  • Social icons
  • Buttons
  • Other module positions

Depending on the template, you may be able to choose from predefined header layouts or build your own using the Helix layout settings.

Use the footer settings to configure the bottom section of your website.

You can add and arrange footer module positions for elements such as:

  • Copyright information
  • Navigation links
  • Contact information
  • Social links
  • Newsletter forms
  • Other modules

The available footer positions depend on the template.

Customize Colors and Typography

Helix Ultimate provides styling options for the visual appearance of your template.

Depending on the template, you can configure:

  • Primary and secondary colors
  • Background colors
  • Text colors
  • Heading styles
  • Font families
  • Font sizes
  • Font weights
  • Line heights

Use these settings to keep your website's typography and visual style consistent across pages.

Configure Responsive Settings

JoomShaper templates are designed to adapt to different screen sizes.

Check your layout on:

  • Desktop
  • Tablet
  • Mobile

Depending on the setting, you may be able to adjust spacing, visibility, column widths, and other layout options for different devices.

Always preview your changes on smaller screens after making major layout changes.

Configure Template Features

JoomShaper templates may include additional Helix features or template-specific settings.

Depending on the template, these can include:

  • Sticky header
  • Off-canvas menu
  • Predefined header options
  • Custom CSS
  • Custom JavaScript
  • Layout settings
  • Social sharing options
  • Performance-related settings

The available options vary between templates, so refer to your template's documentation for feature-specific instructions.

Add Custom CSS

If you need styling beyond the available template options, you can add custom CSS through the appropriate Helix custom CSS area.

Using custom CSS is preferable to modifying the template's core files because your changes are easier to maintain when the template is updated.

Tip: Keep custom code organized and document major changes so you can maintain them later.

Customize Module Positions

Helix Ultimate provides predefined positions where Joomla modules can be displayed.

You can use these positions for elements such as:

  • Menus
  • Search
  • Banners
  • Contact information
  • Social links
  • Custom HTML
  • Other Joomla modules

Module configuration is covered in more detail in Configure Menus & Modules.

Save and Check Your Changes

After making changes:

  1. Save the template settings.
  2. Open your website on the frontend.
  3. Check the affected pages.
  4. Test desktop, tablet, and mobile layouts.
  5. Clear the Joomla or template cache if changes are not immediately visible.

Make one group of changes at a time so it's easier to identify the setting responsible if something doesn't look right.

Before You Move On

Before continuing with your site configuration:

  • Set your preferred layout
  • Configure the header and footer
  • Set your colors and typography
  • Check responsive layouts
  • Configure any template-specific features
  • Add custom CSS only where necessary
  • Review your changes on the frontend
  • Create a backup before major changes

Your template is now configured to match your site's content and visual style.