{"id":4385,"date":"2018-02-09T17:54:58","date_gmt":"2018-02-09T17:54:58","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2018\/02\/09\/customize-header\/"},"modified":"2020-12-17T13:36:50","modified_gmt":"2020-12-17T18:36:50","slug":"customize-header","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/","title":{"rendered":"How to Customize your WordPress Header in the Storefront Theme"},"content":{"rendered":"

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

<\/a><\/p>\n

Customize Storefront Header<\/h2>\n
    \n
  1. Log into your WordPress Dashboard<\/a>.<\/li>\n
  2. \"\"<\/a>\n
    <\/div>\n

    In your navigation menu click Appearance<\/b> then Customize<\/b>.<\/p>\n

    <\/div>\n<\/li>\n
  3. \"\"<\/a>\n
    <\/div>\n

    You will then be on the Storefront Customizer<\/em> click the Header<\/b> link.<\/p>\n

    <\/div>\n<\/li>\n
  4. \"\"<\/a>\n
    <\/div>\n

    If you want to upload a background image for your header, click the Add new image<\/b> button. Then, upload<\/b> your image or choose it from the Media Library<\/em> if it was uploaded previously. If you do not<\/em> want to use a header background image<\/em> proceed to the next step.<\/p>\n

    <\/div>\n<\/li>\n
  5. \"\"<\/a>\n
  6. \"\"<\/a>\n
  7. \"\"<\/a>\n
  8. \"\"<\/a>\n
    <\/div>\n

    Click the Publish<\/b> button to save any changes you have made.<\/p>\n

    <\/div>\n<\/li>\n<\/ol>\n

    Congratulations, now you know how to customize your WordPress Header in the Storefront<\/strong> theme! In the next guide, we will show you how to how to customize your footer in the Storefront theme.<\/p>\n\n

    Learn more about the power of WordPress Themes<\/a> and how they can simplify your website building and maintenance.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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 Read More ><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4380],"tags":[],"class_list":["post-4385","post","type-post","status-publish","format-standard","hentry","category-themes"],"acf":[],"yoast_head":"\nHow to Customize your WordPress Header in the Storefront Theme | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn how to customize the header of your WooCommerce store using the Storefront theme in WordPress. This helps you set up your brand and modify the header to suit your online business.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize your WordPress Header in the Storefront Theme | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Learn how to customize the header of your WooCommerce store using the Storefront theme in WordPress. This helps you set up your brand and modify the header to suit your online business.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-09T17:54:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-17T18:36:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b\"},\"headline\":\"How to Customize your WordPress Header in the Storefront Theme\",\"datePublished\":\"2018-02-09T17:54:58+00:00\",\"dateModified\":\"2020-12-17T18:36:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/\"},\"wordCount\":298,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png\",\"articleSection\":[\"Themes\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/\",\"name\":\"How to Customize your WordPress Header in the Storefront Theme | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png\",\"datePublished\":\"2018-02-09T17:54:58+00:00\",\"dateModified\":\"2020-12-17T18:36:50+00:00\",\"description\":\"Learn how to customize the header of your WooCommerce store using the Storefront theme in WordPress. This helps you set up your brand and modify the header to suit your online business.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png\",\"width\":238,\"height\":356},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Customize your WordPress Header in the Storefront Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/john-paul\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Customize your WordPress Header in the Storefront Theme | InMotion Hosting","description":"Learn how to customize the header of your WooCommerce store using the Storefront theme in WordPress. This helps you set up your brand and modify the header to suit your online business.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/","og_locale":"en_US","og_type":"article","og_title":"How to Customize your WordPress Header in the Storefront Theme | InMotion Hosting","og_description":"Learn how to customize the header of your WooCommerce store using the Storefront theme in WordPress. This helps you set up your brand and modify the header to suit your online business.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2018-02-09T17:54:58+00:00","article_modified_time":"2020-12-17T18:36:50+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b"},"headline":"How to Customize your WordPress Header in the Storefront Theme","datePublished":"2018-02-09T17:54:58+00:00","dateModified":"2020-12-17T18:36:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/"},"wordCount":298,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png","articleSection":["Themes"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/","name":"How to Customize your WordPress Header in the Storefront Theme | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png","datePublished":"2018-02-09T17:54:58+00:00","dateModified":"2020-12-17T18:36:50+00:00","description":"Learn how to customize the header of your WooCommerce store using the Storefront theme in WordPress. This helps you set up your brand and modify the header to suit your online business.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2018\/02\/wordpress_woocommerce_storefront_set-site-identity_customize-appearance.png","width":238,"height":356},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/themes\/customize-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Customize your WordPress Header in the Storefront Theme"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/john-paul\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=4385"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4385\/revisions"}],"predecessor-version":[{"id":65539,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4385\/revisions\/65539"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=4385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=4385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=4385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}