MENU
EC-CUBEテンプレート販売ショップ
ログイン
会員様のログイン、新規会員登録はこちらから
カート

現在カート内に商品はございません。

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

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

更新 投稿
ECサイトは「モノが販売できればそれで良い」というわけでなく、やはりお店や商品の雰囲気にあったデザインにしていきたいですよね。 今回はそんなEC-CUBEの見た目を、デザインテンプレートを使って手軽に変身させてみましょう!

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

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

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

ご利用の手引き

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

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

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

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

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

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

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

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

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

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

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

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

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

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

写真や文章を変更しよう

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

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

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

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

オリジナルショップ完成

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

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

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

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

RECENT POST
  • ecサイト構築方法解説:初心者が知るべき費用と手順は?
  • EC-CUBE2から4へバージョンアップ。メリット・デメリット
  • EC-CUBEのバージョンアップ手順
  • EC-CUBEのバージョンアップを怠るとどうなる?危険を解説
  • EC-CUBEのバージョンアップ前に現在のデータディレクトリのチェックを!公開ディレクトリ編
  • EC-CUBEのバージョンアップ前に現在のセキュリティチェックを!アクセス制限編
null
商品一覧