> For the complete documentation index, see [llms.txt](https://lixeldesign.gitbook.io/tebex/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lixeldesign.gitbook.io/tebex/rock-template/getting-started/setup.md).

# Setup

The following steps are also explained by the Setup Wizard. You can either continue with Setup Wizard or read the detailed description below. If this is your first Tebex store, it is recommended to read the full documentation.

{% hint style="warning" %}
You will have to finish the **Font Awesome** setup to make your store work. Scroll down for more details.
{% endhint %}

{% stepper %}
{% step %}

### Uploading the Schema

The Schema is very important to let you change colors and all template settings. Now, we only have to upload it. 

Inside your downloaded folder there is a `schema` folder. You have to **select one** file. We can change colors later, but you can also choose a pre-made color configuration.

Open the file and **copy the whole** content.

Back in the HTML editor, open the Schema and **replace the whole content**. As you see, this step is similar to the previous step. This time you have to click on "**Publish**" after having saved the new Schema.

{% hint style="info" %}
Changes to the Schema will only be applied when **publishing** the template.
{% endhint %}

<figure><img src="/files/9tZv17YhEEZ71fqElIbs" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Uploading the code

Open your store URL and check if the Setup Wizard shows the next step. You have successfully uploaded the Schema!

Inside your downloaded folder there is a folder calles `files`. Open it and just take a look at the left sidebar of the HTML editor. As you see, most of the files are the same.

Now you have to **replace every single** file, just like did with the main.js and the schema.

{% hint style="info" %}
Some files have NOT to be replaced. It is recommended to go by order from your files folder, not by the order inside the HTML editor. This way you know which files have to be replaced.
{% endhint %}

{% hint style="warning" %}
Sometimes, users report installation errors. Most of them are **caused by mistakes** when replacing the files. So just check twice that you have **REPLACED** and **NOT** added **EVERYTHING**.
{% endhint %}

{% hint style="info" %}
The Setup Wizard **only shows the most important files**. Please consider that you have to replace ALL files you can find inside your folder. You should also check the `modules` folder.
{% endhint %}

{% hint style="success" %}
DONE! Just take a look at your new store! If everything looks correct but only some icons are missing, everything is correct. We will continue with that now.
{% endhint %}
{% endstep %}

{% step %}

### Font Awesome

{% hint style="info" %}
**Font Awesome** provides free icons for you, for example the Discord icon or store icon.
{% endhint %}

To install Font Awesome, you have to create an account on [https://fontawesome.com](https://fontawesome.com/).

Go to [your kits](https://fontawesome.com/kits) and create a free kit. You will have to enter the URL of your webstore, `yourserver.tebex.io` for example.

You will receive a code line.

{% code title="It should look like this one:" %}

```html
<script src="https://kit.fontawesome.com/7****396e1.js" crossorigin="anonymous"></script>
```

{% endcode %}

Copy the code line of **your** kit and open the HTML editor.

Open the `head.twig` file, search for the following section and just paste the code line there.

{% code title="Before:" lineNumbers="true" %}

```html
<!-- PASTE FONTAWESOME CODE HERE -->

<!-- PASTE FONTAWESOME CODE HERE -->
```

{% endcode %}

<pre class="language-html" data-title="After:" data-line-numbers><code class="lang-html"><strong>&#x3C;!-- PASTE FONTAWESOME CODE HERE -->
</strong>&#x3C;script src="https://kit.fontawesome.com/7****396e1.js" crossorigin="anonymous">&#x3C;/script>
&#x3C;!-- PASTE FONTAWESOME CODE HERE -->RE -->
</code></pre>

{% endstep %}

{% step %}

### Done!

{% endstep %}
{% endstepper %}

{% hint style="success" %}
**Congratulations!** You have just finished the **full** setup by your own!
{% endhint %}

The following pages will explain how to edit the template settings.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://lixeldesign.gitbook.io/tebex/rock-template/getting-started/setup.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.