---
title: "How to Customize your WordPress Header in the Storefront Theme"
description: "As we continue our WordPress series on the Storefront theme, we will now show you how to customize your WordPress Header in the Storefront theme. First, we will help you change the header background..."
url: https://www.inmotionhosting.com/support/edu/wordpress/themes/customize-header/
date: 2018-02-09
modified: 2020-12-17
author: "InMotion Hosting Contributor"
categories: ["Themes"]
type: post
lang: en
---

# How to Customize your WordPress Header in the Storefront Theme

As we continue our WordPress series on the Storefront theme, we will now show you how to **customize your WordPress Header in the Storefront** theme. First, we will help you change the header *background image*. Then, guide you through changing the *background*, *text*, and *link* colors. We will include examples of how changed header areas will look.

## Customize Storefront Header

1. [Log into your WordPress Dashboard](https://www.inmotionhosting.com/support/edu/wordpress/logging-into-wordpress-dashboard/).
2. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png) In your navigation menu click **Appearance** then **Customize**.
3. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_customize-storefront-header.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_customize-storefront-header.png) You will then be on the *Storefront Customizer* click the **Header** link.
4. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_add-new-background-image.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_add-new-background-image.png) If you want to upload a background image for your header, click the **Add new image** button. Then, **upload** your image or choose it from the *Media Library* if it was uploaded previously. If you do *not* want to use a *header background image* proceed to the next step.
5. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_select-header-background-color.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_select-header-background-color.png) Under *Background color* click the **Select Color** button to change your header background color. If you do *not* want to change the color of your *header background* proceed to the next step. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_header-background-color-change.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_header-background-color-change.png) When you choose a color it will show the changes immediately.
6. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_select-header-text-color.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_select-header-text-color.png) Click the **Select Color** button under *Text color* to change the color of your header text. If you do *not* want to change the color of your *header text* proceed to the next step. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_change-header-text-color.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_change-header-text-color.png) You will see your new text color immediately.
7. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_change-linked-text-color.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_change-linked-text-color.png) Click the **Select Color** link under *Link color* to change the color of linked text. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_changed-linked-text-color.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_changed-linked-text-color.png) You will see the color change immediately.
8. [![](https://www.inmotionhosting.com/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_publish-storefront-header-changes.png)](/support/wp-content/uploads/2018/02/wordpress_woocommerce_storefront_customize-header_publish-storefront-header-changes.png) Click the **Publish** button to save any changes you have made.

Congratulations, now you know how to **customize your WordPress Header in the Storefront** theme! In the next guide, we will show you how to how to customize your footer in the Storefront theme.

Learn more about the power of [WordPress Themes](https://www.inmotionhosting.com/support/edu/wordpress/themes/) and how they can simplify your website building and maintenance.