テンプレートのインストール方法

テンプレートのインストールは初心者モードでも可能ですが、一部操作で上級者モードでの操作が必要になるため、上級者モードでの方法を記載しています。

1.新規テンプレートの作成

カラーミーショップ向けテンプレートはカラーミーキットをベースにしたテンプレートです。まず初めにカラーミーキットの追加を行います。

管理画面メニューのショップ作成->デザイン設定画面からテンプレートの追加ボタンを押して下さい。

新規テンプレートの作成1

次の画面で無料テンプレートを選択します。

新規テンプレートの作成2

無料テンプレートの中からカラーミーキットを探して追加します。

新規テンプレートの作成3

カラーミーキットのテンプレートが追加されればテンプレートの追加は完了です。

新規テンプレートの作成4

2.テンプレートコードのコピー

テンプレートが追加された直後はカラーミーキットのデフォルト状態となっています。ここにテンプレートコードをコピーしていきます。

追加したテンプレートのカスタマイズボタンを押します。

テンプレートコードのコピー1

ボタンを押すと追加したテンプレートのカスタマイズページが開きます。

まずは共通ページの編集を行いたいので、共通の行にある「HTML・CSS編集」のリンクを押します。

テンプレートコードのコピー2

共通ページのHTMLとCSSの編集画面が表示されます。

テンプレートコードのコピー3

ダウンロードしたzipファイルを解凍し、フォルダの中から1_global.htmlを選択してファイルを開きます。

テンプレートコードのコピー4

※htmlファイルはダブルクリックするとブラウザで開いて文字化けしてしまうため、ファイルを開く際はコードエディタをご利用ください。

コピー&ペーストのやり方について詳しくは「コードエディタを使ったコピー&ペーストのやり方」をご覧ください。

ファイルを開いたら、テンプレートファイル内のコードをコピーし、HTML編集エリアにペーストして下さい。

テンプレートコードのコピー5

ペーストできたら保存ボタンを押して保存します。

テンプレートコードのコピー6

同様にして他のページのHTML/CSSも貼付けていきます。

  • 1_global.css: 共通ページのCSS編集エリアにコピー
  • 2_top.html: トップページのHTML編集エリアにコピー
  • 3_list.html: 商品一覧ページのHTML編集エリアにコピー
  • 4_detail.html: 商品詳細ページのHTML編集エリアにコピー
  • 5_shop.html: 特定商取引ページのHTML編集エリアにコピー
  • 6_product-search.html: 商品検索結果ページのHTML編集エリアにコピー
  • 7_option.html: オプション在庫・値段表ページのHTML編集エリアにコピー
  • 8_privacy.html: プライバシーページのHTML編集エリアにコピー

※CSSスタイルの貼付けは、共通ページのみです。これ以外のページ(CSSのみ編集できるページを除く)にあるCSSは削除して下さい。

これでテンプレートのインストールは完了です。続けて初期設定を行います。