# CSS customizations

## Theme Customizer

Shopify has made adding global and local CSS changes to your theme easy. Palo Alto supports these Theme Customer methods. Some examples are:

* **Template Pages** - Apply CSS overrides to Product templates, Blog posts, and standard Page templates.
* **Sections -** Customize elements only within a specific section. This includes the home page, header, cart drawer, and footer. 
* **Global** - Apply CSS overrides for the entire store.

{% hint style="success" %}
**Advantages**

* When updating Palo Alto to newer versions, these CSS changes will automatically be applied to your new theme.
* The Shopify Update tool migrates any Custom CSS added to the Theme Customizer. 
  {% endhint %}

### Product pages

1. Click on "**Product pages**" in the Theme Customizer sidebar.
2. Find "**Custom CSS**" towards the bottom of the settings.

<figure><img src="/files/9WZEWW6XSScCbCmoeBTt" alt=""><figcaption></figcaption></figure>

3. Click on "Custom CSS" to expand the accordion. Here, you can paste the CSS code:

<figure><img src="/files/9IILQhAMv3nrIwxvDjr0" alt=""><figcaption></figcaption></figure>

The CSS code snippet you use here will apply to **all products** that use the same template.&#x20;

Be sure to paste valid CSS code and then **save** the changes in the Theme Customizer.&#x20;

***

### Theme Sections

The home page sections and other sections used throughout the theme will have a similar option for adding CSS code snippets. Changes made there are local to only that section.&#x20;

1. Click on the section you'd like to add your CSS code snippet to.
2. In the section settings, scroll to the bottom and click on "**Custom CSS**" to expand. Then, add your CSS code snippet inside.&#x20;

<figure><img src="/files/noGe4FecegU8ocP2Z5qc" alt=""><figcaption></figcaption></figure>

The CSS you add here will **only** affect this section and will **not** affect any other sections in your store.&#x20;

Remember to **Save** your changes.&#x20;

***

### Global CSS

Use the **Theme Settings** in the Theme Customizer to add a CSS code snippet that will target **all** areas of your store.

1. Click on the **Settings** **icon** in the Theme Customizer.
2. Towards the bottom, click to expand the "**Custom CSS**" accordion and paste your code snippet into the main field.

<figure><img src="/files/HUZqHeyrVAP4jZuskwJz" alt=""><figcaption></figcaption></figure>

### Example of code snippet

We'll use this sample code snippet to demonstrate where the code will be added:

```
.loading-overlay {
  display: none;
}
```

1. Copy all of the code, including the opening and closing curly brackets.
2. Paste the code snippet into the main box area.&#x20;

<figure><img src="/files/ZFZpapESeSsKTo36vxnB" alt=""><figcaption></figcaption></figure>

Line numbers will be displayed next to your code snippet to help indicate how many lines of code have been added.&#x20;

**Save** your changes.&#x20;

***

## Alternate method

Developers might be used to editing theme.css files. However, we no longer recommend this method as it's a legacy option.&#x20;

{% hint style="warning" %}
**Disadvantages**

* Code added using the Code Editor will **not** automatically migrate when you update your theme.&#x20;

Please use the above methods to avoid manually adding CSS code changes after each time you update Palo Alto.&#x20;
{% endhint %}

For developers who would like to use the Code Editor, it's very important to add your custom CSS at the bottom of the `theme.css` file, which is located in the **assets** folder.

<figure><img src="/files/HBYtm73UUPRsH8RjpDhA" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://palo-alto.presidiocreative.com/faq/frequently-asked-questions/css-customizations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.