EC-CUBE4ダウンロード版でヘッダーロゴを変更する

オープンソースのECサイトで有名な「E-CUBE」。インストールしただけで相当見栄えの良いサイトが手に入ります。

もちろん、そこから独自にカスタマイズということになりますが、「管理画面の中をいくら探してもロゴ設定できるところがないんだけど…」と頭を抱えた人も多いかと。

この記事はそんな悩みを抱えている方と、自分への備忘録として記事化しております。

EC-CUBE管理画面からロゴ画像をアップ

管理画面にログインし、コンテンツ管理＞ファイル管理からロゴ画像ファイルをアップしましょう。

コンテンツ管理＞ファイル管理

アップしたロゴ画像を反映する

コンテンツ管理＞ブロック管理に【ロゴ】というブロックが存在しますので、そちらをクリックしてください。

コンテンツ管理＞ブロック管理　【ロゴ】

{#
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>

17行目に変更ポイントがあります。この行を下記に変更しましょう。

<img src="{{ asset('/html/user_data/logo.png')}}" alt="EC-CUBE SHOP demo">

完成形はこんな感じです

{#
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') }}">
                        <img src="{{ asset('/html/user_data/logo.png')}}" alt="demo" class="">
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>

class名も付与できますので、空白のものを入れてます。お好みのclass名を入れてサイズなど調整していってください。

まとめ

登録後にトップページを確認して、無事に反映されていればOKです。このような備忘録記事は今後も随時更新していきます。