> For the complete documentation index, see [llms.txt](https://help.freewebstore.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.freewebstore.com/design/theme-editor.md).

# Theme Editor

Useful help articles guiding you through the basics of using the Theme Editor from within your Freewebstore Control Panel.

Our new design system builds every page of your store from **blocks**: sections such as a header, a product grid, an FAQ or a footer that you add, edit, move and hide one at a time. Your logo comes from your **Brand Kit**, and your colours and font are set once for the whole store, so every block matches the rest of your store.

{% hint style="info" %}
Using one of our older designs? See [Older designs](#older-designs) at the bottom of this page.
{% endhint %}

### Where to find it

In your Freewebstore Control Panel, go to **Design**. On the new design system the menu has:

* **Overview**: a summary of your store's design settings.
* **Brand Kit**: your brand name, logo, colours and fonts.
* **Website Theme**: the editor, where you build and change your pages. On older designs this item is called Theme Editor.
* **Preview Store**: opens your live store in a new tab.
* **Favicon**: the small icon shown in browser tabs.
* **Language Packs**: change any of the text shown on your store.

### Find your way around the Website Theme editor

Your store appears in the middle of the screen. Down the left-hand side are five buttons:

* **Design**: **Colours**, **Typography**, **Theme** (light or dark looks), **Brand kit** and **Custom CSS** (Custom CSS is available on paid plans).
* **Pages**: your page list. Click **+** (New page) to add a page.
* **Store**: store-wide settings such as **Store Status**, **Localisation**, **Language Packs**, **Storefront SEO**, **Cart Display**, **Stock Display** and **Categories**.
* **Apps**: extras such as **Cookie Consent**, **Notification Bar** and **Age Restriction**.
* **Marketing**: tools such as **Discounts**, **Gift Cards**, **Loyalty Points** and **Blog**.

Above your store you can switch between **Desktop preview** and **Mobile preview**.

### Edit a block

1. Hover over any section of your store and click **Edit**.
2. Make your changes in the panel. They preview live on the page.
3. Click **Done**.
4. Click **Publish** to make your changes live.

Hovering over a block also shows icons to **move** it, **hide** it (the eye icon) or **delete** it (the bin icon). To add a new block, click the **+** button on the top or bottom edge of a block and choose one from **Add a block**.

Moving, hiding and deleting all wait for **Publish**, like your edits. Until you publish, **Discard** undoes them. Adding a new block puts it on your store straight away. Colour and font changes go live as soon as you click **Save**.

### Guides in this section

* Logo
* Colors
* Fonts
* Favicon
* Preview Store
* Slideshow
* Search Bar
* Currency
* Language Packs
* Notification Bar
* FAQ Page
* Custom CSS
* Age Verification
* Background
* Banners

### Older designs

If your store still uses one of our older designs, go to **Design > Theme Editor**. Hover over a part of your store and click **Edit** to change it, or use the **Design** menu in the top right of the editor for **Colors**, **Fonts**, **Background**, **Custom CSS** and more. To browse other older designs, use **Design > Theme Marketplace**.