# 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-and-color-schemes](https://docs.foxecom.com/zest-theme/theme-settings/colors-and-color-schemes "mention")

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FNBQTotvWzmkNf7OqTARs%2Fimage.png?alt=media&#x26;token=e34dc3ce-cc5a-454c-81c3-0695aadd062c" 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](https://docs.foxecom.com/zest-theme/theme-settings/layout "mention")
* **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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FzC6ltHSI0DKIF5LNbyex%2Fimage.png?alt=media&#x26;token=be066aa2-5997-4798-9b5e-029ae08fdb4e" alt=""><figcaption></figcaption></figure>

## **Section padding**

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FjkDLxJIzTTY3JPzENMh1%2Fimage.png?alt=media&#x26;token=5a0376a1-0a21-4b1c-b269-2d1dc532e898" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FMjw2uU0N5G0VGy4lnhV6%2Fimage.png?alt=media&#x26;token=d1e5bcca-1c69-458d-8cfa-3d0004cc1d50" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FGGTZegJlE2OwKHh5JO5R%2Fimage.png?alt=media&#x26;token=bdd721a8-eea4-45c8-9812-7cd56e28ae2f" 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**](https://docs.foxecom.com/zest-theme/theme-settings/animations).

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FpFJqjn7bJDdaxkJ0GXE0%2Fimage.png?alt=media&#x26;token=2fe9f9d7-1baf-4bbb-96f7-7b6cc2d3fc6b" 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).
{% 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FgnjTWnuJlmWEe89QGdsF%2Fimage.png?alt=media&#x26;token=50307a7e-d6bd-4500-95b2-dd6461ee737f" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FiILKWrGnI5qGI0WoPm8f%2Fimage.png?alt=media&#x26;token=88ad9220-0f5a-45bc-bfc9-dd8208f0eb61" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Draw Line" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FAkMUsncwaQGru9uxmxUw%2Fimage.png?alt=media&#x26;token=ae957832-2cf5-4245-80f9-e77d6ee86586" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FOsbd8HuvuzJLApzHmopd%2Fimage.png?alt=media&#x26;token=236e5883-62d3-4ce0-a704-cf2c4deaa2df" alt=""><figcaption></figcaption></figure>

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