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

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

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

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

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

install1

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

install2

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

install3

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

install4

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

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

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

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

install5

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

install6

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

install7

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

install8

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

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

install9

同様にして他のエリアの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用テンプレートを表示するためには設定を変更する必要があります。

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

install11

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

install12

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