🌐 VISION Tebex Theme

VISION Tebex Theme Setup Tutorial

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

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

Add to bottom for buttons, top for pictures.

• To get your ID, copy the part after /package/ in the link. For example: https://eyestore.tebex.io/package/6712853 → Your ID is: 6712853

• For buttons, add the ID to the if at the bottom. You can duplicate the lines if needed.

• Add images at the top using slide1, slide2, slide3, etc. Check your file for examples.

🎨 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.

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.

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 %}

Purpose: To filter and display package-specific tags in features.twig based on the package ID.

{% 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 %}

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 == "" %}

<a href="https://youtu.be/url" class="youtube"><i class="fa-brands fa-youtube"></i> <span>Youtube Preview</span></a>
{% else %}
    <a href="https://www.youtube.com/@storeyes" class="youtube"><i class="fa-brands fa-youtube"></i> <span>Youtube Preview</span></a>
{% endif %}

To show an active discount on your site, just head over to Sales and set a percentage discount.

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!