Custom Templates

Custom templates give you full HTML, CSS, and Liquid control over your storefront. They replace the built-in template entirely.

You do not need a custom template to make a beautiful, unique storefront. Between the built-in templates, Theme Editor, and Layout Editor, you can customize colors, fonts, layouts, hero sections, navigation styles, and much more without writing any code. Custom templates are for developers who want complete control over the HTML and CSS.

Getting started

Open the custom template editor at Dashboard > Customization > Custom Template. Write your template in the code editor on the left and use the preview panel on the right to see it rendered with your actual store data. Click Save to publish.

A syntax error in your Liquid code can result in a blank storefront. Always preview thoroughly before saving.

Available Liquid Variables

FluxStore injects several objects into your template at render time.

Store

Variable	Type	Description
`store.name`	`string`	Your store’s display name
`store.description`	`string`	Your store’s description text
`store.logo`	`string`	URL to your store’s logo image
`store.domain`	`string`	Your store’s domain (e.g. `cosmic.fluxstore.net`)

Products

Variable	Type	Description
`categories`	`array`	All product categories
`categories[].name`	`string`	Category display name
`categories[].slug`	`string`	Category URL slug
`categories[].packages`	`array`	Packages within the category
`categories[].packages[].name`	`string`	Package display name
`categories[].packages[].price`	`number`	Package price
`categories[].packages[].description`	`string`	Package description (HTML)
`categories[].packages[].image`	`string`	URL to the package image

Cart

Variable	Type	Description
`cart.items`	`array`	Items currently in the cart
`cart.items[].name`	`string`	Item name
`cart.items[].quantity`	`number`	Item quantity
`cart.items[].price`	`number`	Item unit price
`cart.total`	`number`	Cart total amount
`cart.count`	`number`	Total number of items in the cart

Theme Tokens

All tokens from the Themes reference are available under the theme object. For example: theme.primary, theme.background, theme.fontFamily, and theme.borderRadius.

Liquid Syntax

Templates use LiquidJS syntax. Here is a quick overview of the basics.

Output variables with double curly braces:


<h1>{{ store.name }}</h1>
<p>{{ store.description }}</p>

Loop over arrays with {% for %}:


{% for category in categories %}
  <h2>{{ category.name }}</h2>
  {% for package in category.packages %}
    <div class="package-card">
      <h3>{{ package.name }}</h3>
      <p>{{ package.price | money }}</p>
    </div>
  {% endfor %}
{% endfor %}

Conditionals with {% if %}:


{% if cart.count > 0 %}
  <div class="cart-badge">{{ cart.count }}</div>
{% endif %}

Filters transform values inline. Some useful ones:

Filter	Description	Example
`money`	Formats a number as currency	`{{ package.price \| money }}`
`upcase`	Converts text to uppercase	`{{ store.name \| upcase }}`
`truncate`	Truncates text to a given length	`{{ package.description \| truncate: 100 }}`

For the full list of tags and filters, see the LiquidJS documentation . FluxStore supports all standard LiquidJS tags and filters.

Example: Product Listing


<style>
  body {
    font-family: {{ theme.fontFamily }};
    background: {{ theme.background }};
    color: {{ theme.text }};
    margin: 0;
    padding: 0;
  }
  .package-card {
    background: {{ theme.card }};
    border: 1px solid {{ theme.border }};
    border-radius: {{ theme.borderRadius }};
    padding: {{ theme.cardPadding }};
  }
</style>
 
<section style="padding: {{ theme.sectionPadding }};">
  <h1>{{ store.name }}</h1>
 
  {% for category in categories %}
    <h2 style="color: {{ theme.primary }};">{{ category.name }}</h2>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
      {% for package in category.packages %}
        <div class="package-card">
          {% if package.image %}
            <img src="{{ package.image }}" alt="{{ package.name }}" />
          {% endif %}
          <h3>{{ package.name }}</h3>
          <p style="color: {{ theme.textMuted }};">{{ package.description }}</p>
          <span style="color: {{ theme.primary }}; font-weight: bold;">
            {{ package.price | money }}
          </span>
        </div>
      {% endfor %}
    </div>
  {% endfor %}
</section>

CSS

Include your styles directly in the template with a <style> tag. You can reference theme tokens inside CSS values, as shown in the example above. This keeps everything in one file and lets your styles respond to theme changes automatically.