> For the complete documentation index, see [llms.txt](https://docs.tebex.io/creators/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tebex.io/creators/tebex-control-panel/storefronts.md).

# Storefronts

{% hint style="info" icon="sparkles" %}
This feature is new!
{% endhint %}

Storefronts are a new way of designing your Tebex Store; you can drag-and-drop modular blocks to build your store, allowing you to make it look however you'd like.

### Creating a Storefront

By default, your store won't have a storefront, so you'll need to create one.

1. From your [Control Panel](https://creator.tebex.io/), on the left-sidebar, click '[**Storefront**](https://creator.tebex.io/storefront)'.
2. On the page that appears, click the '**Create Storefront**' button in the top-right.

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

3. Give it a **name** and **choose the layout template** you'd like to start with.

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

4. You'll now land in the **Storefront Editor**, from here you can **customise existing blocks** (blocks are the sections that make up your store) on your layout template, **reorganise** them (just drag-and-drop), **delete** them or even **add new blocks** from the left-sidebar.

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

{% hint style="info" %}
You can also add and customise blocks on the **Package Detail** and **Category pages** - just click the page you'd like to edit in the '**Pages**' dropdown on the left sidebar in the Storefront Editor.
{% endhint %}

To customise a block, just **click it** and customisation options will appear on the left-sidebar. Some blocks allow you to edit content directly, for example the Carousel Media Item allows you to type and replace the 'Media Title' and 'Media Description' text directly, just by clicking it.

You can use the desktop/mobile **switcher** in the top-right to switch between editing the desktop and mobile versions of your storefront.

You can also create custom pages, just click the '**+**' next to the 'Pages' dropdown menu from the left-sidebar.

### Editing Global Settings

**Global Settings** are settings that are used across blocks on your storefront - for example:

* Theme colours
* Images (used within blocks)
* Login popup
* Basket sidebar
* Package information popup *(if enabled in Storefront Settings - see below)*

You can change these settings within the Storefront Editor when there is no block selected.

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

### Defining Storefront Settings

You can define storefront specific settings by **clicking the name of your storefront at the top** of the Storefront Editor.

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

**You can define/update your:**

* Domain (including adding a custom domain)
* Checkout appearance setting (whether you'd like the checkout to appear as a popup or page)
* Package info appearance setting (whether you'd like package information to appear as a popup or page)
* Basket settings (whether you'd like a basket system or if all packages should direct straight to checkout when 'buy' is clicked)
* Storefront name
* SEO Settings
* Google Analytics Measurement ID

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

### Previewing, Saving & Publishing Your Storefront

Before Saving and Publishing your storefront, it's a good idea to Preview it first. When previewing a storefront, any changes will be saved automatically, then shown to you in the preview, so you're always previewing the latest version of your storefront when you click 'Preview'.

To **Preview** a storefront, click '**Preview**' in the top bar:

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

If you're happy with the preview shown, click '**Publish**'.

**If the storefront is activated** on the Storefront page in your Control Panel, changes will go live instantly.

**If the storefront isn't activated** on the storefront page in your Control Panel, you'll need to activate it before changes go live on your store.

### Exporting Your Storefront

{% hint style="info" %}
Tebex Storefronts can only be imported to other Tebex Projects, they can't be exported and then used away from the platform.
{% endhint %}

To export your storefront, click the three-dots icon (menu button) next to the storefront you wish to export/download, then click '**Download**'.

You'll receive a file that can be used on another Tebex Store to import your storefront.

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

### Importing Your Storefront

To import your storefront:

1. On the [Storefront page](https://creator.tebex.io/storefront), click the '**Create Storefront**' button in the top-right.
2. On the page that appears, click the '**Upload**' button in the top-right.
3. Choose the template file to upload.

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

### Legacy Webstores

**Been with us for a while?** You might see a 'Legacy Webstore' option instead; use this to continue managing your legacy template and theme settings.

Clicking '**Open Editor**' under a Legacy Webstore 'storefront' will allow you to view all the tabs that were previously under the Webstore section - [you can find legacy documentation for these sections here.](https://docs.tebex.io/creators/tebex-control-panel/webstore)

If you've recently created a store and are wanting to use our Legacy Webstore [template & theme options](https://docs.tebex.io/developers/templates/overview), **this is unavailable.** [Why not try creating a storefront?](#creating-a-storefront)