# Table of Contents

- [Overview | Developers](#overview-developers)
- [Assets | Developers](#assets-developers)
- [Getting Started | Developers](#getting-started-developers)
- [Footer | Developers](#footer-developers)
- [Developer Plan | Developers](#developer-plan-developers)
- [Schema | Developers](#schema-developers)
- [Overview | Developers](#overview-developers)
- [Guides | Developers](#guides-developers)
- [Twig | Developers](#twig-developers)
- [Global Variables | Developers](#global-variables-developers)
- [Pages | Developers](#pages-developers)
- [Sidebar Modules | Developers](#sidebar-modules-developers)
- [module.topdonator.html | Developers](#module-topdonator-html-developers)
- [checkout.html | Developers](#checkout-html-developers)
- [Package Slugs | Developers](#package-slugs-developers)
- [Tags | Developers](#tags-developers)
- [module.communitygoal.html | Developers](#module-communitygoal-html-developers)
- [Filters | Developers](#filters-developers)
- [store | Developers](#store-developers)
- [page | Developers](#page-developers)
- [basket | Developers](#basket-developers)
- [username.html | Developers](#username-html-developers)
- [module.featuredpackage.html | Developers](#module-featuredpackage-html-developers)
- [Supporting Package Media on Custom Store Templates | Developers](#supporting-package-media-on-custom-store-templates-developers)
- [options.html | Developers](#options-html-developers)
- [module.textbox.html | Developers](#module-textbox-html-developers)
- [module.giftcardbalance.html | Developers](#module-giftcardbalance-html-developers)
- [Functions | Developers](#functions-developers)
- [package.html | Developers](#package-html-developers)
- [Supporting Tiers on Custom Store Templates | Developers](#supporting-tiers-on-custom-store-templates-developers)
- [module.goal.html | Developers](#module-goal-html-developers)
- [layout.html | Developers](#layout-html-developers)
- [module.serverstatus.html | Developers](#module-serverstatus-html-developers)
- [cms/page.html | Developers](#cms-page-html-developers)
- [category.html | Developers](#category-html-developers)
- [module.payments.html | Developers](#module-payments-html-developers)

---

# Overview | Developers

The Webstore Builder enables you to fully customise the design of your store using templates & themes, providing your customers with a seamless transition from your existing website when they're making a purchase.

If you haven't already done so, we recommend having a read of our [quick start guide](https://docs.tebex.io/developers/getting-started)
 before continuing.

With the webstore builder, you can:

1.  Use templates to change the HTML structure of each page and implement conditional logic via the [TWIG templating engine](https://docs.tebex.io/developers/templates/twig)
    .
    
2.  Upload custom CSS, Javascript and images via [Assets](https://docs.tebex.io/developers/templates/assets)
    .
    
3.  If you're a template designer, you can offer your customers the ability to customise their templates via [Config Schema](https://docs.tebex.io/developers/templates/schema)
    , and you're also eligible for free Plus via our [Developer Plan](https://docs.tebex.io/developers/templates/developer-plan)
    .
    

[hashtag](https://docs.tebex.io/developers/templates/overview#examples)

Examples


-------------------------------------------------------------------------------------

Browse examples of other Tebex stores for some inspiration.

[](https://example.tebex.io/)

![Cover](https://docs.tebex.io/developers/~gitbook/image?url=https%3A%2F%2F924803319-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FaRz9HUAxrYuZsSDWhYnu%252Fuploads%252FTWjybl7uZyz5Ebnonrxv%252F1%25201.png%3Falt%3Dmedia%26token%3D93939ff5-b713-41a9-9979-73e8cd6ae5ac&width=752&dpr=3&quality=100&sign=b88dbc90&sv=2)

**Example Store**

[https://example.tebex.ioarrow-up-right](https://example.tebex.io/)

[](https://store.hypixel.net/)

![Cover](https://docs.tebex.io/developers/~gitbook/image?url=https%3A%2F%2F924803319-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FaRz9HUAxrYuZsSDWhYnu%252Fuploads%252F6CwcbP0UYmXowRWXkU3d%252Fimage%25202.png%3Falt%3Dmedia%26token%3De97e9a84-41c9-455e-8af2-b594ca71916c&width=752&dpr=3&quality=100&sign=3b9f6ba0&sv=2)

**Hypixel**

[https://store.hypixel.netarrow-up-right](https://store.hypixel.net/)

[hashtag](https://docs.tebex.io/developers/templates/overview#certified-tebex-designers)

Certified Tebex Designers


-----------------------------------------------------------------------------------------------------------------------

If you're a designer who creates templates for others, either for free or to sell, [let us knowarrow-up-right](https://forms.monday.com/forms/fce1c5555703d90861656cd5571d5543?r=use1)
! We'll add you to the certified Tebex designers club. You'll gain access to insider help guides, a private community of other designers, feedback sessions with the Tebex product team, and also BETA features that are not yet available to others.

[hashtag](https://docs.tebex.io/developers/templates/overview#feedback)

Feedback


-------------------------------------------------------------------------------------

If there are any functions, tags, filters or variables that you need to use in your template, but they're not available or documented, [please let us knowarrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)
.

[hashtag](https://docs.tebex.io/developers/templates/overview#getting-started)

Getting Started


---------------------------------------------------------------------------------------------------

To create your first template, head over to the Appearance section within your [creator panelarrow-up-right](https://creator.tebex.io/)
.

[PreviousTebex for Unity Enginechevron-left](https://docs.tebex.io/developers/tebex-for-unity-engine)
[NextGetting Startedchevron-right](https://docs.tebex.io/developers/templates/getting-started)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Assets | Developers

Assets allow you to upload your own CSS, Javascript, Images or Twig files to your template, which you can later reference in your files.

To create an asset, first upload it from within the template editor. Once you have uploaded the asset, you can retrieve the public URL of the asset by using the`asset()` function. This function will return the full URL of the asset hosted on our global CDN.

For example, you could upload `scripts.js` as an asset, and then include it in your template:

Copy

    <script defer src="{{ asset('scripts.js') }}"></script>

You're also able to create TWIG files that you can later reference in your template. For example, you could create an asset called `navigation.twig`, and then include it using the Twig include tag:

Copy

    {% include "navigation.twig" %}

This allows you to create code that is easily reusable across multiple locations in your template.

[Previousmodule.topdonator.htmlchevron-left](https://docs.tebex.io/developers/templates/sidebar-modules/module.topdonator.html)
[NextSchemachevron-right](https://docs.tebex.io/developers/templates/schema)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Getting Started | Developers

The best way to understand the functionality of the Tebex templating engine is to create a copy of our default template, named Exo.

You can do this by navigating to **Webstore** -> **Appearance** in your control panel and creating a custom template based on Exo.

For a live demonstration of Exo in action, visit [example.tebex.ioarrow-up-right](http://example.tebex.io/)
.

[PreviousOverviewchevron-left](https://docs.tebex.io/developers/templates/overview)
[NextTwigchevron-right](https://docs.tebex.io/developers/templates/twig)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Footer | Developers

Upon creating your store you may notice the footer at the bottom of your store stating that it is powered by Tebex and that we are the reseller & merchant of record.

Hiding the footer on your webstore will void our terms and conditions and will result in us having to disable your store from the public.

As a merchant of record platform we are under strict requirements by the card networks, such as Visa & Mastercard, to ensure customers understand which company they are purchasing from. You are authorising Tebex to operate a webstore on your behalf and sell content that we license from you, thus we need to let customers know about this as clearly as possible.

We don't place the footer for our own marketing/branding benefit - we simply have to do it to be able to provide you with all the benefits you receive as us being the Merchant Of Record, such as:

1.  100 payment method integrations
    
2.  Sales tax collection and remittance worldwide
    
3.  Fraud protection & our chargeback guarantee
    
4.  Easy to integrate product delivery for your game studio & server
    

[hashtag](https://docs.tebex.io/developers/templates/footer#styling-the-footer-to-match-your-own-brand)

Styling the footer to match your own brand


-------------------------------------------------------------------------------------------------------------------------------------------------------

The colour scheme of the footer by default matches your Tebex Checkout theme. You're able to select between Dark or Light mode by viewing your Checkout settings within the creator panel.

The footer also listens to the following CSS variables which you can define in your template/theme, providing you with further customisation ability:

Variable

\--tebex-legal-footer-background-color

\--tebex-legal-footer-text-color

\--tebex-legal-footer-border-color

\--tebex-legal-footer-max-width

\--tebex-legal-footer-logo-color

An example of setting the CSS variables can be seen below, which you could place in your templates CSS file:

Copy

    :root {
      --tebex-legal-footer-background-color: #fcba03;
      --tebex-legal-footer-text-color: #4c00ff;
    }

[PreviousDeveloper Planchevron-left](https://docs.tebex.io/developers/templates/developer-plan)
[NextGuideschevron-right](https://docs.tebex.io/developers/templates/guides)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Developer Plan | Developers

If you're a template developer, you're entitled to receive free Tebex Plus to enable you to freely develop templates for your clients. Stores that receive our developer plan won't be able to transact real payments on their store.

You're also eligible to gain access to the certified Tebex designers club. You'll get insider help guides, access to a private community of other elite designers, feedback sessions with the Tebex product team, and also BETA features that are not yet available to others.

If you'd like to apply to become a Tebex Certified Designer, [please apply herearrow-up-right](https://forms.monday.com/forms/fce1c5555703d90861656cd5571d5543?r=use1)
.

[PreviousSchemachevron-left](https://docs.tebex.io/developers/templates/schema)
[NextFooterchevron-right](https://docs.tebex.io/developers/templates/footer)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Schema | Developers

A template schema allows other team members or consumers of your template to change its appearance, for example providing colour pickers to change the colours of your template without the need to edit the CSS or HTML manually. This is especially useful if you are a template designer and you're selling access to your custom template for many different stores to use.

To edit the schema of a template, first open the template editor and select the **Change Schema** page from the navigation on the left. Any config options you add within the schema will appear within the Appearance section of the creator panel when you click edit on the template.

A great example of Schema in action would be to look at the configuration options available with our default template, Exo, which you can view in the [creator panelarrow-up-right](https://creator.tebex.io/templates/187300)
.

[hashtag](https://docs.tebex.io/developers/templates/schema#example-schema)

Example Schema


-----------------------------------------------------------------------------------------------

Copy

    {
      "author": "Tebex",
      "support_email": "support@tebex.io",
      "config": [\
        {\
          "header": "Customize Template",\
          "options": [\
            {\
              "id": "nav-style",\
              "name": "Navigation Style",\
              "description": "Set the location for your navigation.",\
              "type": "select",\
              "default": "Vertical Nav in Sidebar",\
              "values": [\
                "Horizontal Nav in Header",\
                "Vertical Nav in Sidebar"\
              ]\
            },\
            {\
              "id": "server-ip",\
              "name": "Server IP",\
              "default": "",\
              "description": "Enter your server IP - it will be used in the copy server IP section.",\
              "type": "textarea"\
            },\
            {\
              "id": "discord",\
              "name": "Discord",\
              "default": "",\
              "description": "Enter your Discord invite url - it will be used in the header Discord section.",\
              "type": "textarea"\
            }\
          ]\
        }\
      ]
    }

[hashtag](https://docs.tebex.io/developers/templates/schema#available-config-types)

Available Config Types


---------------------------------------------------------------------------------------------------------------

You're able to implement several different types of config options within your template schema, from colour pickers to text boxes.

chevron-rightColour Picker[hashtag](https://docs.tebex.io/developers/templates/schema#colour-picker)

Displays a colour picker for selecting a custom HEX code.

Copy

    {
       "id": "primary-colour",
       "name": "Primary Colour",
       "default": "#0000FF",
       "description": "Select your primary colour.",
       "type": "colour-picker"
    }

chevron-rightFile Uploader[hashtag](https://docs.tebex.io/developers/templates/schema#file-uploader)

Display a file upload option, useful for favicons, or other assets.

Copy

    {
       "id": "my-file",
       "name": "My File",
       "default": "",
       "description": "Upload a file.",
       "type": "file"
    }

chevron-rightImage Uploader[hashtag](https://docs.tebex.io/developers/templates/schema#image-uploader)

Display an image uploader config option.

Copy

    {
       "id": "custom-image",
       "name": "Custom Image",
       "default": "",
       "description": "Upload an image here.",
       "type": "image-uploader"
    }

chevron-rightSelect[hashtag](https://docs.tebex.io/developers/templates/schema#select)

Display a select dropdown to allow the store to select from multiple options.

Copy

    {
       "id": "nav-style",
       "name": "Navigation Style",
       "description": "Set the location for your navigation.",
       "type": "select",
       "default": "Vertical Nav in Sidebar",
       "values": [\
           "Horizontal Nav in Header",\
           "Vertical Nav in Sidebar"\
        ]
    }        chevron-rightSlider[hashtag](https://docs.tebex.io/developers/templates/schema#slider)

Display a slider to allow the store to select between a range of numbers - useful for customising.

Copy

    {
       "id": "width",
       "name": "Button Width",
       "default": "",
       "description": "Select the width of buttons.",
       "type": "slider",
       "min": 0,
       "max": 100
    }

chevron-rightTextarea[hashtag](https://docs.tebex.io/developers/templates/schema#textarea)

Copy

    {
       "id": "header-box",
       "name": "Header Content",
       "default": "",
       "description": "Enter the text you'd like to appear in the header.",
       "type": "textarea"
    }

chevron-rightUrl[hashtag](https://docs.tebex.io/developers/templates/schema#url)

Copy

    {
       "id": "discord-link",
       "name": "Discord Invite Link",
       "default": "",
       "description": "Enter the URL of your discord invite link.",
       "type": "url"
    }

[hashtag](https://docs.tebex.io/developers/templates/schema#accessing-config-options)

Accessing Config Options


-------------------------------------------------------------------------------------------------------------------

To dynamically access the config option from within your template you can use the [`config()`](https://docs.tebex.io/developers/templates/twig/functions#config)
 Twig function. This will output the entered option value, allowing you to use it however you wish within your template, such as outputting a text area into a specific location or altering CSS via a colour picker.

[PreviousAssetschevron-left](https://docs.tebex.io/developers/templates/assets)
[NextDeveloper Planchevron-right](https://docs.tebex.io/developers/templates/developer-plan)

Last updated 1 year ago

---

# Overview | Developers

The Webstore Builder enables you to fully customise the design of your store using templates & themes, providing your customers with a seamless transition from your existing website when they're making a purchase.

If you haven't already done so, we recommend having a read of our [quick start guide](https://docs.tebex.io/developers/getting-started)
 before continuing.

With the webstore builder, you can:

1.  Use templates to change the HTML structure of each page and implement conditional logic via the [TWIG templating engine](https://docs.tebex.io/developers/templates/twig)
    .
    
2.  Upload custom CSS, Javascript and images via [Assets](https://docs.tebex.io/developers/templates/assets)
    .
    
3.  If you're a template designer, you can offer your customers the ability to customise their templates via [Config Schema](https://docs.tebex.io/developers/templates/schema)
    , and you're also eligible for free Plus via our [Developer Plan](https://docs.tebex.io/developers/templates/developer-plan)
    .
    

[hashtag](https://docs.tebex.io/developers/templates#examples)

Examples


----------------------------------------------------------------------------

Browse examples of other Tebex stores for some inspiration.

[](https://example.tebex.io/)

![Cover](https://docs.tebex.io/developers/~gitbook/image?url=https%3A%2F%2F924803319-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FaRz9HUAxrYuZsSDWhYnu%252Fuploads%252FTWjybl7uZyz5Ebnonrxv%252F1%25201.png%3Falt%3Dmedia%26token%3D93939ff5-b713-41a9-9979-73e8cd6ae5ac&width=752&dpr=3&quality=100&sign=b88dbc90&sv=2)

**Example Store**

[https://example.tebex.ioarrow-up-right](https://example.tebex.io/)

[](https://store.hypixel.net/)

![Cover](https://docs.tebex.io/developers/~gitbook/image?url=https%3A%2F%2F924803319-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FaRz9HUAxrYuZsSDWhYnu%252Fuploads%252F6CwcbP0UYmXowRWXkU3d%252Fimage%25202.png%3Falt%3Dmedia%26token%3De97e9a84-41c9-455e-8af2-b594ca71916c&width=752&dpr=3&quality=100&sign=3b9f6ba0&sv=2)

**Hypixel**

[https://store.hypixel.netarrow-up-right](https://store.hypixel.net/)

[hashtag](https://docs.tebex.io/developers/templates#certified-tebex-designers)

Certified Tebex Designers


--------------------------------------------------------------------------------------------------------------

If you're a designer who creates templates for others, either for free or to sell, [let us knowarrow-up-right](https://forms.monday.com/forms/fce1c5555703d90861656cd5571d5543?r=use1)
! We'll add you to the certified Tebex designers club. You'll gain access to insider help guides, a private community of other designers, feedback sessions with the Tebex product team, and also BETA features that are not yet available to others.

[hashtag](https://docs.tebex.io/developers/templates#feedback)

Feedback


----------------------------------------------------------------------------

If there are any functions, tags, filters or variables that you need to use in your template, but they're not available or documented, [please let us knowarrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)
.

[hashtag](https://docs.tebex.io/developers/templates#getting-started)

Getting Started


------------------------------------------------------------------------------------------

To create your first template, head over to the Appearance section within your [creator panelarrow-up-right](https://creator.tebex.io/)
.

[PreviousTebex for Unity Enginechevron-left](https://docs.tebex.io/developers/tebex-for-unity-engine)
[NextGetting Startedchevron-right](https://docs.tebex.io/developers/templates/getting-started)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Guides | Developers

In order to support certain features of Tebex, your custom template must be kept up-to-date. Please see the following guides:

[Package Slugschevron-right](https://docs.tebex.io/developers/templates/guides/package-slugs)

[PreviousFooterchevron-left](https://docs.tebex.io/developers/templates/footer)
[NextPackage Slugschevron-right](https://docs.tebex.io/developers/templates/guides/package-slugs)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Twig | Developers

Templates on the Tebex platform are written in the [Twig Templating Enginearrow-up-right](https://twig.symfony.com/)
. Twig allows you to customise your store with control structures, similar to any other language, while maintaining a sandboxed and safe environment for the Tebex infrastructure.

You're able to learn more information about the syntax of Twig by viewing the [official documentationarrow-up-right](https://twig.symfony.com/doc/2.x/templates.html)
.

A common Twig file may look like the following:

Copy

    <!DOCTYPE html>
    <html>
        <head>
            <title>My Webpage</title>
        </head>
        <body>
            <ul id="navigation">
            {% for item in navigation %}
                <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
            {% endfor %}
            </ul>
    
            <h1>My Webpage</h1>
            {{ a_variable }}
        </body>
    </html>

circle-info

If you're interested in becoming a pro at the Twig syntax, you can complete the official [Twig certification programmearrow-up-right](https://certification.symfony.com/exams/twig.html)
.

[PreviousGetting Startedchevron-left](https://docs.tebex.io/developers/templates/getting-started)
[NextTagschevron-right](https://docs.tebex.io/developers/templates/twig/tags)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Global Variables | Developers

Global variables are variables which are available across all pages of your store.

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[PreviousFunctionschevron-left](https://docs.tebex.io/developers/templates/twig/functions)
[Nextbasketchevron-right](https://docs.tebex.io/developers/templates/global-variables/basket)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Pages | Developers

Pages represent different landing points of your customers on your Tebex store. For example, when customers visit a category on your store, the category.html page will be rendered. For this reason, pages must be implemented in your templates and cannot be deleted (unlike [Assets](https://docs.tebex.io/developers/templates/assets)
).

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

The only pages that are not accessible to the public are the following:

Page

layout.html

This is the global layout of your store that all pages extend from. You are able to create multiple layouts if you wish via creating an [Asset](https://docs.tebex.io/developers/templates/assets)
.

module.\*

These pages are used to build the Sidebar modules of your store, and you can view more information within the [Sidebar Modules](https://docs.tebex.io/developers/templates/sidebar-modules)
 section.

[Previouspagechevron-left](https://docs.tebex.io/developers/templates/global-variables/page)
[Nextindex.htmlchevron-right](https://docs.tebex.io/developers/templates/pages/index.html)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# Sidebar Modules | Developers

Modules allow you to add dynamic modules on your store, which you can configure from within your creator panel on the [sidebararrow-up-right](https://creator.tebex.io/sidebar)
 section.

Each modules HTML is configurable in their associated `module.*.html` page (documented onwards).

You can display the modules on your store by printing the modules variable, as seen below:

Copy

    {{ modules|raw }}

circle-info

Please ensure to use the `raw` [filter](https://docs.tebex.io/developers/templates/twig/filters)
, as the `modules` variable contains HTML that will be escaped automatically by TWIG if this filter is not used.

[Previouslayout.htmlchevron-left](https://docs.tebex.io/developers/templates/pages/layout.html)
[Nextmodule.communitygoal.htmlchevron-right](https://docs.tebex.io/developers/templates/sidebar-modules/module.communitygoal.html)

Last updated 1 year ago

This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies)
.

close

AcceptReject

---

# module.topdonator.html | Developers

The top donator module allows you to display the highest spending customer on your store.

Variables

Type

Description

`module.header`

string

The header of the module.

`module.donor`

boolean

If there is actually a top customer to show yet.

`module.skin`

string

The URL of the customers profile image to display.

`module.ign`

string

The username of the customer.

`module.displayAmount`

boolean

If to display the amount the customer has spent on your store.

`module.total`

string

The total amount the customer has spent on your store.

`module.period`

string

The period which calculates the above total. Can be either hourly, daily, weekly, monthly or yearly.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.topdonator.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousmodule.textbox.htmlchevron-left](https://docs.tebex.io/developers/templates/sidebar-modules/module.textbox.html)
[NextAssetschevron-right](https://docs.tebex.io/developers/templates/assets)

Last updated 1 year ago

---

# checkout.html | Developers

There is no specific variables for checkout.html. All checkout functionality is handled via opening a new [Tebex.js](https://docs.tebex.io/developers/tebex.js/overview)
 session. To start a new Checkout session, you should do the following:

1.  [Add Tebex.js to your store](https://docs.tebex.io/developers/tebex.js/overview)
    
2.  [Receive the current baskets ident](https://docs.tebex.io/developers/templates/pages/checkout.html#receive-an-ident-for-tebex.js)
    
3.  [Launch the Tebex.js modal](https://docs.tebex.io/developers/templates/pages/checkout.html#using-tebex.js)
    

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/checkout.html#receive-an-ident-for-tebex.js)

Receive an ident for Tebex.js

`GET` `/checkout/ident`

This endpoint will return an ident for the current basket, which is required by [Tebex.js](https://docs.tebex.io/developers/tebex.js/overview)
 when launching a checkout modal.

**Response**

200

Copy

    {
        "ident":"null if customer is not logged in"
    }

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/checkout.html#using-tebex.js)

Using Tebex.js

To learn how to add Tebex.js to your store, please view the [associated documentation](https://docs.tebex.io/developers/tebex.js/overview)
 or view the demo over at [https://js.tebex.ioarrow-up-right](https://js.tebex.io/)
.

[Previousindex.htmlchevron-left](https://docs.tebex.io/developers/templates/pages/index.html)
[Nextusername.htmlchevron-right](https://docs.tebex.io/developers/templates/pages/username.html)

Last updated 1 year ago

*   [Receive an ident for Tebex.js](https://docs.tebex.io/developers/templates/pages/checkout.html#receive-an-ident-for-tebex.js)
    
*   [Using Tebex.js](https://docs.tebex.io/developers/templates/pages/checkout.html#using-tebex.js)

---

# Package Slugs | Developers

Package slugs allow you to customize your package's URL slug for better readability.

If you are using a custom template, you may need to update it to ensure the package slugs feature functions correctly on your webstore.

### 

[hashtag](https://docs.tebex.io/developers/templates/guides/package-slugs#template-changes)

Template Changes

In your Twig templates, any instance of `package.id` should be updated to `package.identifier`. This property will use the package’s slug if available and default to the numeric ID if not.

[PreviousGuideschevron-left](https://docs.tebex.io/developers/templates/guides)
[NextSupporting Tiers on Custom Store Templateschevron-right](https://docs.tebex.io/developers/templates/guides/supporting-tiers-on-custom-store-templates)

Last updated 11 months ago

---

# Tags | Developers

Tags are control structures within Twig. They allow you to change the flow of code within your template.

If you'd like access to a TWIG tag that is not available below, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/tags#available-tags)

Available Tags

Tag

Documentation

`if`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/tags/if.html)

`for`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/tags/for.html)

`block`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/tags/block.html)

`extends`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/tags/extends.html)

`include`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/tags/include.html)

`set`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/tags/set.html)

[PreviousTwigchevron-left](https://docs.tebex.io/developers/templates/twig)
[NextFilterschevron-right](https://docs.tebex.io/developers/templates/twig/filters)

Last updated 1 year ago

---

# module.communitygoal.html | Developers

The community goal module displays the current progress of a community goal which you have configured within your creator panel on the [community goalsarrow-up-right](https://creator.tebex.io/community-goals)
 section.

Variables

Type

Description

`module.header`

string

The header of the module.

`module.communitygoal.image`

string

The URL of the image of the community goal hosted on our public CDN.

`module.communitygoal.repeatable`

boolean

If the community goal is repeatable.

`module.communitygoal.times_achieved`

string

The number of times the community goal has been reached.

`module.communitygoal.description`

string

The description of the community goal.

`module.bar.style`

string

The style of the goal, either striped or animated.

`module.displayAmount`

boolean

If the amount of the community goal should be displayed on your store.

`module.total`

string

The total the community goal has currently earned.

`module.target`

string

The target amount of the community goal.

`module.percentage`

string

The percentage equivalent of the current total against the target.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.communitygoal.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[PreviousSidebar Moduleschevron-left](https://docs.tebex.io/developers/templates/sidebar-modules)
[Nextmodule.featuredpackage.htmlchevron-right](https://docs.tebex.io/developers/templates/sidebar-modules/module.featuredpackage.html)

Last updated 1 year ago

---

# Filters | Developers

Filters enable you to modify the content of variables within your template.

If you'd like access to a TWIG filter that is not available below, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/filters#available-filters)

Available Filters

Filter

Documentation

`escape`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/escape.html)

`length`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/length.html)

`raw`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/raw.html)

`money`

[View](https://docs.tebex.io/developers/templates/twig/filters#money)

`slice`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/slice.html)

`number_format`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/number_format.html)

`date`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/date.html)

`nl2br`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/nl2br.html)

`replace`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/replace.html)

`split`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/split.html)

`upper`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/upper.html)

`lower`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/filters/lower.html)

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/filters#filter-documentation)

Filter Documentation

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/filters#money)

`money`

The money filter transforms a variable into a monetary format.

[PreviousTagschevron-left](https://docs.tebex.io/developers/templates/twig/tags)
[NextFunctionschevron-right](https://docs.tebex.io/developers/templates/twig/functions)

Last updated 1 year ago

*   [Available Filters](https://docs.tebex.io/developers/templates/twig/filters#available-filters)
    
*   [Filter Documentation](https://docs.tebex.io/developers/templates/twig/filters#filter-documentation)
    
*   [money](https://docs.tebex.io/developers/templates/twig/filters#money)
    

Copy

    {% set value = 1 %}
    
    {{ value|money }} // returns 1.00

---

# store | Developers

The global store object contains all information associated with the project itself, such as store name.

Variables

Type

Description

`name`

string

The name of the project.

`currency`

string

The base currency of the project.

`css`

string

The custom theme currently active on the project.

`logo`

string

The full url of the custom logo of the project.

`favicon`

string

The full url of the custom favicon of the project.

`noLogin`

Boolean

If the project requires no login (e.g. if no username system is being used).

`categories`

array\[category\]

An array of package categories of the project.

### 

[hashtag](https://docs.tebex.io/developers/templates/global-variables/store#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousbasketchevron-left](https://docs.tebex.io/developers/templates/global-variables/basket)
[Nextpagechevron-right](https://docs.tebex.io/developers/templates/global-variables/page)

Last updated 1 year ago

---

# page | Developers

The global page object contains variables associated with the current http request.

Variables

Type

Description

`title`

string

The title of the current page.

`message.type`

string

The type of toast notification to display to the customer.

`message.text`

string

The contents of a toast notificaton to display to the customer

`message.display`

boolean

If a toast notification needs to be shown to the customer (eg. a validation error has occured).

### 

[hashtag](https://docs.tebex.io/developers/templates/global-variables/page#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousstorechevron-left](https://docs.tebex.io/developers/templates/global-variables/store)
[NextPageschevron-right](https://docs.tebex.io/developers/templates/pages)

Last updated 1 year ago

---

# basket | Developers

The global basket object contains all information relevant to the customers basket, such as price & packages.

Variables

Type

Description

`id`

string

Internal ID of the basket.

`ident`

string

The identifier that can be passed to [Tebex.js](https://docs.tebex.io/developers/tebex.js/overview)

`ign`

string

The username of the customer.

`uuid`

string

The UUID of the customer.

`currency`

string

The 3 digit currency code of the basket.

`price`

string

The current price of the basket.

`packages`

array\[package\]

An array of packages in the customers basket.

`coupons`

array\[coupon\]

An array of coupons in the customers basket.

### 

[hashtag](https://docs.tebex.io/developers/templates/global-variables/basket#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[PreviousGlobal Variableschevron-left](https://docs.tebex.io/developers/templates/global-variables)
[Nextstorechevron-right](https://docs.tebex.io/developers/templates/global-variables/store)

Last updated 1 year ago

---

# username.html | Developers

The username.html page is responsible for allowing your customers login to your store.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/username.html#root-object)

Root Object

Variables

Type

Description

external

Boolean

If the login provider of the store requires the user to be sent to an external url which is available in the `url` variable. See [Non-External Login](https://docs.tebex.io/developers/templates/pages/username.html#non-external-login)
 for what to do in the event external is `false`.

provider

String

The name of the login provider, such as FiveM, Discord or Steam.

url

String

The URL that the customer should be directed to so they can perform their login with the external provider.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/username.html#external-login)

External Login

If the external variable is `true`, let the user click a link to proceed to login via the external login provider:

Copy

    <p>Please login with your {{ provider }} account to continue.</p>
    <a href="{{ url }}">Login</a>

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/username.html#non-external-login)

Non-External Login

If the external variable is `false`, provide a form submitting to the current url, including an `ign` form parameter. The `ign` parameter should be a text field allowing the customer to enter their username freehand.

An example can be seen below:

Copy

    <form method="post">
        <input type="text" name="ign" placeholder="Enter your in-game username" />
        <button type="submit">Login</button>
    </form>

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/username.html#full-working-example)

Full Working Example

An example of a flow supporting both external and non-external login providers is shown below:

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/username.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previouscheckout.htmlchevron-left](https://docs.tebex.io/developers/templates/pages/checkout.html)
[Nextoptions.htmlchevron-right](https://docs.tebex.io/developers/templates/pages/options.html)

Last updated 1 year ago

*   [Root Object](https://docs.tebex.io/developers/templates/pages/username.html#root-object)
    
*   [External Login](https://docs.tebex.io/developers/templates/pages/username.html#external-login)
    
*   [Non-External Login](https://docs.tebex.io/developers/templates/pages/username.html#non-external-login)
    
*   [Full Working Example](https://docs.tebex.io/developers/templates/pages/username.html#full-working-example)
    
*   [Request Variable](https://docs.tebex.io/developers/templates/pages/username.html#request-variable)
    

Copy

    {% if external %}
        <a href="{{ url }}">Login via {{ provider }}</a>
    {% else %}
        <form method="post">
            <input
                type="text"
                name="ign"
                placeholder="Enter your in-game username"
            />
            <button type="submit">Login</button>
        </form>
    {% endif %}

---

# module.featuredpackage.html | Developers

The featured package module allows you to feature a package, bringing more attention to it on your store.

Variables

Type

Description

`module.header`

string

The header of the module.

`module.package`

[Package Object](https://docs.tebex.io/developers/templates/pages/package.html)

The package to feature.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.featuredpackage.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousmodule.communitygoal.htmlchevron-left](https://docs.tebex.io/developers/templates/sidebar-modules/module.communitygoal.html)
[Nextmodule.giftcardbalance.htmlchevron-right](https://docs.tebex.io/developers/templates/sidebar-modules/module.giftcardbalance.html)

Last updated 1 year ago

---

# Supporting Package Media on Custom Store Templates | Developers

If you’re using a custom or legacy store template, you may not see all package images (when multiple images are uploaded) or the package video.

If you are using the Exo template, this guide does not apply.

Older templates relied on the `package.image` property to display a package’s image URL. To support package media properly, you now need to use the new `package.media` array instead. See the example code snippet below demonstrating how to use the new media array.

Copy

    {% for media in package.media %}
      <div class="slide">
        {% if media.type == 'image' %}
          <img
            class="slide-image"
            src="{{ media.url }}"
            alt="{{ package.name }}"
          />
        {% elseif media.type == 'video' %}
          <iframe
            class="slide-frame"
            src="https://www.youtube.com/embed/{{ media.url }}?color=white&amp;rel=0"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin"
            allowfullscreen
          ></iframe>
        {% endif %}
      </div>
    {% endfor %}

[PreviousSupporting Tiers on Custom Store Templateschevron-left](https://docs.tebex.io/developers/templates/guides/supporting-tiers-on-custom-store-templates)
[NextOverviewchevron-right](https://docs.tebex.io/developers/headless-api/overview)

Last updated 5 months ago

---

# options.html | Developers

The options.html page is shown to the customer when adding a package that requires customisation, such as when you are using [variablesarrow-up-right](https://creator.tebex.io/variables)
.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/options.html#root-object)

Root Object

Variables

Type

Description

`options.package`

[Package Object](https://docs.tebex.io/developers/templates/pages/options.html#package-object)

An object containing information about the current package.

`options.variables`

array\[[Variable](https://docs.tebex.io/developers/templates/pages/options.html#variable-object)\
\]

An array containing the [variablesarrow-up-right](https://creator.tebex.io/variables)
 the customer needs to select.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/options.html#package-object)

Package Object

Variable

Type

Description

`name`

string

The name of the package.

`chooseServer`

boolean

If the package requires the customer to select a [game serverarrow-up-right](https://creator.tebex.io/game-servers)
.

`customPrice`

boolean

If the package requires the customer to enter how much they want to pay for the package.

`category`

string

The category ID of the package.

`price`

string

The price of the package.

[hashtag](https://docs.tebex.io/developers/templates/pages/options.html#variable-object)

Variable Object


-------------------------------------------------------------------------------------------------------------

Variable

Type

Description

`description`

string

A summary of the description of the variable.

`type`

string

Either `dropdown`, `discord_id`, or show an input field for freehand input by the customer.

`id`

string

The ID of the variable.

`options`

array\[[Variable Option](https://docs.tebex.io/developers/templates/pages/options.html#variable-option-object)\
\]

If the type is `dropdown`, we include an array of options the customer should select from.

`value`

string

The current value of the variable.

`discord_tag`

string

If the variable is type is `discord_id` and the `value` is not empty, this will include their discord tag once they have logged in.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/options.html#variable-option-object)

Variable Option Object

Variable

Type

Description

`default`

boolean

If this variable option should be selected by default.

`name`

string

The name of the dropdown option.

`price`

string

The additional price the customer would pay by selecting this variable option.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/options.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previoususername.htmlchevron-left](https://docs.tebex.io/developers/templates/pages/username.html)
[Nextpackage.htmlchevron-right](https://docs.tebex.io/developers/templates/pages/package.html)

Last updated 1 year ago

*   [Root Object](https://docs.tebex.io/developers/templates/pages/options.html#root-object)
    
*   [Package Object](https://docs.tebex.io/developers/templates/pages/options.html#package-object)
    
*   [Variable Object](https://docs.tebex.io/developers/templates/pages/options.html#variable-object)
    
*   [Variable Option Object](https://docs.tebex.io/developers/templates/pages/options.html#variable-option-object)
    
*   [Request Variable](https://docs.tebex.io/developers/templates/pages/options.html#request-variable)

---

# module.textbox.html | Developers

The textbox module allows a store owner to define a module with arbitrary text.

Variables

Type

Description

`module.header`

string

The header of the module.

`module.text`

string

The content of the textbox module.

circle-info

Please ensure to use the `raw` [filter](https://docs.tebex.io/developers/templates/twig/filters)
 on the `module.text` variable as it contains HTML and will be automatically escaped by TWIG if not used.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.textbox.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousmodule.serverstatus.htmlchevron-left](https://docs.tebex.io/developers/templates/sidebar-modules/module.serverstatus.html)
[Nextmodule.topdonator.htmlchevron-right](https://docs.tebex.io/developers/templates/sidebar-modules/module.topdonator.html)

Last updated 1 year ago

---

# module.giftcardbalance.html | Developers

The gift card balance module lets your customers enter a gift card and determine the amount of value that remains on the specified gift card.

Variables

Type

Description

`module.header`

string

The header of the module.

`search`

boolean

If the customer has attempted to search for a giftcard.

`giftcard`

object

If a giftcard was found from their search, it will be populated in this object.

`giftcard.card_number`

string

The gift card number the customer has searched for.

`giftcard.void`

boolean

If the giftcard that has been searched for has been voided by the store owner.

`giftcard.remaining_balance`

string

The remaining balance of the giftcard which has been searched for.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.giftcardbalance.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousmodule.featuredpackage.htmlchevron-left](https://docs.tebex.io/developers/templates/sidebar-modules/module.featuredpackage.html)
[Nextmodule.goal.htmlchevron-right](https://docs.tebex.io/developers/templates/sidebar-modules/module.goal.html)

Last updated 1 year ago

---

# Functions | Developers

Functions generate content for you to use within your templates.

If you'd like access to a TWIG function that is not available below, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/functions#available-functions)

Available Functions

Function

Documentation

`__`

[View](https://docs.tebex.io/developers/templates/twig/functions#__)

`_p`

[View](https://docs.tebex.io/developers/templates/twig/functions#_p)

`config`

[View](https://docs.tebex.io/developers/templates/twig/functions#config)

`asset`

[View](https://docs.tebex.io/developers/templates/twig/functions#asset)

`path`

[View](https://docs.tebex.io/developers/templates/twig/functions#path)

`query`

[View](https://docs.tebex.io/developers/templates/twig/functions#query)

`range`

[Viewarrow-up-right](https://twig.symfony.com/doc/1.x/functions/range.html)

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/functions#function-documentation)

Function Documentation

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/functions#id)

`__`

Returns the equivalent translation from within your translations settings.

Copy

    {{ __('Redeem coupons / gift cards') }}
    
    // prints "Redeems coupons / gift cards" (Or the equivalent translation if another language is selected)

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/functions#p)

`_p`

Returns the plural translation from within your translation settings.

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/functions#config)

`config`

Returns a config value from your [template config schema](https://docs.tebex.io/developers/templates/schema)
.

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/functions#asset)

`asset`

Returns the full url path of an asset from within your template.

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/functions#path)

`path`

Returns the full url path of the current page.

### 

[hashtag](https://docs.tebex.io/developers/templates/twig/functions#query)

`query`

Returns a GET parameter from the current url.

[PreviousFilterschevron-left](https://docs.tebex.io/developers/templates/twig/filters)
[NextGlobal Variableschevron-right](https://docs.tebex.io/developers/templates/global-variables)

Last updated 1 year ago

*   [Available Functions](https://docs.tebex.io/developers/templates/twig/functions#available-functions)
    
*   [Function Documentation](https://docs.tebex.io/developers/templates/twig/functions#function-documentation)
    
*   [\_\_](https://docs.tebex.io/developers/templates/twig/functions#id)
    
*   [\_p](https://docs.tebex.io/developers/templates/twig/functions#p)
    
*   [config](https://docs.tebex.io/developers/templates/twig/functions#config)
    
*   [asset](https://docs.tebex.io/developers/templates/twig/functions#asset)
    
*   [path](https://docs.tebex.io/developers/templates/twig/functions#path)
    
*   [query](https://docs.tebex.io/developers/templates/twig/functions#query)
    

Copy

    {{ _p(":count items for :amount :currency", basket.packages|length, {'count' : basket.packages|length, 'amount' : basket.price|money, 'currency' : basket.currency}) }}
    
    // prints "5 items for $5.00 USD"

Copy

    {{ config("header-colour") }}
    
    // prints the associated config value with the key header-colour

Copy

    {{ asset("style.css") }}
    
    // Prints the URL of style.css, such as https://your-store.tebex.io/template-assets/style.css"

Copy

    {{ path() }}
    
    // Prints the full URL of the current page the customer is browsing on your store

Copy

    {{ query("test" }}
    
    // Returns the GET param of "test" if it is provided in the URL.

---

# package.html | Developers

The package.html page displays details about a specific [packagearrow-up-right](https://creator.tebex.io/packages)
 on your store.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/package.html#root-object)

Root Object

Variables

Type

Description

`id`

string

The ID of the package.

`identifier`

string

The slug of the package. Defaults to the numeric ID if no slug is defined.

`name`

string

The name of the package.

`description`

string

The description of the package.

`customPrice`

boolean

If the package can have a custom price.

`price`

string

The price of the package.

`purchasable`

boolean

If the currently logged in customer is allowed to purchase this package on your store.

`quantity`

integer

The quantity of this package in the customers basket.

`image.url`

string

The public url of the packages image hosted on the Tebex CDN.

`image.uploaded`

boolean

If this package has an image uploaded.

`category`

string

The ID of the category which this package belongs to.

`has_options`

boolean

If this package requires options to be entered/selected before adding to the basket.

`discount.applied`

boolean

If the package has a discount applied.

`discount.original`

string

The original price of the package before the discount was applied.

`discount.percentage`

string

The percentage equivalent of the discount applied to the package.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/package.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousoptions.htmlchevron-left](https://docs.tebex.io/developers/templates/pages/options.html)
[Nextcms/page.htmlchevron-right](https://docs.tebex.io/developers/templates/pages/cms-page.html)

Last updated 11 months ago

*   [Root Object](https://docs.tebex.io/developers/templates/pages/package.html#root-object)
    
*   [Request Variable](https://docs.tebex.io/developers/templates/pages/package.html#request-variable)

---

# Supporting Tiers on Custom Store Templates | Developers

If you are using a custom or legacy store template, **Tiered** packages may not display properly once enabled on your store.

If you are using Exo or a Premium template, this guide does not apply.

For tiers to display on your store, create the following **Assets**:

1.  `category/tiered.html` - HTML structure for a tiered category
    
2.  `quote.html` - HTML confirmation page when updating a tier
    

Use the following examples to add **Tiers** support to your store:

[hashtag](https://docs.tebex.io/developers/templates/guides/supporting-tiers-on-custom-store-templates#category-tiered.html)

category/tiered.html


------------------------------------------------------------------------------------------------------------------------------------------------------

Copy

    {% extends "layout.html" %}
    
    {% block content %}
    <div class="site-content site-content-widgets" style="max-width: 1140px; margin: 0 auto; padding: 1rem;">
      <main class="store-category-tiered">
        <header class="store-category-tiered-header text-content">
          <h2>{{ category.name }}</h2>
    
          {% if category.description != "" %}
            <p>{{ category.description|raw }}</p>
          {% endif %}
        </header>
    
        {% if category.packages|length > 0 %}
          <div class="store-products-tiered" style="display: flex; flex-wrap: wrap;">
            {% for package in category.packages %}
              <article
                class="store-product store-product-tiered {{ (tier and tier.package_id == package.id) ? 'subscribed' : '' }}" style="display: flex; flex-direction: column; padding: 1rem;"
              >
                <img
                  class="image"
                  src="{{ package.image.url }}"
                  alt="{{ package.name }}"
                />
    
                <h3 class="product-title">
                  {{ package.name }}
                  {% if package.countdownEnds %}
                    <span
                      class="countdown"
                      data-countdown="{{ package.countdownEnds }}"
                    >
                      {{__("Ending Soon!") }}
                    </span>
                  {% endif %}
                </h3>
    
                <div class="descr">
                  {{ package.description|raw }}
                </div>            
                
                {% set packageIdentifier = package.identifier ? package.identifier : package.id %}
    
                <div
                  class="actions product-actions"
                  style="margin-top: auto;"
                  data-package="{{ package.id }}"
                  data-package-type="{{ package.type }}"
                  {% if package.purchasable == false %}
                    title="{{ package.reason }}"
                  {% endif %}
                >
                  <p class="price">
                    {% if package.customPrice %}
                      {{ __("You decide how much to pay.") }}
                    {% elseif package.price == 0.00 %}
                      <strong>{{ __("This item is free.") }}</strong>
                    {% else %}
                      {% if package.discount.applied %}
                        <del class="text-danger small font-weight-bold">{{ package.discount.original|money }}</del>
                      {% endif %}
    
                      <strong>{{ package.price|money }}</strong> {{ basket.currency }}
                    {% endif %}
                  </p>
    
                  {% if tier and tier.package_id == package.id %}
                    <button class="btn btn-tertiary wide" disabled>
                      {{ __("Subscribed") }}
                    </button>
                  {% elseif tier and tier.downgrade_package_id == package.id %}
                    <button class="btn btn-tertiary wide" disabled>
                      {{ __("Pending Downgrade") }}
                    </button>
                  {% elseif tier %}
                    <a
                      href="/tier/quote?category={{ category.id }}&amp;package={{ package.id }}"
                      class="btn btn-primary wide"
                      {% if package.purchasable == false %}disabled{% endif %}
                      {% if package.basket %}hidden style="display: none;"{% endif %}
                    >
                      {{ __("Subscribe") }}
                    </a>
                  {% else %}
                    <a
                      href="/checkout/packages/add/{{ packageIdentifier }}/subscribe"
                      class="btn btn-primary subscribe wide"
                      {% if package.purchasable == false %}disabled{% endif %}
                      {% if package.basket %}hidden style="display: none;"{% endif %}
                    >
                      {{ __("Subscribe") }}
                    </a>
                  {% endif %}
    
                  <button
                    class="btn btn-secondary wide open-basket open-basket-cta"
                    {% if package.basket == false %}hidden style="display: none;"{% endif %}
                  >
                    {{ __("Added to Basket") }}
                  </button>
                </div>
                
              </article>
            {% endfor %}
          </div>
        {% else %}
          <p>{{ __("No packages to display in this category.") }}</p>
        {% endif %}
      </main>
    </div>
    {% endblock %}

[hashtag](https://docs.tebex.io/developers/templates/guides/supporting-tiers-on-custom-store-templates#quote.html)

quote.html


----------------------------------------------------------------------------------------------------------------------------------

[PreviousPackage Slugschevron-left](https://docs.tebex.io/developers/templates/guides/package-slugs)
[NextSupporting Package Media on Custom Store Templateschevron-right](https://docs.tebex.io/developers/templates/guides/supporting-package-media-on-custom-store-templates)

Last updated 8 months ago

*   [category/tiered.html](https://docs.tebex.io/developers/templates/guides/supporting-tiers-on-custom-store-templates#category-tiered.html)
    
*   [quote.html](https://docs.tebex.io/developers/templates/guides/supporting-tiers-on-custom-store-templates#quote.html)
    

Copy

    {% extends "layout.html" %}
    
    {% block content %}
    
    <main class="store-quote store-form" data-popup style="max-width: 1140px; margin: 0 auto; padding: 1rem; text-align: center;">
      <div class="text-content">
        <h2>Update Tier</h2>
        {{ description|raw }}
      </div>
    
      <form method="post" action="/tier/update">
        <input type="hidden" name="category_id" value="{{ category }}">
        <input type="hidden" name="package_id" value="{{ package }}">
    
        {% for k, v in options %}
          <input type="hidden" name="options[{{ k }}]" value="{{ v }}">
        {% endfor %}
    
        <div class="actions quote-actions">
          <a href="/category/{{category}}" class="btn btn-tertiary wide">
            {{ __("Back") }}
          </a>
          <button type="submit" class="btn btn-primary wide confirm">
            {{ __("Confirm") }}
          </button>
        </div>
      </form>
    </main>
    
    {% endblock %}

---

# module.goal.html | Developers

The goal module allows you to show a goal of how much money you'd like to earn over a specific period.

Variables

Type

Description

`module.header`

string

The header of the module.

`module.bar.style`

string

The style of the module.

`module.bar.animated`

string

If the goal bar should be animated.

`module.displayAmount`

boolean

If to display the amount instead of just a percentage.

`module.total`

string

The total amount earned so far towards the goal.

`module.target`

string

The target of the goal.

`module.percentage`

string

The percentage towards completion of the goal.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.goal.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousmodule.giftcardbalance.htmlchevron-left](https://docs.tebex.io/developers/templates/sidebar-modules/module.giftcardbalance.html)
[Nextmodule.payments.htmlchevron-right](https://docs.tebex.io/developers/templates/sidebar-modules/module.payments.html)

Last updated 1 year ago

---

# layout.html | Developers

There isn't any specific variables for layout.html. This page is usually extended by all other pages, providing your stores base layout structure.

An example of using layout.html can be seen below:

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/layout.html#layout.html)

layout.html

Copy

    <!DOCTYPE html>
    <html>
        <body>
            {% block content %}{% endblock %} {# The content of checkout.html will be shown #}
        </body>
    </html>

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/layout.html#checkout.html)

checkout.html

Copy

    {% extends "layout.html" %}
    
    {% block content %}
        Hello, world!
    {% endblock %}

[Previouscategory.htmlchevron-left](https://docs.tebex.io/developers/templates/pages/category.html)
[NextSidebar Moduleschevron-right](https://docs.tebex.io/developers/templates/sidebar-modules)

Last updated 1 year ago

*   [layout.html](https://docs.tebex.io/developers/templates/pages/layout.html#layout.html)
    
*   [checkout.html](https://docs.tebex.io/developers/templates/pages/layout.html#checkout.html)

---

# module.serverstatus.html | Developers

The server status module allows creators who operate Game Servers to display the status of their game server (e.g. player count or online status) on their store.

Variables

Type

Description

`module.header`

string

The header of the module.

`module.online`

boolean

If the game server is online.

`module.ip`

string

The IP address of the game server.

`module.port`

string

The port of the game server.

`module.players.online`

string

The total players on the game server.

`module.players.max`

string

The maximum players that can be online at one point on the game server.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.serverstatus.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousmodule.payments.htmlchevron-left](https://docs.tebex.io/developers/templates/sidebar-modules/module.payments.html)
[Nextmodule.textbox.htmlchevron-right](https://docs.tebex.io/developers/templates/sidebar-modules/module.textbox.html)

Last updated 1 year ago

---

# cms/page.html | Developers

The cms/page.html page displays any [custom pagesarrow-up-right](https://creator.tebex.io/pages)
 that you have created on your store.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/cms-page.html#root-object)

Root Object

Variables

Type

Description

`id`

string

The ID of the page.

`category`

string

The category of the page.

`title`

string

The title of the page.

`metaData.content`

string

The actual content of the page.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/cms-page.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previouspackage.htmlchevron-left](https://docs.tebex.io/developers/templates/pages/package.html)
[Nextcategory.htmlchevron-right](https://docs.tebex.io/developers/templates/pages/category.html)

Last updated 1 year ago

*   [Root Object](https://docs.tebex.io/developers/templates/pages/cms-page.html#root-object)
    
*   [Request Variable](https://docs.tebex.io/developers/templates/pages/cms-page.html#request-variable)

---

# category.html | Developers

The category.html page lists the [packagesarrow-up-right](https://creator.tebex.io/packages)
 that are available to purchase in the current category being viewed on your store.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/category.html#root-object)

Root Object

Variable

Type

Description

`id`

string

The ID of the category.

`name`

string

The name of the category.

`displayType`

string

The display type (either grid or list)

`description`

string

The description of the category.

`packages`

array

An array of [Package Objects](https://docs.tebex.io/developers/templates/pages/package.html)
.

`slug`

string

The url slug of the category.

### 

[hashtag](https://docs.tebex.io/developers/templates/pages/category.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previouscms/page.htmlchevron-left](https://docs.tebex.io/developers/templates/pages/cms-page.html)
[Nextlayout.htmlchevron-right](https://docs.tebex.io/developers/templates/pages/layout.html)

Last updated 1 year ago

*   [Root Object](https://docs.tebex.io/developers/templates/pages/category.html#root-object)
    
*   [Request Variable](https://docs.tebex.io/developers/templates/pages/category.html#request-variable)

---

# module.payments.html | Developers

The payments module allows you to display a selection of recent payments received from customers on your store.

Variables

Type

Description

`module.header`

string

The header of the module.

`module.payments`

array\[[Payment](https://docs.tebex.io/developers/templates/sidebar-modules/module.payments.html#payment-object)\
\]

An array of payments.

`module.displayPackage`

boolean

If to display the package names against each payment.

`module.displayPrice`

boolean

If to display the price of each payment.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.payments.html#payment-object)

Payment Object

Variable

Type

Description

`ign`

string

The username of the customer.

`name`

string

The name of the package the customer has purchased.

`time`

string

The time the purchase was received on the store.

`price`

string

The amount of the purchase.

`currency`

string

The currency of the purchase.

### 

[hashtag](https://docs.tebex.io/developers/templates/sidebar-modules/module.payments.html#request-variable)

Request Variable

If you'd like access to a variable that is not currently available, [please let us know.arrow-up-right](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)

[Previousmodule.goal.htmlchevron-left](https://docs.tebex.io/developers/templates/sidebar-modules/module.goal.html)
[Nextmodule.serverstatus.htmlchevron-right](https://docs.tebex.io/developers/templates/sidebar-modules/module.serverstatus.html)

Last updated 1 year ago

*   [Payment Object](https://docs.tebex.io/developers/templates/sidebar-modules/module.payments.html#payment-object)
    
*   [Request Variable](https://docs.tebex.io/developers/templates/sidebar-modules/module.payments.html#request-variable)

---