> 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/custom-css.md).

# Custom CSS

An explanation and a step-by-step guide detailing what the Custom CSS feature is and how to open it within your Freewebstore Control Panel. You need the Startup plan or better to access Custom CSS.

Custom CSS lets you add your own CSS rules to change how your store looks, from the size of an image to the colour of a single word.

Custom CSS is included on the **Startup**, **Pro** and **Ridge** plans.

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

### Before you start

Most changes don't need CSS. On the new design system your fonts and colours come from your Brand Kit and the **Design** settings, and many blocks have their own options in their **Edit** panel. These are kept up to date for you and always look right on phones.

Custom CSS is best kept for small finishing touches. If you're not sure what you're adding, it could break parts of your store or make it harder to use. Our support team is happy to help with the change you want.

{% hint style="warning" %}
We improve the design's blocks from time to time. CSS that targets the inside of a block may stop working after an update, so check your store if something looks different.
{% endhint %}

### Add your CSS

1. Log in to your Freewebstore Control Panel.
2. Go to **Design > Website Theme**.
3. Click **Design** on the left, then **Custom CSS**.
4. Type or paste your CSS into the code box. Your store preview updates as you type.
5. When you're happy, click **Save** at the top of the screen.

Your CSS goes live as soon as you save. It doesn't need Publish. Click **Discard** instead of Save to throw away your changes.

{% hint style="info" %}
**Tips**

* While the Custom CSS panel is open, click an element in the store preview to insert a CSS rule for it.
* Use **!important** to override the design's own styles.
  {% endhint %}

### Go back to an earlier version

Every time you save, we keep a copy. Use the version list at the top of the code box (it shows **Current Version**) to open an earlier one. To use it again, click **Save**.

### Change the look of the code box

Use the **Theme:** list at the top right of the code box to choose a colour scheme for the editor, such as Tomorrow or Monokai. This only changes the editor, not your store.

### Not on a premium plan?

If you're on the free Community plan, you'll see an **Upgrade to Premium** button in the Custom CSS panel instead of the code box.

### Older designs

If your store still uses one of our older designs:

1. Go to **Design > Theme Editor**.
2. Click **Design** at the top right and choose **Custom CSS**.
3. Add your CSS to the code box in the panel on the left and click **Save**.

To change the editor's colour scheme, click **Editor Theme** under the code box and choose a theme.