# Add custom CSS
All FoxEcom themes
Use custom CSS to fine-tune the appearance of your storefront when the available theme settings don't provide the styling option you need. Custom CSS can help you adjust things like colors, spacing, font sizes, borders, and other visual details without changing the theme's functionality.
Custom code requires basic knowledge of CSS and Shopify theme files. Incorrect changes may affect your storefront's appearance or functionality.
Check out [W3Schools](https://www.w3schools.com/Css/) for a quick CSS tutorial.
### Before you start
Before adding custom CSS:
* **Duplicate your theme** so you have a backup to restore if something goes wrong
* Prepare the CSS rules you want to add.
* Make sure you understand which element or class you want to customize.
**You can add custom CSS to your theme using one of the following methods:**
1. [Add CSS in the theme editor](https://docs.foxecom.com/hyper-theme/guides/advanced-and-developer/add-custom-css#method-1-add-css-in-the-theme-editor) *(recommended)*
2. [Add CSS through a custom CSS file in the theme code](https://docs.foxecom.com/hyper-theme/guides/advanced-and-developer/add-custom-css#method-2-add-css-through-a-custom-css-file-in-the-theme-code)
## Method 1: Add CSS in the theme editor
Some themes provide a **Custom CSS** field in the Theme Editor. This is the easiest option when you only need to add a small amount of CSS.
You can add custom CSS at either the **section level** or the **theme level**, depending on where you want the styling to apply:
* **Section-level Custom CSS:** Add CSS to a specific section when you want to apply the styling only to that section.
* **Theme-level Custom CSS:** Add CSS under **Theme settings > Custom CSS** when you want the styling to apply across all relevant sections.
The Custom CSS field has **a character limit**. However, CSS added through the Theme Editor is retained when you update the theme.
Use this method for small, simple styling adjustments that fit within the available character limit. Learn more: [Adding custom CSS to your theme](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/add-css)
## Method 2: Add CSS through a custom CSS file in the theme code
For larger or more complex customizations, add your CSS to a separate `custom.css` file.
Keeping your custom CSS in a separate file makes your customizations easier to manage and review later.
**Minimog and Megamog** include an `assets/custom.css.liquid` file by default. You can add your custom CSS directly to this file instead of creating a new one.
Learn more: [Add Custom code/ CSS correctly](page://f7ca4698-90db-4edc-820e-cdee5073660e)
### Step 1: Create a custom CSS file in the theme code
1. From your Shopify admin, go to **Online Store > Themes**.
2. Find the theme you want to customize and click **… > Edit code**.In the **Assets** folder, click **Add a new file**.
3. Select **Create a `custom.css` file**
4. Open **Layout > `theme.liquid`**
5. Find the stylesheet loading code provided by the theme.
For example: `echo 'theme.css' | asset_url | stylesheet_tag: preload: true`or `{{ 'theme.css' | asset_url | stylesheet_tag: preload: true }}`
6. Duplicate the line and change the referenced file name to `custom.css`
7. Click **Save**.
If you want to make complex customizations, consider hiring a Shopify Expert or a third-party developer.
[Shopify Community](https://community.shopify.com/c/shopify-community/ct-p/en) is also a great resource to get advice from other store owners on a wide range of topics.
### Step 2: Add your custom CSS
Open **Assets > custom.css** and add the CSS rules you want to apply.
For example:
```
.example { font-size: 18px;}
```
**Save** the file and preview your storefront to make sure the changes work as expected.
**Tip:** Use your browser's developer tools to identify the element and CSS class you need to customize before adding your code.
## Keep your customizations after a theme update
Custom code added to your theme may **not be carried over automatically when you update to a new theme version**.
If you're using **Minimog or Megamog** and added your CSS to the default `custom.css.liquid` file, the file is automatically carried over when you update the theme through [**FoxHome**](https://home.foxecom.com/). Other custom code may still require manual migration.
Learn more: [Update Minimog](https://docs.foxecom.com/minimog-theme/getting-started/update-minimog-theme "Update Minimog") and [Update Megamog](https://docs.foxecom.com/megamog-theme/getting-started/update-megamog-theme)
**Before updating your theme:**
1. Keep a copy of your custom CSS and other code changes.
2. Update your theme.
3. Reapply your customizations to the new theme version if needed.
4. Test the storefront before publishing the updated theme.