EC-CUBE4でトップページのロゴを画像に変更する

EC-CUBE4のトップページで表示されるメインのロゴ(ロゴというかショップ名)は
デフォルトでは店舗設定の基本設定にある「店名」がテキストで表示されます。
これをオリジナルのロゴやイラストなどの画像に変更する方法です。

まずは、表示したい画像を以下のディレクトリ以下にアップします。

EC-CUBEルート/html/user_data/assets/img/

管理画面左メニューから「コンテンツ管理」->「ブロック管理」->「ロゴ」の

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
<div class="ec-headerRole">
    <div class="ec-headerRole__title">
        <div class="ec-headerTitle">
            <div class="ec-headerTitle__title">
                <h1>
                    <a href="{{ url('homepage') }}">
                        {{ BaseInfo.shop_name }}
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>

こちらのコードを下記のように変更します。

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
<div class="ec-headerRole">
    <div class="ec-headerRole__title">
        <div class="ec-headerTitle">
            <div class="ec-headerTitle__title">
                <h1>
                    <a class="top_title" href="{{ url('homepage') }}">
                        <img src="{{ asset('/html/user_data/assets/img/アップした画像ファイル名') }}" alt="LOGO IMAGE" width="400" height="120">
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>