>[Fixed] Fail to Upload Transactional Email Logo in Magento 2.1

[Fixed] Fail to Upload Transactional Email Logo in Magento 2.1

Whenever customers receive an order confirmation email or a password reset email, they need a sign to know that it has been sent from your store. That time, they might pay attention to the email logo. Uploading a logo to every transactional email, hence, is a must task. Unfortunately, in Magento 2.1, many merchants run into a problem, say, the image uploaded is missing.

In this article, we show you how to fix “Fail to Upload Transactional Email Logo in Magento 2.1” right!

When Does This Issue Happen?

It might occur when you try to upload a transactional email logo by following Admin ⇒  Content ⇒  Design ⇒ Configuration ⇒ Select Your Current Theme

Under Transactional Emails in the Logo Image field, please Upload your logo.  You will see the logo to be displayed as follow:

upload Magento 2 transactional email logo

After you save the logo, however, it shows a missing image.

upload Magento 2 transactional email logo failed

Please right click and select Inspect elements, you can check the URL of the logo. This URL varies based on your uploading. Mine is http://mywebsite.com/pub/media/email/logo/stores/1/mylogo.png

If you go to this URL, it turns out a 404 Page. And, when following the folder pub/media/email/logo/stores/1/ this directory does not exist.

Magento 2 directory not found

It refers that Magento does not save your logo in the directory as above. In fact, the logo is saved in the pub/media/logo/stores/1/

Where Magento 2 actually saves the email logo uploaded

How to Fix It Right?

To fix this issue, you can choose either of the following solutions.

Solution 1: Override the default email logo of Magento 2 using a theme

Step 1:

Go to the app/design/frontend/YourVendorName/YourThemeName/Magento_Email/web/ directory in your custom theme.

Step 2:

Rename the logo you want to upload to “logo_email.png” (it is the default Magento logo name), then copy this image to the folder has just been created.

Solution 2: Create a module and change upload_dir

Step 1: Create the registration.php file

In the app/code/Bss/TransactionEmail/registration.php please add the following code:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::MODULE,

    'Bss_TransactionEmail',

    __DIR__

);

Step 2: Create the module.xml file

In the app/code/Bss/TransactionEmail/etc/module.xml add the code:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

    <module name="Bss_TransactionEmail" setup_version="1.0.0">

        </sequence>

            <module name="Magento_Theme"/>

        </sequence>

    </module>

</config>

Step 3: Create the di.xml file

In the app/code/Bss/TransactionEmail/etc/di.xml add the code:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <preference for="Magento\Theme\Model\Design\Backend\Logo" type="Bss\TransactionEmail\Model\Design\Backend\Logo"/>

</config>

Step 4: Create the Logo.php file

In the app/code/Bss/TransactionEmail/Model/Design/Backend/Logo.php add the code:

<?php

namespace Bss\TransactionEmail\Model\Design\Backend;

 

class Logo extends \Magento\Theme\Model\Design\Backend\Image

{

    const UPLOAD_DIR = 'email/logo';

    protected function _getUploadDir()

    {

        return $this->_mediaDirectory->getRelativePath($this->_appendScopeInfo(self::UPLOAD_DIR));

    }

}

Run following command in your terminal:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

php bin/magento cache:flush

Now, go to your website and order a product and check whether the order confirmation email has the new logo image.

That’s all for today and I hope it is helpful for you.

P/S: Stay tuned with our Magento knowledge base series to get more and more useful information.

< Previous Post
Next Post >