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

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

COLORSTOREはカラーミーキット専用のテンプレートとなっております。まず初めにカラーミーキットの追加を行います。

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

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

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

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

※もし追加可能数の上限に達している場合は変更してもよいテンプレートを削除して上記の操作を行って下さい。

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

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

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

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

共通エリアのHTML/CSS編集ボタンを押します。

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

共通エリアのテンプレートを編集ページのテキストエリアにコピーします。
テンプレート（templates）フォルダの中から1-global.htmlを選択してファイルを開きます。
ファイルを開いたら、テンプレートファイル内のコードをコピーし、テキストエリアにペーストして下さい。

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

同様にして他のエリアのHTML/CSSも貼付けていきます。

CSSスタイルの貼付けは、共通エリアとトップページのみです。これ以外のページ（CSSのみ編集できるページを除く）にあるCSSは削除して下さい。

• 1-global.css: 共通ページのCSS
• 1-global-option.css: 初心者モードで使えるスタイルオプションを適用するためのスタイル
• 2-top.html: トップページのHTML
• 2-top.css: トップページのCSS
• 3-product-list.html: 商品一覧ページのHTML
• 4-product-detail.html: 商品詳細ページのHTML
• 5-shop.html: 特定商取引ページのHTML
• 6-product-search.html: 商品検索結果ページのHTML
• 7-option.html: オプション在庫・値段表ページのHTML
• 8-privacy.html: プライバシーページのHTML

初心者モードのスタイルオプションを使用する場合

スタイルオプションを使用する場合は、1-global-option.cssのコードを共通ページのCSS編集エリアの下部に追加してください。

3.レスポンシブテンプレートをスマートフォンで表示するための設定

カラーミーショップの初期状態では、スマートフォンからアクセスするとスマートフォンテンプレートに切り替わります。
スマートフォンでもPC用テンプレートを表示するためには設定を変更する必要があります。

管理画面メニューのショップ作成->スマートフォンショップ設定をクリックします。

スマートフォン表示モード設定を、PC版表示に変更してください。

以上でインストール完了です。