{"id":24105,"date":"2021-09-13T05:41:51","date_gmt":"2021-09-13T09:41:51","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=24105"},"modified":"2021-11-18T05:36:29","modified_gmt":"2021-11-18T10:36:29","slug":"how-to-customize-magento-2-amp-header","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block","title":{"rendered":"How to Customize Magento 2 AMP Header"},"content":{"rendered":"\n

The Magento 2 AMP Theme One<\/a> provides different templates for the AMP header layout. The “Template 1”, in addition to the search, menu, wishlist, cart, and other icons, contains the Contact Us drop-down block that allows you to provide company contact information. In this article, you will learn how to customize the Contact Us block for your AMP header.<\/p>\n\n\n\n

Configuring Contact Us Block for AMP Header<\/h2>\n\n\n\n

The Contact Us block of the AMP header is a regular CMS block, which you can edit and provide your custom data. Please follow the steps below to learn how to customize it.<\/p>\n\n\n\n

\n

Step-by-step guide:<\/p>\n\n\n\n

  1. In the main Magento menu, go to Content<\/strong> -> Elements -> Blocks<\/strong>.<\/li>
  2. In the Search input of the Blocks grid, search for “amp<\/em>“.<\/li>
  3. Find the AMP Header Contact Us block with the pr_amp_header_template_1_contact_us<\/strong> identifier and click Select<\/strong> -> Edit<\/strong>.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
    \"Magento<\/figure>\n\n\n\n
    \n

    Step-by-step guide:<\/p>\n\n\n\n

    1. Scroll down to the last section to edit the AMP content. Here you are provided with the template to display your company’s phone number and email address in the Contact Us block of your AMP header. You can edit or add additional data to it. Please note<\/strong>: you can leave the field empty to remove the Contact Us block from the header template.<\/li>
    2. Click Save<\/strong> once all changes have been made to this CMS block.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
      \"Magento<\/figure>\n\n\n\n
      \n

      Extra Information:<\/strong><\/p>\n\n\n\n

      1. The “tel:<\/strong>” protocol creates a click-to-call link that makes it easier for your website visitors to reach your company. Once clicked, the browser launches the phone app and adds the number to the display.<\/li>
      2. The “mailto:<\/strong>” protocol opens the default email app or loads a web client with the pre-filled \u201cTo:\u201d field.<\/li>
      3. You can use other HTML protocols, such as messaging (sms:<\/strong>), fax (fax:<\/strong>), Skype call (callto:<\/strong>), etc.<\/li><\/ol>\n\n\n\n

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

        All of these protocols are used in the same way. However, what exactly happens after clicking the links depends on the default settings of the user device and browser.<\/p>\n<\/div><\/div>\n\n\n\n

        <\/p>\n","protected":false},"excerpt":{"rendered":"

        The Magento 2 AMP Theme One provides different templates for the AMP header layout. The “Template 1”, in addition to the search, menu, wishlist, cart, and other icons, contains the Contact Us drop-down block that allows you to provide company contact information. In this article, you will learn how to customize the Contact Us block … <\/p>\n

        Continue reading “How to Customize Magento 2 AMP Header”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[330],"tags":[],"yoast_head":"\nHow to Customize Magento 2 AMP Header - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"The Magento 2 AMP Theme One provides different templates for the AMP header layout. The "Template 1", in addition to the search, menu, wishlist, cart, and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize Magento 2 AMP Header\" \/>\n<meta property=\"og:description\" content=\"The Magento 2 AMP Theme One provides different templates for the AMP header layout. The "Template 1", in addition to the search, menu, wishlist, cart, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-13T09:41:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-18T10:36:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/09\/magento-2-amp-extension-customizing-header-cms-block-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Customize Magento 2 AMP Header - Plumrocket Documentation","description":"The Magento 2 AMP Theme One provides different templates for the AMP header layout. The \"Template 1\", in addition to the search, menu, wishlist, cart, and","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:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block","og_locale":"en_US","og_type":"article","og_title":"How to Customize Magento 2 AMP Header","og_description":"The Magento 2 AMP Theme One provides different templates for the AMP header layout. The \"Template 1\", in addition to the search, menu, wishlist, cart, and","og_url":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block","og_site_name":"Plumrocket Documentation","article_published_time":"2021-09-13T09:41:51+00:00","article_modified_time":"2021-11-18T10:36:29+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/09\/magento-2-amp-extension-customizing-header-cms-block-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block#primaryimage","inLanguage":"en-US","url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/09\/magento-2-amp-extension-customizing-header-cms-block-1.png","contentUrl":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2021\/09\/magento-2-amp-extension-customizing-header-cms-block-1.png","width":1206,"height":755},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block","name":"How to Customize Magento 2 AMP Header - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block#primaryimage"},"datePublished":"2021-09-13T09:41:51+00:00","dateModified":"2021-11-18T10:36:29+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"description":"The Magento 2 AMP Theme One provides different templates for the AMP header layout. The \"Template 1\", in addition to the search, menu, wishlist, cart, and","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides\/header-cms-block#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 AMP","item":"https:\/\/plumrocket.com\/magento-amp"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-amp"},{"@type":"ListItem","position":4,"name":"v3","item":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3"},{"@type":"ListItem","position":5,"name":"How-to Guides","item":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/userguides"},{"@type":"ListItem","position":6,"name":"How to Customize Magento 2 AMP Header"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","caption":"Plumrocket"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/24105"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=24105"}],"version-history":[{"count":13,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/24105\/revisions"}],"predecessor-version":[{"id":25108,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/24105\/revisions\/25108"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=24105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=24105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=24105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}