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

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

3 min read

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 Magento Transactional Email Logo in 2.1” right!

When Does This Issue Happen?

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

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

magento-2-custom-module-image-upload-frontend

CHECK NOW >>> Magento 2 Admin Email Notification extension

After you save the Magento 2 email 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-custom-module-image-upload-frontend-example

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 Magento 2 email logo 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 that 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 Magento transactional email logo troubleshooting 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. 

BSS Commerce is one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bring high-quality products and services to optimize our business effectively.

CONTACT NOW to let us know your problems. We are willing to support you every time.

< Previous Post
Next Post >