Appearance

The Appearance page is the place to manage exactly how your Tebex store looks, from your template (the building blocks of your store) to your theme (the colours and style) and other options, we'll guide you through the whole thing.

To get started, from the left-sidebar click 'Webstore' then 'Appearance'.

The Basics

What is a Template?

A Template is what we refer to the HTML of a store as - it's the building blocks. HTML gives a Tebex store its structure and layout. Here's what our free template, Exo, looks like:

What is a Theme?

A Theme is what we refer to the CSS of a store as - it's the style and colours. We provide multiple themes for our free template, Exo, for free also - here's one (Space):

Appearance Options

Visibility - Restricting Who Can View Your Store

Clicking 'Visibility' just below the name of your template will give you options to restrict who can view your store. You can toggle the option to 'prevent your store from being accessible by the public' and provide IP addresses to bypass this restriction; any IPs you provide will be allowed to access your store even if you toggle the option on. You can find your IP here - only IPv4 addresses are supported.

You can provide multiple IPv4 addresses if you like, just seperate each one with a comma - for example: 8.8.8.8,8.8.4.4

Branding (Logo & Favicon)

You can provide a Logo and Favicon for your store here - the logo will be displayed instead of the store's name as text and the Favicon sets the mini icon that appears on the browser tab.

For logos we support PNG and WEBP image formats - images must be no bigger than 5MB and must have a minimum width of 500px.

For favicons we support PNG and WEBP images - images must be a minimum of a 25px square (25px on all sides).

Experience

Here you can choose how your store behaves when customers add a package to their basket and how things should look when guests (customers who aren't logged in) browse your store.

When customers add a package to their basket you can either:

  • Redirect the customer to their basket (the default option)

  • Redirect the customer to the package's category page

  • Redirect the customer to the checkout.

For customers that haven't logged into your store yet, you can choose whether they should be able to see the packages you offer or not. By default, we let all customers (logged in or not) view all your packages, but you can change this so that customers have to login before being able to view any packages.

Template Options

At the bottom of the page, we show you any Template Options provided by the template creator. If you're using 'Exo' (our default template) you'll see options relating to:

  • The style of your overall store

  • The header (that's the part at the very top of your store)

  • The layout of your overall store

  • The Sale Banner (this is a banner of text you can display at the top of your store)

The Template Options you see will vary depending on the template you're using. If you'd like to customise something that doesn't have a template option, reach out to the person that created your template - Creator Support cannot help with template adjustments.

Template Management

Changing Your Template & Premium Templates

From the Appearance page, on the left-hand-side, click 'Change Template'.

From there, you can view & preview all the templates we offer, as well as create your own - the templates we offer are:

  • Exo - free, our default template

  • Night - premium template, £24.99

  • Dusk - premium template, £24.99

  • Noon - premium template, £24.99

  • Combat - premium template, £24.99

  • Flow - premium template, £24.99

If you'd like to purchase one of our Premium Templates, they come provided with the colour themes you can see in the circles below each template. Purchasing a template allows you to use that template for the store you've purchased it on, for the life of that store; you can't transfer them between stores.

If we decide to update a Premium Template in the future, as long as you've not edited the template's code, your template will update automatically.

Our free template, Exo, also comes with multiple free themes that you can choose between to change how your store looks. Find out how to change your theme here.

Once you've found a template you like, click 'Activate' on the template in question and you're done.

Creating A Custom Template

If you can't create a template yourself and don't like the template options we offer, third party sellers offer templates for Tebex stores too. You can copy/paste the code into our template editor - steps to access this are below.

  1. From the Appearance page, click 'Change Template'.

  2. Click 'Create Custom Template' in the top-right.

  3. Enter the name of your new template and select the base template (we recommend using the Exo template).

  4. Click 'Create'.

  5. You'll then see the code editor for the template you've just created - now you can get coding!

  6. When you're done, at the top, click 'Save as Draft' or use the dropdown menu to select 'Save and Publish' to make your changes and template live straight away.

The templating language used on Tebex Stores is Twig - you can learn more about the Twig language by viewing their documentation here.

Theme Management

Changing Your Theme

From the Appearance page, on the right-hand-side, click 'Change Theme'.

From there, you can view & preview all the themes we offer for your particular template, as well as create your own.

Once you've found a theme you like, click 'Activate' on the theme in question and you're done.

Creating A Custom Theme

If you can't create a theme yourself and don't like the theme options we offer, third party sellers offer themes for Tebex stores too. You can copy/paste the code into our theme editor - steps to access this are below.

  1. From the Appearance page, click 'Change Theme'.

  2. Click 'Create Your First Custom Theme' (if it's your first time) or 'Create Custom Theme' at the bottom of the page.

  3. Enter the name of your new theme and start coding your template's CSS.

  4. Click 'Create'.

  5. You'll then be taken back to the Theme Selection page, click 'Preview' next to your newly created theme at the bottom of the page to check it works correctly.

  6. When you're happy, click 'Activate' next to your newly created theme to make it live on your Tebex store.

Flat and Abstract Templates are still available on some older stores, but these are aren't supported anymore and won't receive updates.

FAQs

My changes aren't reflecting on my store, why?

Have you published the changes you've made; activated the template or theme you've created or edited? If so, try clearing your cache and cookies and refresh your store or try viewing your store in a private browser tab or window. If problems persist, try waiting a little time and viewing from a different device.

If things still aren't working after that, please contact Creator Support.

What templating language is used?

The templating language used on Tebex Stores is Twig - you can learn more about the Twig language by viewing their documentation here.

Can you create a custom template or theme for me?

Sadly not, but you can reach out to a web designer or developer and show them this page - this should give them enough information to give you a quote or more information.

Last updated

Was this helpful?