Installation guide
This page will walk us trough the process of installing any Tebex theme in our catalog.
Getting started with creating your first Tebex store can be challenging, but we’ll guide you through the entire process step by step to ensure everything goes smoothly. Nothing will be skipped, so you can follow along with confidence.
Prefer a visual approach? You can also explore our video documentation → here for help with installing and setting up theme settings and add-ons.
Creating your Tebex project
Before we can start we need to create your first Tebex project, ensure you select the right store variant for your network.
Creating a Tebex template
To upload a new template you need to navigate to the appearance template creation page, which can be found here.
For support reasons we request your template name to follow a naming structure.
Template name [v1.0.0]Press the create button on the bottom left.
Opening the template editor
If you have following along you should already inside of the template editor.
If you see the following, you are on the editor and you can move to next step.
Getting to the editor is quite easy follow these steps carefully.
Navigate to the projects appearance page.
Press the "launch Editor" button, which is located in the center of your screen.
Uploading the Webstore files
Let’s replace the default HTML files with our custom versions. The file names in the editor match those in the downloaded template, making it easy to identify which files to update.
How to upload webstore files
Use keyboard shortcuts to copy our files and minimize the risk of errors:
Copy the new file content: Ctrl + A, then Ctrl + C
Paste and overwrite the existing code: Ctrl + A, then Ctrl + V
Save your changes: Ctrl + S
Make sure to save each file before moving on to the next. If you don’t, the default code will remain, which may cause the theme to not function correctly after publishing.
Make sure you’re using a code editor to open the template files, such as Visual Studio Code
Uploading Assets
We have a few assets to upload, follow this process precisely or else the styling, function, header and footer won't function. Making the entire process fail.
Press the "Add" button below the Assets section of the template editor. The assets section is located below the webstore section.
Select the CSS variable and locate the Store.css from the download /0. Theme/assets-files/store.css
Press the "Add" button below the Assets section of the template editor. The assets section is located below the webstore section.
Select the JAVASCRIPT variable and locate the Store.css from the download /0. Theme/assets-files/function.js
The footer is copy and pasted over the existing Footer.twig, essentially the same process as uploading the webstore files.
Directory of the Footer.twig /0. Theme/assets-files/other/footer.twig
Use keyboard shortcuts to copy our files and minimize the risk of errors:
Copy the new file content: Ctrl + A, then Ctrl + C
Paste and overwrite the existing code: Ctrl + A, then Ctrl + V
Save your changes: Ctrl + S
Make sure to save each file before moving on to the next. If you don’t, the default code will remain, which may cause the theme to not function correctly after publishing.
The header is copy and pasted over the existing Header.twig, essentially the same process as uploading the webstore files.
Directory of the Header.twig /0. Theme/assets-files/other/header.twig
Use keyboard shortcuts to copy our files and minimize the risk of errors:
Copy the new file content: Ctrl + A, then Ctrl + C
Paste and overwrite the existing code: Ctrl + A, then Ctrl + V
Save your changes: Ctrl + S
Make sure to save each file before moving on to the next. If you don’t, the default code will remain, which may cause the theme to not function correctly after publishing.
Uploading the Schema
The schema controls the theme settings, therefor being one of the most essential files to upload and its often overlooked.
Navigate the to the top of the template editor, and press "</> Change schema".
Directory of the Schema /0. Theme/Schema-files/dark-schema.twig
How to upload the schema file
Use keyboard shortcuts to copy our files and minimize the risk of errors:
Copy the new file content: Ctrl + A, then Ctrl + C
Paste and overwrite the existing code: Ctrl + A, then Ctrl + V
Save your changes: Ctrl + S
Make sure to save each file before moving on to the next. If you don’t, the default code will remain, which may cause the theme to not function correctly after publishing.
Last updated