EC-CUBEデザインテンプレートのインストール方法

デザインテンプレートとは

EC-CUBE4系では、標準インストールしたての状態でもPC/スマートフォンのどちらにもキレイに表示されるレスポンシブデザインになりました。 でもECサイトは「モノが販売できればそれで良い！」というわけでなく、やはりお店や商品の雰囲気にあったデザインにしていきたいですよね。

今回はそんなEC-CUBE4系の見た目を、デザインテンプレートを使って手軽に変身させてみましょう！

ご利用の手引き

弊社のデザインテンプレートには「ご利用の手引き」というマニュアル資料を入れております。
こちらにインストール方法や、各パーツの説明、活用方法なども掲載しているのでご活用下さいね。

デザインテンプレートをアップロード

EC-CUBEの管理画面から、オーナーズストア > テンプレート > アップロード と進んで頂くと、このようなページが表示されます。
ご購入いただいたデザインテンプレートのインストールファイルをアップロードして下さい。

（参考）
テンプレートコード：デザインテンプレートが設置されるフォルダ名となります。
テンプレート名：どのテンプレートを適用しているかを把握するための管理名称です。

入力できたら「登録」ボタン！

アップロードできました。

適用するテンプレートを切り替え

アップロードできたら、自動的に オーナーズストア > テンプレート > テンプレート一覧 のページに切り替わっています。

ちゃんと先ほど登録したテンプレート名が表示されていますね。それではこちらにラジオボタンを切り替えて、登録ボタンを押してみましょう。

ブロックのレイアウト設定

この時点でもうデザインは変更できているのですが、EC-CUBEの標準デザインとはパーツ（ブロック）の配置箇所が異なりますので調整していきます。

コンテンツ管理 > レイアウト管理 のページに進んでいただき、「トップページ用レイアウト」「下層ページ用レイアウト」をご利用の手引きに沿って設定していきましょう。

設定が完了したら、デザインテンプレートの適用が完了です！
フロントページを確認すると・・・

無事、デザインが変わりました！！

写真や文章を変更しよう

とはいえ、このままではまだまだオリジナルショップとは言えませんよね。
販売する商品やショップのイメージに合う画像や動画、文章に差し替えていく必要があります。

コンテンツ管理 > ページ管理 の編集したいページを選択するとHTMLソースが編集できますので、ここで文章や画像名を差し替えていきましょう。（ブロックも同じ要領で編集できます）

画像を差し替えたいときは、FTPソフトで画像をアップロードしていただくか・・・

コンテンツ管理 > ファイル管理 でもアップロードできます。

オリジナルショップ完成

ということで無事、オリジナルショップが完成しました！

EC-CUBEの場合、どうしても多少のHTMLの編集は必要とはなりますが、そのぶん自由度が高いとも言えます。
デザインする際にも制約が少ないので、オリジナリティの高いショップが作りやすいのも魅力ですね。

弊社のデザインテンプレートには初心者の方にも分かりやすいようにできるだけ編集箇所にはコメントを入れていたり、「ご利用の手引き」にも編集のポイントをいろいろと書いていますが、HTMLやCSSの知識がある方ならもっともっと活用していただけると思います。

もし手に負えないなーと思ったり、ショップの運営に専念したい！カスタマイズしたい！となった場合には、餅は餅屋ということでWeb制作会社様にお願いしてみましょう。よりクオリティの高いサイトができるかと思いますよ！