After installing the Hyvä 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ä theme, ensuring a seamless integration.
Step 1. Copy the customer menu template to your Hyvä theme
Please copy the following file:
vendor/hyva-themes/magento2-default-theme/Magento_Customer/templates/header/customer-menu.phtml
to the theme with the following path:
app/design/frontend/<theme_vendor>/<theme_name>/Magento_Customer/templates/header/customer-menu.phtml
Step 2. Add customer profile photo to the header
In order to add a custmer profile photo to the header, locate the following code in the Magento_Theme::templates/header/customer-menu.phtml file:
<a
href="<?= $escaper->escapeHtmlAttr($escaper->escapeUrl($block->getUrl('customer/account'))) ?>"
id="customer-menu"
class="block hover:text-black"
@click.prevent="open = true"
:aria-expanded="open ? 'true' : 'false'"
aria-label="<?= $escaper->escapeHtmlAttr(__('My Account')) ?>"
>
<?= $heroicons->userHtml('md:h-6 md:w-6', 32, 32, ['aria-hidden' => 'true']); ?>
</a>and replace it with the code below:
<a
href="<?= $escaper->escapeHtmlAttr($escaper->escapeUrl($block->getUrl('customer/account'))) ?>"
id="customer-menu"
class="block hover:text-black rounded-full overflow-hidden"
@click.prevent="open = true"
:aria-expanded="open ? 'true' : 'false'"
aria-label="<?= $escaper->escapeHtmlAttr(__('My Account')) ?>"
>
<?= $block->getChildHtml('prCustomerPhoto') ?>
<?= $heroicons->userHtml('md:h-6 md:w-6', 32, 32, ['aria-hidden' => 'true']); ?>
</a>Step 3. Apply changes
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:
php bin/magento setup:static-content:deploy
php bin/magento cache:flush