# Colors & Font sizes

## Open Color & Font size settings.

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Color & Font sizes.**

## **Body**

* **Background color:** set the page background for all pages.
* **Text color:** pick a color for all texts on all pages.
* **Font size:** adjust the color for all texts on all pages.

{% hint style="warning" %}
Some texts in some sections or special elements(price, section title,...) have their own color, font size settings.
{% endhint %}

## Rich text editor

Configure font size for the text in the product description, article content, static page content. You can adjust the font size for general text, H1, H2, H3, H4, H5, H6 tags.

## Links

Configure color for anchors tags.

### A. General style:

* **Text color:** pick a color for anchor tags in the general state.
* **Text color hover:** pick a color for anchor tags when users hover the mouse or click on it.

### B. Alternative style:

Configure color for anchor tags that have the HTML class: **alternative**.

* **Text color:** pick a color for anchor tags in the general state.
* **Text color hover:** pick a color for anchor tags when users hover the mouse or click on it.

## Main navigation

Configure color and font size for the horizontal navigation.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHCGwvM3TacfIh2-oge%2F-MHCPghTJWUcW0cZ33fH%2Ftheme-settings-color-font-sizes-navigation.jpeg?alt=media\&token=f807582f-32a5-49d5-81a5-26644ab73fe3)

### A. Top item:

By default, the top item color is configured at header style settings ( depend on the header style you are using ). The below content will show details of header style settings.

* **Color hover:** pick a color for anchor tags when users hover the mouse on it.
* **Font size:** adjust the size of the text.

### B. Dropdown Title:

A dropdown title is the title of a dropdown column.

* **Font size:** adjust the size of the text.

### C. Dropdown Content:

* **Font size:** adjust the size of the texts in the dropdown content.
* **Background color:** pick a color for the dropdown content.

## Vertical navigation

Configure color for the trigger bar, top-level item, background color of the dropdown content.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHENfGuOeMvAvYdaMgi%2F-MHEXYGzSi5U5LGFnJvy%2Ftheme-settings-color-font-sizes-vertical-navigation.jpeg?alt=media\&token=232ded8f-0490-4c6c-a122-b324f03110a4)

## Header common settings

### A. Header Style 1:

You can go to the **Colors & Font sizes > Header Style 1** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_J2ynrG_fMO8JLzgH%2F-MH_PcUEo0r2fjyd5-Ea%2Fconfig-header-style-1.png?alt=media\&token=54300881-a35a-4aac-85cc-42745788f7b0)

### B. Header Style 2:

You can go to the **Colors & Font sizes > Header Style 2** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_J2ynrG_fMO8JLzgH%2F-MH_S0ufZfgzr91wYAEd%2Fconfig-header-style-2.png?alt=media\&token=65920c74-aa4c-4baa-b75f-43860af93d64)

![There are 3 areas in header style 2: top, middle, and bottom.](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_J2ynrG_fMO8JLzgH%2F-MH_UqAxTb4WMKd6A6Y8%2Fconfig-header-style-2-1.png?alt=media\&token=93044e53-acdf-4f14-9e39-2b809b77cde5)

### C. Header Style 3:

You can go to the **Colors & Font sizes > Header Style 3** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_VvEl863t4-SxzM1p%2F-MH_WJKEZ0WWr_xa8cPF%2Fconfig-header-style-3.png?alt=media\&token=ad6642cc-eddb-4fb9-9b06-560e6f89b022)

### D. Header Style 4:

You can go to the **Colors & Font sizes > Header Style 4** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_WMeaQYWjlaJvVV15%2F-MH_XlF11G4OH2OWiVXP%2Fconfig-header-style-4.png?alt=media\&token=7f083d55-643b-4f7c-a699-fd538b17b964)

![There are 2 areas on header style 4: top, and bottom.](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_WMeaQYWjlaJvVV15%2F-MH_XnZe1L_f83qJY7Sl%2Fconfig-header-style-4-1.png?alt=media\&token=1cfd0913-5eee-4e8e-9704-8b1123377cc1)

### E. Header Style 5:

You can go to the **Colors & Font sizes > Header Style 5** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_XwBe8oG-L5uH4C-W%2F-MH_ZVADyQS7g2dMecUg%2Fconfig-header-style-5.png?alt=media\&token=66156e34-8dee-476f-982a-2bd701f79fee)

![There are 2 areas: top, bottom & middle.](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_XwBe8oG-L5uH4C-W%2F-MH_Z_F6bBUY2YQBiVgu%2Fconfig-header-style-5-1.png?alt=media\&token=8a580035-490d-4587-a55b-32d4b8d88979)

### F. Header Style 6:

You can go to the **Colors & Font sizes > Header Style 6** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_ZfH7Ma4GaVx2yxZB%2F-MH___4owmuzJ6RTXiMg%2Fconfig-header-style-6.png?alt=media\&token=5c361e6b-2d8a-4f77-8fe0-e68fd1e04cf2)

### G. Header Style 7:

You can go to the **Colors & Font sizes > Header Style 7** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH__cadxheouVugZImX%2F-MH_a9T56O1aEKL1KEtd%2Fconfig-header-style-7.png?alt=media\&token=10725342-5dac-4f02-b387-d670f0c719c8)

### H. Header Style 8:

You can go to the **Colors & Font sizes > Header Style 8** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH__cadxheouVugZImX%2F-MH_ccd1LHjrsQ64glUf%2Fconfig-header-style-8.png?alt=media\&token=753f580b-4a2e-4734-ab16-2559c85b58d1)

![There are 3 areas on header style 8: top, bottom, and search.](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH__cadxheouVugZImX%2F-MH_cfMGNlmfjG-VDuPW%2Fconfig-header-style-8-1.png?alt=media\&token=789310a5-e8db-41da-aa41-2b4994ad2384)

### I. Header Style 9:

You can go to the **Colors & Font sizes > Header Style 9** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_cmtfAdNl5I4TZ4aR%2F-MH_fZ4-XbvsjbaRfulB%2Fconfig-header-style-9.png?alt=media\&token=72289d65-1b92-4761-abdf-452558d84a03)

![There are 2 areas on header style 9: top, and bottom.](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_cmtfAdNl5I4TZ4aR%2F-MH_fagyXqoCVElj32SN%2Fconfig-header-style-9-1.png?alt=media\&token=7cd93097-a7e3-42f0-8ccc-aeacb469b5d6)

### J. Header Style 10:

You can go to the **Colors & Font sizes > Header Style 10** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_fiX1ajGxgxnO-YEs%2F-MH_gHcjsNZFF4-13waN%2Fconfig-header-style-10.png?alt=media\&token=4d978926-bdfa-442e-b8a4-65f50babeb97)

## Mobile header

You can go to the **Colors & Font sizes > Mobile Header** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_gLlWiB5Bfo6-UAIz%2F-MH_gpOfWey0oZRSlUwZ%2Fconfig-mobile-header.png?alt=media\&token=d1abd19d-e746-42f4-abee-67cc3607976e)

## Section title

You can go to the **Colors & Font sizes > Section title** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_grK39nXU1dM-kvxP%2F-MH_iJAfnDZS8hjHgt4W%2Fconfig-section-title.png?alt=media\&token=32423432-c734-4a2b-a09f-d022b33c675a)

## Section subtitle

You can go to the **Colors & Font sizes > Section subtitle** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MH_iLCPI3Az03VzsZyI%2F-MH_irEBfpqfVzY-GNbg%2Fconfig-section-subtitle.png?alt=media\&token=0970e588-1b12-40fc-8107-e0ccf84f1dde)

## Product title

You can go to the **Colors & Font sizes > Product title** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdcSBlndCS-H63aX9V%2F-MHdck9uneSTvXhzUHAD%2Fconfig-product-title.png?alt=media\&token=54de5b29-10c1-44b4-bea4-2bbd8f86cdc1)

## Price

You can go to the **Colors & Font sizes > Price** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdcnvFpByWCVZb0lQ4%2F-MHdd0P9ZYnqAzfRS1p7%2Fconfig-product-price.png?alt=media\&token=7cc8b3f6-73b0-44ef-8947-91f9bef88090)

## Compare price

You can go to the **Colors & Font sizes > Compare price** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdcnvFpByWCVZb0lQ4%2F-MHdd7SqmfxUkE_ZAQkm%2Fconfig-product-compare-price.png?alt=media\&token=2bb76dd2-f4dd-4272-8f86-ef8d8b4b648f)

## Color swatch

You can go to the **Colors & Font sizes > Color swatch** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdd9jnIifrcUmftWre%2F-MHddaUqAHwfpeOIJ-7S%2Fconfig-product-color-swatch.png?alt=media\&token=4dd36ff3-1df8-4027-88fd-8537f443a033)

## Item vendor

You can go to the **Colors & Font sizes > Item vendor** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdezxVbE8_RFO4VzLR%2F-MHdfcbI2MGGZ5zcUf8u%2Fconfig-product-vendor.png?alt=media\&token=ce40b655-4bd2-4e2f-a326-2167f80a605c)

## Cart button

You can go to the **Colors & Font sizes > Cart button** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdfegRqWWW9a14oKwy%2F-MHdgVcHiGoaZWEbJ1M_%2Fconfig-product-cart-button.png?alt=media\&token=966e563e-c857-4070-a152-d77650de4d85)

## Style 1 button

This config is used in the Product grid (Add to cart button), Banner Creator Pro, Flexible collection list, Contact page, and some of the static pages which the same structure. You can go to the **Colors & Font sizes > Style 1 button** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdgX4ldK16oDkLrsjp%2F-MHdhV2_Hc48FkxZGEYR%2Fconfig-button-style-1.png?alt=media\&token=b7693518-8342-46b2-809f-5ef72f491a4e)

## Style 2 button

This config is used in the Banner Creator Pro, Flexible collection list, and some of the static pages which the same structure. You can go to the **Colors & Font sizes > Style 2 button** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdhX_IoDVrscbTy_Q6%2F-MHdisJw0kJj3qCPAcXH%2Fconfig-button-style-2.png?alt=media\&token=2e456190-203c-4ecb-91c1-d0bc3b1bb9f7)

## Style 3 button

This config is used in the Product Grid (Compare, Wishlist, Quickview buttons), Banner Creator Pro, Flexible collection list, and some of the static pages which the same structure. You can go to the **Colors & Font sizes > Style 3 button** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdhX_IoDVrscbTy_Q6%2F-MHdjVYkFVVVMsyWMe3W%2Fconfig-button-style-3.png?alt=media\&token=ad1e8d2d-2ecd-4d0a-b758-394956b87533)

## Tab title

You can go to the **Colors & Font sizes > Tab title** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdjWr5Ql0UChH2P5l4%2F-MHdk6O5RcajdsdcLW7t%2Fconfig-tab-title.png?alt=media\&token=29bfbe2f-8f77-418c-a865-8cdbc5494878)

## Sidebar canvas

This config is used in the cart sidebar, mobile menu, and filter sidebar background. You can go to the **Colors & Font sizes > Sidebar canvas** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdkF4OyFJy9Mtnsydo%2F-MHdl9SozifMgR2rTJ6s%2Fconfig-sidebar-canvas.png?alt=media\&token=715d7656-e2f3-4af3-ae14-ae4b18b5cdb3)

## Product page and Quick view popup

You can go to the **Colors & Font sizes > Product page and Quick view popup** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdppt-HZPV7sXkTjIf%2F-MHdtKcHn-_G7D8u73zi%2Ftheme-settings-product-page.jpeg?alt=media\&token=396b190e-7d98-4d58-8303-e73072b7f98d)

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdu1t4mrPKQjMCR_No%2F-MHduT35N0f2DZkeI06p%2Ftheme-settings-product-page-config.png?alt=media\&token=402fd01e-a816-43f4-8a84-05997b998d51)

## Footer

You can go to the **Colors & Font sizes > Footer** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdvZG4kTqGtOM9OffJ%2F-MHdveoM-H2szbU1H98J%2Ftheme-settings-footer.jpeg?alt=media\&token=3f15959d-e9e9-4198-a5e0-28c7625e122f)

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdvk491S9iDbXRKiz6%2F-MHdvn7SVg-CgUYZ5ktt%2Ftheme-settings-footer.png?alt=media\&token=c036f2ab-5210-4b2b-9d59-92d8c403f111)

## Input fields

This config is used in all input fields. You can go to the **Colors & Font sizes > Input Fields** to config:

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHdvpSexpfdcnm_yfjb%2F-MHdx-NPi2VYIk8zonz7%2Fconfig-input-fields.png?alt=media\&token=c068a5a4-a88f-45fe-8c43-b1e2686aaec0)