> For the complete documentation index, see [llms.txt](https://templatescoder.gitbook.io/labacha-shopify-theme-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://templatescoder.gitbook.io/labacha-shopify-theme-documentation/theme-settings/adding-custom-css-to-your-theme.md).

# Adding custom CSS to your theme

In this field, we already split to some responsive devices like **Global Custom CSS; Custom CSS for only desktop; Custom CSS for tablet, mobile; Custom CSS for only tablet; Custom CSS for only mobile**. You can write your code to the correct field.

**For example**: You want to change the Background color for Shopping Cart Widget and displays it on all devices, you can add this Code to **Global Custom Css**.

### 1. Add Custom Css in Theme Settings

Custom CSS can be added to your entire theme that affects all pages in your online store except the **Checkout** page. For example, you can change the way that buttons are displayed across your entire store.

1. In your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings -> Custom Css**.
4. Add your code and click **Save**.

<figure><img src="https://3628331143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F99MlOzvyJDAhsvR2FLtv%2Fuploads%2FDBlt04uIheqHAnnNcYI0%2F11.jpg?alt=media&amp;token=d0231dfb-2cf1-4633-bac1-2cda358ea504" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Your css will be saved in **settings\_data.json** file
{% endhint %}

<figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/oBpTh7qwq1wdxPyHN5yn/screenshort-237.jpg" alt=""><figcaption></figcaption></figure>