# General settings

In the **Zest** theme, you can find some general settings that are available in all building block sections:

## **Color scheme**

Apply a color scheme to the section.

To define a set of default color schemes for your store, go to **Theme settings** > [Colors & Color schemes](/zest-theme/theme-settings/colors-and-color-schemes.md)

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

{% hint style="info" %}
In Shopify, the [Color scheme](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme) (a set of colors) of your store can be set within the [Theme settings](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings). It helps group elements and their respective colors, making your store visually appealing and cohesive. You can apply the color schemes to different sections throughout your online store with a color scheme picker.
{% endhint %}

## **Container**

3 options for container:

* **Stretched width**: span the section width regardless of screen size.
* **Fixed width**: depends on your page content width in Theme settings > [Layout](/zest-theme/theme-settings/layout.md)
* **Full width**: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.

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

## **Section padding**

Toggle the slider to adjust the **Top** and **Bottom padding** of the section (0px - 100px).

<figure><img src="/files/5DxzgnnN7OlVd2h0M4MM" alt=""><figcaption><p>Make sure your paddings look good on all screen sizes</p></figcaption></figure>

## **Section divider**

This divider line provides a clear boundary between the current section and the above.

To activate the divider line, enable the **Show divider** checkbox.

Choose a suitable **Divider width** for the divider: Fixed width/ Full width/ Stretched width.

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

## **Custom attributes**

You can create custom code for a specific section by adding **Custom ID** or **Classes** attributes:

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

## Animations&#x20;

**Most sections** come with a setting for animations.&#x20;

You can either set the section loading effect to each of the sections (if present) particularly or make them inherit the global settings that you set in your **Theme settings** > [**Animations**](/zest-theme/theme-settings/animations.md).

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

{% hint style="info" %}
🌟 Section animation settings are available on **Zest version 6.0.0 and above** 🌟&#x20;

View Changelog [here](https://help.foxecom.com/changelog/zest?utm_source=foxecom\&utm_medium=help_center_zest_general_settings\&utm_campaign=anchor_text\&utm_term=here).
{% endhint %}

## Highlight text

{% hint style="info" %}
To add an animated highlight to the text, simply wrap it in italics. Click the "I" button in the editor to toggle italics when highlighting text.
{% endhint %}

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

You can apply the **Underline** or **Draw Line** effect to the **Highlighted text**, or select **None** if you prefer it to appear in italic style only.

{% tabs %}
{% tab title="Underline" %}

<figure><img src="/files/HD7GXBvfvpbgpA9SKLrT" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Draw Line" %}

<figure><img src="/files/jVB4m1v38o2EV0gs4rns" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

To use the **Highlight text** color defined in the [**Color scheme**](/zest-theme/theme-settings/colors-and-color-schemes.md), enable the **Highlighted text color** toggle.

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

{% hint style="warning" %}
**Note**: This highlighted text only applies to certain **section headings** and **block headings**.
{% endhint %}


---

# 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://docs.foxecom.com/zest-theme/pages-global-sections/general-settings.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.