Custom CSS & HTML

If you would like to customise your webstore but our default customisation options are not sufficient you can use Themes (Custom CSS) and Templates (Custom HTML) which give you complete control over how your webstore looks.

Themes

Creating A Theme

1. Go to Webstore > Appearance > Themes.

2. Click Change.

3. Click Create Custom Theme.

4. Enter your theme name and start adding custom CSS.

5. Click Create.

Once you have created your theme you'll need to activate it. You can do this by clicking Activate on the themes page.

Modifying A Theme

You can enter any CSS you like inside your custom theme. You are more than welcome to change colours, backgrounds, borders, etc so your webstore matches your own website style.

Templates

Creating A Template

1. Go To Webstore > Appearance > Templates.

2. Click Change.

3. Click Create Custom Template.

4. Enter the name of your new template and select the base template (We recommend using the Abstract template as the base as this is the latest version available on Tebex Store).

5. Click Create.

Modifying A Template

Once you have created your template you will be directed to the template editor. Here you will see all of your template files with the relevant HTML. The template editor allows you to:

1. Modify any page that you want along with the HTML.

2. Preview the changes before publishing them (Click the preview button).

The templating language used on Tebex Store is called Twig. You can learn more about the Twig language by viewing their documentation. It has everything you need just like any other programming language such as variables, if statements, and while/for each loops. You really can modify your store to however you like!

If you would like to view the available variables and functions inside of custom templates please read our help guide on this.​

My Changes Are Not Updating

Ensure that you have enabled your theme/template on your webstore. If you have already enabled them and your webstore is not updating this could be because you are seeing a cached version of your store. Try refreshing in a few minutes and you'll see your updated design.

At Tebex, providing support for this specific matter is beyond our scope. We understand that not everyone is familiar with programming, and in such cases, we suggest seeking assistance from a qualified contractor who has expertise in this area. You can share this article with them, as it contains sufficient information to help them develop a custom system tailored to your needs.