# 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.

{% hint style="success" %}
**Steps:**

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**.
{% endhint %}

<figure><img src="https://4042727321-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSkIHgFDpy0SIeYlayaAb%2Fuploads%2FsQYjLF5ctENif5HafM1v%2Fscreenshort-21.jpg?alt=media&#x26;token=2128aae5-d751-426b-9d6d-366ca4673541" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4042727321-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSkIHgFDpy0SIeYlayaAb%2Fuploads%2FKJMx5LFAYzIn7AoPFrp1%2Fscreenshort-22.jpg?alt=media&#x26;token=14c29d32-62cf-489d-86a6-ee42ce7fdac4" alt=""><figcaption></figcaption></figure>
