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.
  2. wordpress woocommerce storefront set site identity customize appearance

    In your navigation menu click Appearance then Customize.

  3. wordpress woocommerce storefront customize header customize storefront header

    You will then be on the Storefront Customizer click the Header link.

  4. wordpress woocommerce storefront customize header add new background image

    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. wordpress woocommerce storefront customize header select header background color

    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.

    wordpress woocommerce storefront customize header header background color change

    When you choose a color it will show the changes immediately.

  6. wordpress woocommerce storefront customize header select header text color

    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.

    wordpress woocommerce storefront customize header change header text color

    You will see your new text color immediately.

  7. wordpress woocommerce storefront customize header change linked text color

    Click the Select Color link under Link color to change the color of linked text.

    wordpress woocommerce storefront customize header changed linked text color

    You will see the color change immediately.

  8. wordpress woocommerce storefront customize header publish storefront header changes

    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 and how they can simplify your website building and maintenance.

JB
John-Paul Briones

John-Paul is an Electronics Engineer that spent most of his career in IT. He has been a Technical Writer for InMotion since 2013.

More Articles by John-Paul

Was this article helpful? Let us know!