Your own theme
Build a theme of your own in Twig, the template language Tebex uses too. What you can change, what stays the same and how it works.
The built-in themes cover most stores. When you want your store to look exactly like your server, you can write a theme of your own: HTML templates in Twig, with your own CSS and JavaScript. Twig is the template language Tebex uses as well, so if you or your developer built a Tebex template before, it will feel familiar.
Your own theme is free on every store: building, previewing and putting it live.
How a theme is put together
A theme is a set of files. Every new theme starts as a copy, so you never begin with an empty page. Pick where to start:
- One of our six themes, like Realm or Daylight. Your theme looks exactly like it does now, and you change what you want. These use our ready-made classes for spacing and colours, plus the look of that theme. Inventory, Glass, Tiers and Daylight are Pro themes: you can start from them with Pro, and a theme based on one shows while your store has Pro.
- The plain starter theme, with all its styling in one
theme.css. Handy when you write your own CSS from scratch.
| File | What it is |
|---|---|
layout.twig |
The frame of every page: your header, menu and categories. The other templates extend it. |
home.twig |
The home of your website, with the blocks you picked under Website. |
shop.twig |
The start of your shop. Without it, the shop uses category.twig. |
category.twig |
A category with its products. |
product.twig |
One product. |
news.twig, news_post.twig |
Your news, and one post. |
staff.twig, vote.twig |
The staff page and the vote page. |
page.twig |
One of your pages, like the rules. |
_name.twig |
A part you include in other templates, like _product-card.twig. A name that starts with _ is never a page. |
theme.css, theme.js |
Your CSS and JavaScript. We add them to every page for you. |
File names use lowercase letters, numbers, - and _. A theme has at most 30 files, each up to 100 kB.
What each template gets to work with is in Templates and variables. The functions and the limits are in Functions, filters and limits.
What stays the same
Some parts of every page stay ours, so your store keeps working whatever the template does:
- The checkout, the order page and My purchases keep your built-in theme. Players fill in their name and email there, and nothing may get between them and paying.
- The cart opens from the right, like in our themes. Your theme adds products with
cart_button()and opens it withopen_cart(). - The footer with My purchases and your contact address. Mojang asks every server that takes money to have both.
- The page head: the title, the description for search engines and the image for link previews.
You style the cart and the footer through the colour tokens in your theme.css, like --color-surface and --color-ink.
When a template has an error
A template with an error never reaches a player. That page shows in your built-in theme instead, and the dashboard shows which file and which line to fix. A page your theme has no template for also shows in the built-in theme.
Safe by design
Templates run in Twig's sandbox. A template sees only the data on Templates and variables: your store, your products and the rest of what players can already see. It never sees email addresses, orders or anything of another store, and it cannot run code on our servers.
Every page of a custom theme also gets a strict Content-Security-Policy:
- Scripts run from your own
theme.jsonly. A<script>written in a template, or anonclick, does not run. - Nothing loads from other sites. Images and fonts come from your store, so a script of someone else never follows your players around.
- Nothing is sent to other sites. A form or a script can only talk to your own store, so nobody can turn a page into a fake login.
- Videos from YouTube (youtube-nocookie.com) and the Discord widget may be embedded.
Want analytics or another service on your pages? Tell us which one. We add services to the list when owners ask for them.
Still stuck? Ask in our Discord or mail us at hello@minecraftstore.io, and a person answers.