> For the complete documentation index, see [llms.txt](https://eyestore.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eyestore.gitbook.io/documentation/general-information/vision-tebex-theme.md).

# 🌐 VISION Tebex Theme

{% hint style="success" %}
If the files you downloaded are in Twig format, update the Twig code; if they’re in HTML format, update the HTML code instead. Then, finish the setup by editing the `style.css` file. Depending on your speed, the whole process should take between 30 seconds and 1 minute.\
<https://creator.tebex.io/templates>
{% endhint %}

{% hint style="success" %}
Things to Activate Before You Start Using It

* Enable **Top Customer**
* List your products under the **Featured Package** – no limits (used for the slider)
* It's recommended to enable **Recent Payments** as well
  {% endhint %}

<figure><img src="/files/WYv4glP7MiEPhmXXhVGJ" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Add to bottom for buttons, top for pictures.

* [x] **To get your ID, copy the part after `/package/` in the link. For example:**\
  `https://eyestore.tebex.io/package/6712853` → **Your ID is:** `6712853`
* [x] For buttons, add the ID to the `if` at the bottom. You can duplicate the lines if needed.
* [x] Add images at the top using slide1, slide2, slide3, etc. Check your file for examples.
  {% endhint %}

<figure><img src="/files/QQexUK7ug6uAaT7jPjc8" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/qG8f6E13awSbwwHloQM3" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}

#### 🎨 `cathead.twig` – Dynamic Category Header

Customize each category page based on its slug.

**🔧 How It Works**

Slug is auto-detected:

Tabs are shown depending on the slug (`all-in-one`, `monthly`, etc).

**📁 Example**

URL: `https://eyestore.tebex.io/category/1961166`\
If slug = `all-in-one`, tabs will be:\
`ARCADE | ARGUS | RISING | LUXURY`

**✅ Customization**

Add or change slug checks in the Twig file to control tabs per category.
{% endhint %}

<figure><img src="/files/10DAPirBD1aPaJ8sUReT" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Purpose: To filter and display package-specific tags in `tag.twig` based on the package ID.

Tags like ESX, QBCore, and others are used to categorize packages.

```html
The package ID can be retrieved from the Tebex store URL.
For example:
https://eyestore.tebex.io/package/6712853
=> package.id = "6712853"
{% if package.id == "6712853" %}
<div class="tags">
    <li>ES_EXTENDED</li>
    <li>QBCore</li>
</div>

{% elseif package.id == "PUT_ID_HERE" %}
<div class="tags">
    <li>ESX</li>
    <li>QBCore</li>
    <li>Escrow</li>
</div>

{% else %}
<div class="tags">
    <li>ES_EXTENDED</li>
    <li>QBCore</li>
</div>
{% endif %}
```

{% endhint %}

<figure><img src="/files/RMoFo02Hx2iLzwebx30M" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Purpose: To filter and display package-specific tags in `features.twig` based on the package ID.**

```html
{% if package.id == "6712853" %}
<div class="tags">
    <li>ES_EXTENDED</li>
    <li>QBCore</li>
</div>

{% elseif package.id == "" %}
<div class="tags">
    <li>ESX</li>
    <li>QBCore</li>
    <li>Escrow</li>
</div>

{% else %}
<div class="tags">
    <li>ES_EXTENDED</li>
    <li>QBCore</li>
</div>
{% endif %}
```

{% endhint %}

<figure><img src="/files/Nz6M6aWuS5VulWb0MQUQ" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Purpose: To filter and display tags associated with a specific package in youtube.twig,
\
based on the package ID. If no preview is added, prompt the user to send their YouTube channel or video link.{% if package.id == "" %}

<pre class="language-html"><code class="lang-html"><strong>&#x3C;a href="https://youtu.be/url" class="youtube">&#x3C;i class="fa-brands fa-youtube">&#x3C;/i> &#x3C;span>Youtube Preview&#x3C;/span>&#x3C;/a>
</strong>{% else %}
    &#x3C;a href="https://www.youtube.com/@storeyes" class="youtube">&#x3C;i class="fa-brands fa-youtube">&#x3C;/i> &#x3C;span>Youtube Preview&#x3C;/span>&#x3C;/a>
{% endif %}
</code></pre>

{% endhint %}

{% hint style="success" %}
To show an active discount on your site, just head over to [Sales](https://creator.tebex.io/sales) and set a percentage discount.
{% endhint %}

<figure><img src="/files/A1NIIuPFrmdd3YpZgp3Y" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
To set a visible active discount on your site, you need to apply an active percentage discount via the Sales section.\
Simply replace the number after `api/guilds/` with your server ID.\
To do this, get your Discord server’s ID!
{% endhint %}

<figure><img src="/files/KnSEhsIDxrvwkCzyREOH" alt=""><figcaption></figcaption></figure>