HostModules Docs

Customization Overview

HmSingleOrderAddon is designed to be flexible. You can adapt its appearance to match your brand without touching the core module files — ensuring your customizations survive updates.

What Can Be Customized

AreaMethod
Colors, fonts, spacingSCSS variables in _custom.scss
Layout, HTML structureSmarty template files (.tpl)
JavaScript behaviorOverride JS in _custom.scss or a separate JS file
Logo and brandingWHMCS General Settings + template variables
Custom CSS onlyEdit hm-main.css directly (not recommended — will be overwritten on update)

File Structure

Customizable files live in the order form template directory:

File Structure 
templates/orderforms/HmSingleOrderForm/
├── checkout.tpl          ← Main checkout wrapper template
├── products.tpl          ← Product selection + billing cycles
├── viewcart.tpl          ← Order summary / cart view
├── configureproduct.tpl  ← Config options step
├── configuredomains.tpl  ← Domain configuration step
├── complete.tpl          ← Order confirmation page
├── error.tpl             ← Error page
├── css/
│   └── hm-main.css       ← Compiled CSS (DO NOT edit directly)
├── scss/
│   ├── _variables.scss   ← Design tokens — override here
│   ├── _orderform.scss   ← Core styles
│   └── _custom.scss      ← Your custom overrides (safe to edit)
├── js/
│   └── hm-main.js        ← Compiled JS
└── package.json          ← Build tooling

Recommended Approach: Use _custom.scss

The safest and most update-friendly way to customize the order form is to add your styles to _custom.scss. This file is included last in the SCSS build, so your rules override the defaults.

// _custom.scss

// Example: change the primary button color
.hm-btn-primary {
  background-color: #FF6B35;
  border-color: #E55A24;
}

// Example: change the header background
.hm-checkout-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

After editing, rebuild the CSS:

cd templates/orderforms/HmSingleOrderForm
npm run build

Never edit _orderform.scss

_orderform.scss contains the core styles and will be overwritten on updates. Always use _variables.scss for token overrides and _custom.scss for additional rules.

Quick Customizations via Variables

For simple brand changes (colors, border radius, fonts), changing values in _variables.scss is the fastest approach. See SCSS Variables for the full reference.

Template Customization

For layout changes — moving sections, adding custom HTML, integrating third-party widgets — you’ll edit the Smarty .tpl files. See Template Files for a full breakdown of each template.

Back up template files before editing

When you update the addon, the template files in HmSingleOrderForm/ will be overwritten. Always keep a backup (or use Git) so you can re-apply your template changes after an update.

CSS Rebuild

Whenever you edit SCSS, you need to run the CSS build:

cd templates/orderforms/HmSingleOrderForm
npm install   # only needed first time or after an update
npm run build

The build compiles scss/ into css/hm-main.css. The template references this compiled file, so changes to SCSS files alone won’t appear until you rebuild.

Navigation