Your website, your code.

Overview

Every Hustl website is rendered from a theme template — an HTML file plus a CSS file with placeholders like {{business.name}} that get filled in with your real content. The basic editor changes that content behind the scenes; the advanced editor lets you edit the template itself.

This is Shopify-style theming: you get the raw HTML and CSS of your current theme and can change anything — layout, markup, styles, section order. As long as you keep the {{variables}} you care about, the site stays dynamic and keeps updating from the basic editor. The advanced editor is available on the Premium and Max plans.

Getting started

1. Open the editor. In the dashboard, go to the Website editor → Advanced. You'll see two tabs — template.html and styles.css — next to a live preview.
2. Save your site once first. The live preview renders through your own site host, so save your site in the basic editor at least once to unlock it.
3. Edit, and watch it save. Changes auto-save as you type (debounced) and the preview refreshes after each save. No publish button to remember.
4. Reference the variables. The Template variables panel in the editor lists them inline; this page is the full reference.

How templating works

At render time, Hustl builds a context object from your site config, products, and reviews, then renders your HTML against it. Placeholders are replaced with real values; blocks let you loop and branch. A few things worth knowing:

• Values are pre-computed for you. Prices come pre-formatted ({{priceLabel}}), ratings come as star strings ({{stars}}), and colors are already resolved with sensible fallbacks — so your template stays declarative.
• Missing values are safe. An empty field renders as an empty string rather than breaking the page. Pair optional content with a boolean guard (see {{#if}} below).
• Nested values use dots. {{business.name}}, {{hero.title}}, {{colors.primary}}.

Syntax: blocks & conditionals

Beyond simple {{value}} substitution, three block helpers are available:

Prefer the boolean guards Hustl provides ({{#if hasServices}}, {{#if hasImage}}, {{#if reviews.hasReviews}}) — they read cleanly and already account for the basic-editor toggles.

Variable reference

Everything you can use in a template, grouped by section. Booleans are meant for {{#if}} / {{#unless}}; the rest render as text you can place anywhere, including inside style attributes.

Example: hero

<section class="hero" style="background-image: url('{{hero.backgroundImage}}')">
  <h1>{{hero.title}}</h1>
  {{#if hero.subtitle}}
    <p>{{hero.subtitle}}</p>
  {{/if}}
  <a href="#services" class="btn">{{hero.ctaLabel}}</a>
</section>

Example: products loop

<section id="services">
  <p class="overline">{{servicesSection.overline}}</p>
  <h2>{{servicesSection.heading}}</h2>

  {{#if hasServices}}
    <div class="grid">
      {{#each services}}
        <article class="card">
          {{#if hasImage}}<img src="{{image}}" alt="{{name}}" />{{/if}}
          <h3>{{name}}</h3>
          {{#if hasDescription}}<p>{{description}}</p>{{/if}}
          {{#if hasPrice}}
            <span class="price">{{pricePrefix}} {{priceLabel}}</span>
          {{/if}}
          <!-- data-hustl-service opens checkout for THIS product -->
          <button data-hustl-service="{{id}}">{{ctaLabel}}</button>
        </article>
      {{/each}}
    </div>
  {{else}}
    <h3>{{servicesSection.emptyHeading}}</h3>
    <p>{{servicesSection.emptyDescription}}</p>
  {{/if}}
</section>

Example: reviews

{{#if reviews.hasReviews}}
  <section class="reviews">
    <h2>{{reviews.averageStars}} · {{reviews.average}} from {{reviews.count}} reviews</h2>
    {{#each reviews.items}}
      <blockquote>
        <span class="stars">{{stars}}</span>
        {{#if hasComment}}<p>"{{comment}}"</p>{{/if}}
        <cite>{{name}} — {{date}}</cite>
      </blockquote>
    {{/each}}
  </section>
{{/if}}

Wiring up checkout

The one attribute that connects your custom HTML to Hustl's payments is data-hustl-service. Put it on any clickable element and set it to a product's {{id}}:

<button data-hustl-service="{{id}}">{{ctaLabel}}</button>

When a visitor clicks it, Hustl opens the checkout / booking flow for that specific product — no wiring, forms, or API calls on your side. Because it's just an attribute, you can put it on a button, link, card, or image. Use it inside {{#each services}} so every product gets its own working buy button.

Preview & autosave

• Autosave. Edits save automatically a moment after you stop typing. The status in the header shows Saving… → Saved, and a Customized badge appears once your template differs from the theme default.
• Live preview. The right pane renders your saved template through your real site host, so it matches production exactly. It refreshes after each save — or hit the refresh button, or open it in a new tab.
• Two files. template.html holds structure and content; styles.css holds your CSS. Both are edited in the same panel via the tabs.

Plans, reset & fallback

• Availability. Editing custom HTML/CSS requires the Premium or Max plan. On lower plans the editor is read-only behind an upgrade prompt.
• Reset to theme default. The Reset to theme default button discards your customizations and restores the current theme's stock template. This can't be undone, so it asks first.
• Graceful fallback. If your plan is downgraded, your site quietly falls back to the stock theme template (your custom code is kept, not deleted) and renders your custom template again when you upgrade.

Limits & good practice

• Templates have generous size caps (roughly 300 KB of HTML and 150 KB of CSS) — plenty for a rich site, but keep assets like images and fonts hosted externally rather than inlined.
• Keep the variables you care about. Deleting {{#each services}} removes your products from the page; drop data-hustl-service and buttons stop opening checkout.
• Guard optional content with the has* booleans so empty sections don't leave stray headings or empty grids behind.
• Prefer the resolved {{colors.*}} and {{font}} values over hard-coded ones — then a brand change in the basic editor restyles the whole site for free.
• Preview on mobile widths too. The stock themes are responsive; if you restructure heavily, re-check your own breakpoints.