{"id":26746,"date":"2023-07-17T11:23:43","date_gmt":"2023-07-17T15:23:43","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=26746"},"modified":"2023-07-18T09:16:18","modified_gmt":"2023-07-18T13:16:18","slug":"adding-customer-photo-in-the-header-in-hyva","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva","title":{"rendered":"How to Add a Customer Profile Photo to the Site Header in Hyv\u00e4"},"content":{"rendered":"\n

After installing the Hyv\u00e4 theme, you may encounter an issue where the customer profile photo is not displayed when using the Magento 2 Social Login Pro<\/a> extension. We will walk you through three simple steps to add the customer photo to your website’s header in the Hyv\u00e4 theme, ensuring a seamless integration.<\/p>\n\n\n\n

Step 1. Copy the customer menu template to your Hyv\u00e4 theme<\/h2>\n\n\n\n

Please copy the following file:<\/p>\n\n\n\n

vendor\/hyva-themes\/magento2-default-theme\/Magento_Customer\/templates\/header\/customer-menu.phtml<\/kbd><\/p>\n\n\n\n

to the theme with the following path:<\/p>\n\n\n\n

app\/design\/frontend\/<theme_vendor>\/<theme_name>\/Magento_Customer\/templates\/header\/customer-menu.phtml<\/kbd><\/p>\n\n\n\n

Step 2. Add customer profile photo to the header<\/h2>\n\n\n\n

In order to add a custmer profile photo to the header, locate the following code in the Magento_Theme::templates\/header\/customer-menu.phtml<\/kbd> file:<\/p>\n\n\n\n

<\/div>
    <a\n        href="<?= $escaper->escapeHtmlAttr($escaper->escapeUrl($block->getUrl('customer\/account'))) ?>"\n        id="customer-menu"\n        class="block hover:text-black"\n        @click.prevent="open = true"\n        :aria-expanded="open ? 'true' : 'false'"\n        aria-label="<?= $escaper->escapeHtmlAttr(__('My Account')) ?>"\n    >\n        <?= $heroicons->userHtml('md:h-6 md:w-6', 32, 32, ['aria-hidden' => 'true']); ?>\n    <\/a><\/code><\/pre><\/div>\n\n\n\n
and replace it with the code below:<\/p>\n\n\n\n
<\/div>
    <a\n        href="<?= $escaper->escapeHtmlAttr($escaper->escapeUrl($block->getUrl('customer\/account'))) ?>"\n        id="customer-menu"\n        class="block hover:text-black rounded-full overflow-hidden"\n        @click.prevent="open = true"\n        :aria-expanded="open ? 'true' : 'false'"\n        aria-label="<?= $escaper->escapeHtmlAttr(__('My Account')) ?>"\n    >\n        <?= $block->getChildHtml('prCustomerPhoto') ?>\n        <?= $heroicons->userHtml('md:h-6 md:w-6', 32, 32, ['aria-hidden' => 'true']); ?>\n    <\/a><\/code><\/pre><\/div>\n\n\n\n
Step 3. Apply changes<\/h2>\n\n\n\n
This step is necessary only when the FPC cache is enabled or when using Magento in production mode. If either of these conditions applies to you, please run the following commands to apply the changes:<\/p>\n\n\n\n
<\/div>
php bin\/magento setup:static-content:deploy\nphp bin\/magento cache:flush<\/code><\/pre><\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
After installing the Hyv\u00e4 theme, you may encounter an issue where the customer profile photo is not displayed when using the Magento 2 Social Login Pro extension. We will walk you through three simple steps to add the customer photo to your website’s header in the Hyv\u00e4 theme, ensuring a seamless integration. Step 1. Copy … <\/p>\n
Continue reading “How to Add a Customer Profile Photo to the Site Header in Hyv\u00e4”<\/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,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[360],"tags":[],"class_list":["post-26746","post","type-post","status-publish","format-standard","hentry","category-magento-social-login-pro-v4-devguide","entry"],"yoast_head":"\nHow to Add a Customer Profile Photo to the Site Header in Hyv\u00e4 - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"After installing the Hyv\u00e4 theme, you may encounter an issue where the customer profile photo is not displayed when using the Magento 2 Social Login Pro\" \/>\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-social-login-pro\/v4\/devguide\/add-customer-photo-hyva\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Customer Profile Photo to the Site Header in Hyv\u00e4 - Plumrocket Documentation\" \/>\n<meta property=\"og:description\" content=\"After installing the Hyv\u00e4 theme, you may encounter an issue where the customer profile photo is not displayed when using the Magento 2 Social Login Pro\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-17T15:23:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T13:16:18+00:00\" \/>\n<meta name=\"author\" content=\"Plumrocket\" \/>\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=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Customer Profile Photo to the Site Header in Hyv\u00e4 - Plumrocket Documentation","description":"After installing the Hyv\u00e4 theme, you may encounter an issue where the customer profile photo is not displayed when using the Magento 2 Social Login Pro","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-social-login-pro\/v4\/devguide\/add-customer-photo-hyva","og_locale":"en_US","og_type":"article","og_title":"How to Add a Customer Profile Photo to the Site Header in Hyv\u00e4 - Plumrocket Documentation","og_description":"After installing the Hyv\u00e4 theme, you may encounter an issue where the customer profile photo is not displayed when using the Magento 2 Social Login Pro","og_url":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva","og_site_name":"Plumrocket Documentation","article_published_time":"2023-07-17T15:23:43+00:00","article_modified_time":"2023-07-18T13:16:18+00:00","author":"Plumrocket","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva#article","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva"},"author":{"name":"Plumrocket","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"headline":"How to Add a Customer Profile Photo to the Site Header in Hyv\u00e4","datePublished":"2023-07-17T15:23:43+00:00","dateModified":"2023-07-18T13:16:18+00:00","mainEntityOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva"},"wordCount":192,"articleSection":["Developer Guide"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva","url":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva","name":"How to Add a Customer Profile Photo to the Site Header in Hyv\u00e4 - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"datePublished":"2023-07-17T15:23:43+00:00","dateModified":"2023-07-18T13:16:18+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"description":"After installing the Hyv\u00e4 theme, you may encounter an issue where the customer profile photo is not displayed when using the Magento 2 Social Login Pro","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-customer-photo-hyva#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 Social Login Pro","item":"https:\/\/plumrocket.com\/magento-social-login-pro"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro"},{"@type":"ListItem","position":4,"name":"v4","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4"},{"@type":"ListItem","position":5,"name":"Developer Guide","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide"},{"@type":"ListItem","position":6,"name":"How to Add a Customer Profile Photo to the Site Header in Hyv\u00e4"}]},{"@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":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8","name":"Plumrocket","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/30d7e8cb4567485b56880a1658849a1252ac12806e8f95b3be71e986bf5eabee?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/30d7e8cb4567485b56880a1658849a1252ac12806e8f95b3be71e986bf5eabee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/30d7e8cb4567485b56880a1658849a1252ac12806e8f95b3be71e986bf5eabee?s=96&d=mm&r=g","caption":"Plumrocket"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26746","targetHints":{"allow":["GET"]}}],"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=26746"}],"version-history":[{"count":10,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26746\/revisions"}],"predecessor-version":[{"id":26765,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26746\/revisions\/26765"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=26746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=26746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=26746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}