> 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/customization/customizing-your-store-elements.md).

# Customizing Your Store Elements

Store Elements for Tebex is designed to match the look and feel of your Wix site. Most elements include settings for fonts, colours, buttons, borders and layout options directly in the Wix Editor.

This guide explains how customization works and how to keep your store elements looking consistent.

### Before you customize

Make sure your app is already set up:

* Store Elements for Tebex is installed on your Wix site.
* The app installation is activated.
* Your Tebex Public Token and Private Key are connected.
* The element you want to customize has been added to the page.

{% hint style="info" %}
You customize site elements in the Wix Editor, not in the Store Elements for Tebex dashboard. Select an element on the page, then open its settings panel.
{% endhint %}

### Open an element's settings

To customize an element:

1. Open your site in the Wix Editor.
2. Select the Store Elements for Tebex element you want to edit.
3. Click **Settings**.
4. Update the available options in the settings panel.
5. Preview the site on desktop and mobile before publishing.

The available settings depend on the element type.

### Font settings

Most visible store elements include a **Text font** or similar font option.

When a font option is unchanged, the element uses your site's theme styling. If you choose a font manually, that selected font overrides the theme for that element.

To remove a manual font choice, click:

**Revert to Theme Settings**

{% hint style="info" %}
Use theme settings when you want store elements to follow the overall Wix site design. Use a custom font when a specific element needs to stand out.
{% endhint %}

### Font settings that are not editable

The basket drawer, popup messages and store login/forms use the app's own fixed font styling for consistency and readability.

You can customize their colours, but their font size and weight are handled by the app.

{% hint style="info" %}
This keeps important checkout-related UI readable across desktop and mobile, even when a site uses a very decorative theme font.
{% endhint %}

### Colour settings

Elements can include colour settings for:

* Text.
* Icons.
* Buttons.
* Button text.
* Button borders.
* Card backgrounds.
* Card borders.
* Basket drawer sections.
* Login and form modals.

For example, Package Grid, Package List and Package Card elements include settings for package card colours, package name colours, package price colours, Add to Basket buttons and gift buttons.

### Contrast warnings

We care about web accessibility and some colour combinations can make text or icons hard to read. When this happens, the settings panel shows a warning.

These warnings are based on the actual colours being displayed together, such as:

* Button text on a button background.
* Package names on package cards.
* Package prices on package cards.
* Gift icons on gift buttons.
* Basket drawer text on the drawer background.
* Search icon on the search bar.

{% hint style="warning" %}
If you see a contrast warning, choose colours that are easier to read. A contrast ratio close to `4.5:1` or higher is recommended for normal text. Use a [contrast checker like this](https://webaim.org/resources/contrastchecker/) if you'd like to check the colours you're using.
{% endhint %}

### Square corners

Many elements include a **Square Corners** option.

Turn this on if you want a sharper, more rectangular style. Leave it off if you prefer the default rounded style.

This option can appear on elements such as:

* Add to Basket
* Gift Button
* Package Grid
* Package List
* Package Card
* Product
* Package Search
* Basket Button
* Trolley Icon
* Minecraft Head

### Customizing buttons

Button-based elements usually include:

* Button colour.
* Button text colour or icon colour.
* Button border colour.
* Square corners.

This applies to standalone buttons and buttons inside package displays.

Examples include:

* **Add to Basket button colour**
* **Add to Basket text colour**
* **Add to Basket button border colour**
* **Gift button colour**
* **Gift icon colour**
* **Gift button border colour**

{% hint style="info" %}
On mobile, some package buttons may switch to icon-style buttons to keep layouts compact and touch-friendly.
{% endhint %}

### Customizing package cards

Package Grid, Package List and Package Card elements can include settings for:

* Package card background colour.
* Package card border colour.
* Package name colour.
* Package price colour.
* Package short description text colour.
* Package description text colour, where full descriptions are shown.
* Button colours.
* Gift icon colours.

Package Grid and Package Card can also show package short descriptions when enabled.

{% hint style="info" %}
Package Grid short descriptions display up to two lines. Full rich package descriptions are shown on product pages.
{% endhint %}

### Customizing the Basket Button

The Basket Button has its own visual settings, including:

* Cart button text font.
* Signed-in text.
* Signed-out text, unless the connected store is Universal.
* Login and count text colour.
* Cart icon colour.
* Button background colour.
* Button border colour.
* Badge background colour.
* Square Corners.

The signed-in text can include:

`{username}` - this resolves to the logged in player's username.

For example:

`Hey, {username}`

{% hint style="info" %}
Universal stores do not use customer sign-in, so the signed-out text option is not used for Universal stores.
{% endhint %}

### Customizing the basket drawer

Basket drawer styling is controlled from the Basket Button settings panel.

The **Basket Drawer Design Settings** section includes options such as:

* Basket drawer background colour.
* Basket text colour.
* Exit icon colour.
* Logout button colour.
* Logout text colour.
* Logout button border colour.
* Checkout button colour.
* Checkout text colour.
* Checkout button border colour.
* Basket package card colour.

These settings affect the drawer that opens when customers view their basket.

### Customizing store login and forms

Store login modals and package information forms are also controlled from the Basket Button settings panel.

The **Store Login & Forms** section includes:

* Form background colour.
* Form text colour.
* Sign-in button colour.
* Sign-in button border colour.
* Sign-in button text colour.
* Cancel button colour.
* Cancel button border colour.
* Cancel button text colour.

These settings apply to customer-facing forms such as:

* Minecraft username sign-in.
* Tebex authentication prompts.
* Package variable forms.
* Gift recipient forms.
* Gift card recipient email forms.
* Game server selection forms.
* Discord connection prompts.

{% hint style="warning" %}
Because these forms are part of the buying flow, keep colours clear and readable. Customers should always be able to see what they need to enter and which button continues the purchase.
{% endhint %}

### Customizing Package Search

The Package Search element includes settings for:

* Text font.
* Placeholder text colour.
* Search bar background colour.
* Search bar border colour.
* Search icon colour.
* Square Corners.

The search dropdown uses the configured font and opens when customers start typing.

### Customizing Minecraft Head

The Minecraft Head element includes settings for:

* Whether clicking opens the basket.
* Square Corners.
* Not-signed-in icon colour.
* Box colour.

The not-signed-in icon is shown when no Minecraft username is stored for the customer.

### Customizing the Product element

The Product element includes settings for:

* Text font.
* Add to Basket button colour.
* Add to Basket button border colour.
* Add to Basket text colour.
* Gift button colour.
* Gift icon colour.
* Gift button border colour.
* Package name colour.
* Package price colour.
* Back button colour.
* Whether to show the back button.
* Square Corners.

The Product element displays the full package page, including rich package descriptions and package media.

### Preview desktop and mobile

Always check your changes in both desktop and mobile views.

Some elements adjust their layout on smaller screens. For example:

* Package Grid becomes more compact.
* Package List uses a mobile-friendly card layout.
* Product pages reorder content for readability.
* Buttons may use icons on mobile where space is limited.

{% hint style="info" %}
If a design looks good on desktop but crowded on mobile, reduce the number of packages shown, use shorter package names, or choose a simpler layout. If you think there's something that could be improved on our side, drop a line to support through your app dashboard.
{% endhint %}

### Best practices

Use these guidelines when styling your store:

* Keep button colours consistent across elements.
* Use the same package name and price colours across package displays.
* Keep basket drawer and modal colours readable.
* Use contrast warnings as design guidance.
* Avoid using very light text on light backgrounds.
* Avoid using very dark text on dark backgrounds.
* Check hover, mobile and editor preview states.
* Use **Revert to Theme Settings** when you want the site theme to control fonts.

### Troubleshooting

#### My selected font does not look right

Try clicking **Revert to Theme Settings**, then preview the site again. Some decorative fonts can look different between the Wix Editor and the published site.

#### My text or icon is hard to read

Check for contrast warnings in the settings panel and choose stronger foreground/background colour combinations.

#### My basket drawer does not match my buttons

Basket drawer colours are controlled in the Basket Button settings panel under **Basket Drawer Design Settings**.

#### My login modal does not match my site

Login modal colours are controlled in the Basket Button settings panel under **Store Login & Forms**.

#### My package card does not show a description

Package Card only shows package short descriptions when short descriptions are enabled and a short description exists for that 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/customization/customizing-your-store-elements.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.