NEON CITY documentation

Install & configure

Everything you need to get NEON CITY live on a Tebex Plus store — the quick start, the 10 templates, the schema, the 132 panel settings, live FiveM & Discord counts, the hero spotlight, package tags, the gift flow and the Tebex Twig variables it's wired to. Setup takes under 15 minutes.

← Back to documentation hub · NEON CITY product page

Quick start

There is no "upload theme ZIP" button in Tebex Plus. The panel exposes a per-page template editor, a schema editor and an asset uploader — each file maps to one of those.

  1. Open the theme editor. Tebex panel → Appearance → Themes — create or open a custom theme.
  2. Paste the templates. For each page, open it in the template editor and paste the matching file (see the templates table).
  3. Paste the schema. Open Appearance → Change Schema and paste the whole of schema.json.
  4. Upload the CSS. Open Appearance → Assets and upload assets/theme.css. Icons are CDN-served — no font files to upload.
  5. Configure. Open Appearance → Customise and fill in the fields you care about. Every field has built-in help text.
Defaults are a complete store

The defaults render a polished storefront before you change a single field. Open your store URL in an incognito window to see the result.

Templates

Paste each file into its matching page slot. Panel labels vary slightly between Tebex versions — match by purpose if the label differs.

Tebex page slotFile
Layout / Master templatelayout.html
Home pageindex.html
Category pagecategory.html
Package / Product pagepackage.html
Checkout pagecheckout.html
Options pageoptions.html
Quote / Tier confirmationquote.html
Username / identify pageusername.html
CMS pagecms/page.html
Module — Featured packagemodule.featuredpackage.html
Missing a slot?

If your panel doesn't show a Module — Featured package slot, click New template and create one named exactly module.featuredpackage.html. The options.html and quote.html pages only render for packages with variables or a tier confirmation — if you have none, they can stay at defaults.

Schema & CSS

Open Appearance → Change Schema and paste the entire contents of schema.json. After saving, Appearance → Customise gains 14 sections of panel fields. Then upload only assets/theme.css under Appearance → Assets.

// Only Tebex's documented option types are used:
textarea  // any text (plain 'text' is NOT a supported Tebex type)
colour-picker
image-uploader
url
select
Keep author & support_email

The Tebex schema validator requires top-level author and support_email properties — they're already declared. If you edit the schema, keep them intact and avoid trailing commas, then refresh the panel after pasting (Tebex caches the schema).

Settings reference

132 fields across 14 sections. The headline groups:

#SectionFields
1Branding7
2SEO & social share3
3Announcement bar5
4Server4
5Links4
6Social icons (footer)5
7Hero section13
8Layout toggles9
9Category icons11
10Trust strip12
11Hero stats row13
12Package tags15
13Reviews section15
14FAQ section13

Several sections ship off by default — hero stats, reviews, FAQ, the announcement bar and the footer brand banner — so a fresh store never shows empty modules or fake content. Flip each section's Show toggle in Appearance → Customise when you're ready.

Live FiveM player count

The top bar can show a live X / Y players pill that refreshes every 30 seconds.

  1. In your server console, find the join line: ready for connections at https://cfx.re/join/abc1de.
  2. The trailing 6-character code is your CFX code.
  3. Paste it into Customise → Server → FiveM CFX code — do not include fivem://connect/.
https://servers-frontend.fivem.net/api/servers/single/{code}

Live Discord member count

A second top-bar pill shows N online from the Discord widget API, refreshed every 60 seconds.

  1. In Discord: Server Settings → Widget → Enable Server Widget — required, or the API returns 403.
  2. Copy the Server ID shown on the same page.
  3. Paste it into Customise → Server → Discord guild ID.
Widget must be enabled

If the count shows "— online" forever, the Server Widget isn't enabled, or you pasted a channel ID instead of the Server ID.

Hero spotlight card

Tebex does not pass package data to the home page (a platform limit), so the hero spotlight is configured by hand.

  1. Find your package ID in Webstore → Packages (the number in the URL).
  2. In Customise → Hero section, fill in name, description, price (no symbol), image and link.
/checkout/packages/add/PACKAGE_ID/single  # add straight to basket
/package/PACKAGE_ID                       # open the detail page

Leave the name or link empty and the hero shows a clean "Browse store" fallback card — it's never blank.

Package corner tags

Map a package name to a corner badge (NEW / SALE / HOT / LIMITED / STAFF PICK). 5 slots, each with 5 colour presets.

  1. Open Customise → Package tags.
  2. For each slot, paste the exact package name (case-sensitive, including punctuation and spaces).
  3. Pick a label and a colour preset — Cyan, Pink, Purple, Orange or Green.
Copy the name exactly

If a tag doesn't appear, the name didn't match. Copy it straight from your Tebex package list rather than retyping it.

Buy-as-gift flow

Turn on a "Send as a gift" checkbox on every package detail page. It submits to Tebex's native gift_username parameter — a documented uplift in average order value for game stores.

  1. Set Customise → Layout toggles → Buy as a gift to On and save.
  2. When ticked and submitted, the URL becomes …?gift_username=NAME.
ActionURL / form
Add (one-time)/checkout/packages/add/{id}/single
Add as gift/checkout/packages/add/{id}/single?gift_username={name}
Add (subscription)/checkout/packages/add/{id}/subscribe
Remove/checkout/packages/remove/{id}
Update quantitiesPOST /checkout/update
Redeem couponPOST /checkout/basketcoupon/add
Pay/checkout/pay

Twig variables & filters

40+ Tebex Twig variables are wired across 10 templated pages, using only Tebex's allowed filter set so the panel never rejects a render.

money   raw   escape   length   slice   date
replace   nl2br   upper   lower   split   number_format
"Filter X not found in template"

Anything outside the allowed set — |trim, |default, |striptags, |first, |merge … — will be rejected by Tebex. Stick to the list above when editing templates.

ScopeVariables in use
storename, currency, logo, categories, useCheckout
basketpackages, price, currency, coupons, links.checkout
categoryid, name, slug, description, packages, displayType
packageid, identifier, name, price, image, discount, type, basket
helpersasset(), config(), __(), path(), query()

Troubleshooting

SymptomFix
Featured package not on homeHome gets no package data — fill in the Hero card fields and configure the Featured Package module.
Categories show "0 packages"Same root cause; tiles still link into the category page correctly.
Basket icon does nothingThe cart always opens the on-page drawer. Check theme.css is uploaded and layout.html is active.
FiveM count stuck on "max N"Use the 6-character CFX code only (no fivem://connect/).
Discord count "— online"Enable the Server Widget; paste the Server ID, not a channel ID.
Gift checkbox missingSet Layout toggles → Buy as a gift = On and re-save.
Package tag missingThe name-to-match field is case-sensitive — copy it exactly.
Schema sections missingRefresh the panel (Tebex caches the schema); validate the JSON has no trailing commas.
Pair with

Same studio, same glass-panel art direction as Intel NPC, Account Levels and NPC Chat. Sell the FiveM resources in a storefront that matches them.