# 🌐 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="https://3675563864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHYPEuf5iNSxLbr9k1kWd%2Fuploads%2FUWAkTZN0xlbRD42n2qtP%2Fimage.png?alt=media&#x26;token=e971aca2-83af-4874-acc2-0e904335e411" 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="https://3675563864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHYPEuf5iNSxLbr9k1kWd%2Fuploads%2F7uxnfO3afaO57cjoiCu4%2Fimage.png?alt=media&#x26;token=ffc0ef72-2ce7-45c4-90d9-bbd69434e708" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3675563864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHYPEuf5iNSxLbr9k1kWd%2Fuploads%2FHBtyKHG1OG7eCOfCsaHX%2Fcathead.png?alt=media&#x26;token=5e129bb2-fa60-4ed9-ba9f-b6221fb32953" 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="https://3675563864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHYPEuf5iNSxLbr9k1kWd%2Fuploads%2FAmH4mn86qdlnmIIKhkVd%2FFrame%20177.png?alt=media&#x26;token=dfaa7e28-2a61-439c-b149-977d80625c3d" 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="https://3675563864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHYPEuf5iNSxLbr9k1kWd%2Fuploads%2FVaOjYcOgdEipPXoywJOM%2FFrame%20176.png?alt=media&#x26;token=196b153f-cdbe-40a5-8746-8725055f64de" 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="https://3675563864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHYPEuf5iNSxLbr9k1kWd%2Fuploads%2FcKFT5EKHUuhQSMAHaqW1%2FFrame%20175.png?alt=media&#x26;token=b5aa6bc4-9da6-43b2-ab94-f5ee9c9c14d9" 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="https://3675563864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHYPEuf5iNSxLbr9k1kWd%2Fuploads%2FJFHbb33LQrD7ANYxWVgM%2Fimage.png?alt=media&#x26;token=0d02b9b0-8c30-43a0-841c-76631ee31e63" 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="https://3675563864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHYPEuf5iNSxLbr9k1kWd%2Fuploads%2FH8HpbzU2Tfc0XSCOLYM2%2Fimage.png?alt=media&#x26;token=ae31d22d-e15b-45b0-a637-2b53f048d2a2" alt=""><figcaption></figcaption></figure>