> For the complete documentation index, see [llms.txt](https://cth-development.gitbook.io/store-elements-for-tebex/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cth-development.gitbook.io/store-elements-for-tebex/getting-started/adding-store-elements-to-your-wix-site.md). # Adding Store Elements to Your Wix Site Store Elements for Tebex gives you a collection of Wix elements that display Tebex packages, open baskets, start checkout and help customers sign in before buying. This guide explains how to add the elements to your Wix site and what each element is used for. ### Before you add elements Before adding store elements, make sure: * Store Elements for Tebex is installed on your Wix site. * The app installation is activated with a trial or subscription. * Your Tebex Public Token and Private Key are connected in the app dashboard. * Your Tebex packages are active and visible in Tebex. {% hint style="warning" %} If the app is not activated or Tebex is not connected, elements may show a setup error instead of live package data. {% endhint %} ### Where to find the elements Open the Wix Editor for your site. In the editor, open the **Add Elements** panel and look for the app elements provided by Store Elements for Tebex. Depending on the Wix Editor view, these may appear under an app-related section such as **App Widgets**, **Installed Apps** or **Store Elements for Tebex**. Add the element you want, then drag it into position on the page. {% hint style="info" %} Most elements have their own settings panel. Select the element in the Wix Editor, then open **Settings** to choose packages, filters, colours and display options. {% endhint %} ### Available elements Store Elements for Tebex currently includes these site elements: | Element | Use it for | | -------------- | ------------------------------------------------------------------- | | Basket Button | A full basket button with icon, item count and customer login text. | | Trolley Icon | A compact basket icon with item count. | | Package Grid | A responsive grid of Tebex packages. | | Package List | A vertical list of Tebex packages with descriptions. | | Package Card | A standalone card linked to one package. | | Package Search | A search bar that lets customers search packages. | | Add to Basket | A standalone button linked to one package. | | Gift Button | A standalone gift button linked to one package. | | Minecraft Head | A Minecraft avatar/account element for Minecraft stores. | | Product | The product page element used on package detail pages. | ### Basket Button The **Basket Button** opens the customer's basket drawer. It can show: * A basket icon. * The number of packages in the basket. * Login text, such as `Click to Sign-In`. * Signed-in text, such as `Hey, {username}`. For Universal stores, customers do not sign in, so the button shows basket-focused text instead. {% hint style="info" %} Place the Basket Button somewhere customers can easily find it, such as the site header, navigation area or a pinned position. It should be visible on pages where customers can add packages. {% endhint %} The Basket Button settings also control the basket drawer, login forms and popup message styling & design. ### Trolley Icon The **Trolley Icon** is a compact basket element. Use it when you want a smaller, more minimal basket button. It opens the same basket drawer as the Basket Button. This is useful for headers, mobile layouts and designs where a full text button would take too much space. {% hint style="info" %} This element is designed to be pinned to your site - to pin it, right click the element and select 'Pin to Screen'. {% endhint %} ### Package Grid The **Package Grid** displays packages in a card-based grid. It is best for: * Store home pages. * Featured packages. * Rank stores. * Product collections. * Category sections. In the settings panel, you can choose: * How many products are shown. * Whether to show all packages, selected categories or specific packages. * Package card colours. * Package name and price colours. * Add to basket button colours. * Gift icon colours. * Whether to use package short descriptions. {% hint style="info" %} Leave all categories unchecked to show all active packages from all categories. {% endhint %} If a package cannot be gifted, the grid hides the gift button and lets the Add to Basket button use the available button space. ### Package List The **Package List** displays packages as horizontal list items on desktop and responsive cards on mobile. It is best for: * Detailed package sections. * Comparing packages with descriptions. * Store pages where customers need more context before clicking. In the settings panel, you can choose: * How many products are shown. * Whether to show all packages, selected categories or specific packages. * Package description maximum length. * Package colours and button colours. * Whether to use package short descriptions. {% hint style="info" %} Package short descriptions are not affected by the package description maximum length setting. {% endhint %} ### Package Card The **Package Card** displays one selected package. Use it for: * Featured packages. * Rank comparison sections. * Custom landing page layouts. * Hand-built store sections. The Package Card can show: * Package media or fallback package icon. * Package name. * Package price. * Optional package short description. * Add to Basket button. * Gift button, when the package supports gifting. Clicking the package card opens the package's product page. {% hint style="warning" %} A Package Card must be linked to a package in its settings panel. If no package is selected, the element shows a placeholder or skeleton state in the editor and an error on your live site. {% endhint %} ### Package Search The **Package Search** element lets customers search your Tebex packages. When a customer types into the search bar, matching packages appear in a dropdown. Selecting a package opens its product page. You can customize: * Placeholder text colour. * Search bar background colour. * Search bar border colour. * Search icon colour. * Corner style. {% hint style="info" %} Search results appear when the customer starts typing. The search bar is designed to stay compact when it is not being used. {% endhint %} ### Add to Basket The **Add to Basket** element is a standalone button linked to one package. Use it for: * Custom product sections. * Banners. * Hero sections. * Comparison tables. * Any layout where you want a button without a full package card. In the settings panel, choose the package the button should add to the basket. You can also customize button colours, border colour and text styling. {% hint style="warning" %} If no package is linked, clicking the button shows an error. {% endhint %} ### Gift Button The **Gift Button** is a standalone icon button linked to one package. Use it when you want customers to send a specific package as a gift from a custom layout. The button only makes sense for packages that support gifting. If a package has gifting disabled in Tebex, do not use a standalone Gift Button for that package. {% hint style="warning" %} If no package is linked, clicking the button shows an error. {% endhint %} ### Minecraft Head The **Minecraft Head** element displays the signed-in Minecraft account avatar for Minecraft stores. When the customer is not signed in, it shows a fallback account icon. Settings include: * Not-signed-in icon colour. * Box colour. * Whether clicking the element opens the basket. {% hint style="info" %} This element is mainly useful for Minecraft stores; other store types use different customer login flows.\ This element will throw an error if you attempt to use it on a non-Minecraft store type. {% endhint %} ### Product The **Product** element is used for package detail pages. It displays: * Package title. * Price. * Package media gallery. * Rich text package description. * Add to Basket button. * Gift button, if gifting is supported. Product page URLs use this format: `/product/-` Product pages are created automatically. Customers reach product pages by clicking supported package cards, package grid items, package list items or search results. {% hint style="info" %} While you can customise the global product page, you can't customise the product page on a per-product basis outside of what you can change on the package itself via Tebex. {% endhint %} ### Filtering packages in grids and lists Package Grid and Package List both support package filtering. You can display: * **All packages** * **Packages from selected categories** * **Specific packages** For specific packages, use the package search field in the settings panel, add the packages you want, and arrange your page around that selection. {% hint style="info" %} Specific package selection is useful for curated sections such as "Featured Ranks", "Starter Packs" or "Limited Offers". {% endhint %} ### Using short descriptions Some elements can show package short descriptions. Short descriptions use this format inside the Tebex package description: `[short-description]Your short description here[/short-description]` Supported elements include: * Package Grid * Package List * Package Card Package Grid and Package Card only show the short description when one is found. Package Lists will fall back to the normal package description if no short description exists. ### Mobile behavior The store elements are designed to respond to mobile layouts. On mobile: * Package grids reduce column spacing and use icon-style buttons. * Package lists become more compact and avoid desktop-only spacing. * Product pages reorder content for mobile readability. * Basket and pop-up boxes adapt to smaller screens. {% hint style="info" %} Always check both desktop and mobile views in the Wix Editor before publishing your store. {% endhint %} ### Common setup issues #### An element says setup must be completed Open the app dashboard and check: * The app installation is activated. * Tebex is connected. * Both the Public Token and Private Key are saved. #### Packages are missing Check: * The packages are active in Tebex. * The widget is not filtering them out by category or selected package. * You have clicked **Sync Products** after recent Tebex changes. #### A package cannot be gifted If Tebex marks a package as not giftable, Store Elements for Tebex hides gift options for that package where possible. #### A standalone button does nothing useful Open the button settings and make sure it is linked to a package. --- # 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://cth-development.gitbook.io/store-elements-for-tebex/getting-started/adding-store-elements-to-your-wix-site.md?ask=&goal= ``` `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.