Skip to content
Logo
  • Support
  • My account
  • My cart
  • Magento 2 Extensions
  • Magento 1 Extensions
  • Magento Services
  • Packages
  • Special Offers
  • Blog
  • Contact Us

Home Magento 2 Extensions Magento 2 Social Login Pro Documentation v4 Developer Guide How to Add a Customer Profile Photo to the Site Header in Hyvä

    • Installation
    • Updating
    • Configuration
    • Integrations
    • How-To Guides
    • Troubleshooting
      • Adding Social Buttons Manually
      • Setting Custom Location for User Profile Photo
      • Adding Custom HTML
      • Setting Custom Design for Social Login Buttons On a Specific Form
      • Adding customer photo in the header in Hyvä
      Developer Guide & API Reference
    • Translation
    • Uninstalling
    Magento 2 Social Login Pro - Documentation

How to Add a Customer Profile Photo to the Site Header in Hyvä

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

Was this article helpful?
07/17/202307/18/2023
Search
Search
Generic selectors
Exact matches only
Search in title
Search in content
Contents
Company
  • Home
  • About Plumrocket Inc.
  • Customer Stories
  • Programs & Promotions
  • Careers
  • Contact Us
Legal
  • Terms of Service
  • Privacy Policy
  • Refund Policy
  • Cookie Policy
  • Privacy Center
  • Updates & Support Policy
Resources
  • Blog
  • FAQ
  • Documentation
  • Tutorials
Partners
  • Partner Program
  • Affiliate Program
  • Official Partners
Plumrocket Inc. © 2008 - 2025
Follow Us:
  • Facebook
  • Twitter
  • LinkedIn
  • YouTube