ロゴ画像の設定

ロゴ画像を使用するには上級者モードの管理画面メニューから、ショップ作成->ショップ情報のページを開きます。

ショップ情報記入ページでショップロゴ画像のhttpモードをONにし、「ファイルを選択」ボタンからロゴ画像を選択します。

ロゴ画像がアップロードできたら、ショップ情報編集画面の下にある更新ボタンを押して設定を更新します。
ショップのトップページをリロードすると、先ほどアップロードした画像が表示されています。

これでロゴ画像の設定は完了です。

サイト説明文の設定

COLORSTOREのテンプレートにはサイト説明文を表示できます。

この部分を変更するにはテンプレートの編集ページを開き、テキストを書き換える必要があります。

書き換える場所は、共通ページのヘッダーにあります。この部分のテキストを表示したいテキストに書き換えます。

サイト説明文が不要の場合は、「ここにサイトの説明文を追加」のテキストを削除してください。

テキストを書き換えたら、更新ボタンを押して設定を保存します。その後ショップのトップページをリロードすると書き換えたテキストが表示されます。

これでサイト説明文の設定は完了です。

スライダー画像の設定（ver1.2からの設定方法）

COLORSTOREのテンプレートではスライドショーを使った画像スライダーに対応しています。
インストール直後は画像が設定されていないため、なにも表示されません。

まずはスライドショーに表示したい画像をアップロードします。
画像のアップロード方法は、カラーミーショップマニュアルのスライドショー設定をご覧ください。

テンプレートにはすでにスライドショータグが貼付けられているため、画像をアップロードした時点でショップにスライドショーが表示されます。

スライドショー設定の変更方法

テンプレートですでにスライドショータグを設置していますが、アニメーションスピードなどの設定を変更することができます。

変更するには、スライドショー設定画面下部にある設定を変更（スライド方法はフェードのみ対応）した後、出力用HTMLタグをコピーします。

コピーしたタグを共通ページに設置されているスライドショータグと入れ替えます。

これでスライダーの設定は完了です。

スライダー画像の設定（ver1.1までの設定方法）

ver1.1までで採用していたFlexsliderは動作が不安定なため、カラーミー公式のスライドショーに変更となりました。

COLORSTOREのテンプレートではFlexsliderを使った画像スライダーが用意されています。
インストール直後は画像が設定されていないため、正しく表示されません。

まずはスライダーに表示したい画像をカラーミーショップにアップロードします。
画像のアップロード方法は、カラーミーショップマニュアルの画像ファイル管理をご覧ください。

画像を正しく表示するには、スライダーが設置されたページにあるimgタグの画像URLを設定する必要があります。
書き換える場所はテンプレートによって異なりますが、共通ページもしくはトップページに設置されているFlexsliderブロックにあります。

Flexsliderブロックの冒頭部分はjavascriptが記述されているため少し長くなっていますが、
Flexsliderブロックのimgタグに「画像１のURLをここに記述」のようなテキストがあるので、
この部分を先ほどアップロードした画像のURLと変更します。

上記の画像のように書き換える場所は１つの画像につき２カ所あります。２カ所とも同じURLを貼付けてください。

まず、アップロードした１つめの画像のURLをコピーします。

その後「画像１のURLをここに記述」のテキストを削除し、先ほどコピーしたURLを貼付けます。

もう一方にも同じURLを貼付けます。

これで１つめの画像貼り付けが完了しました。
残りの画像も同様の方法で貼付けてください。画像は４つ表示することができます。

スライダー画像を４つではなく、２つだけ表示したい場合は、スライダー画像の下部に表示されるサムネイル部分を不要な数だけ削除します。
初期状態では以下の画像の用に４つ設定できる場所があります。

表示したい画像数を減らすには、liタグごと削除してください。以下の画像では３枚めと４枚めを削除しています。

これでスライダーの設定は完了です。

バナー画像の設定

COLORSTOREではバナーを設置できるブロックを用意しています。設置できる場所はヘッダー、メインエリアの2カ所です。

ヘッダーバナーは共通ページのヘッダー部分にあり、インストール直後は以下のように表示されます。

ヘッダーバナーを正しく表示するには、共通ページのテンプレートにあるimgタグのURLを書き換える必要があります。
共通ページの編集画面を開くと、HTML編集エリア内にヘッダーバナーがあります。

「バナー画像のURLをここに記述」のテキストを削除し、Flexsliderと同様の方法で画像URLを貼付けます。
画像のアップロード方法は、カラーミーショップマニュアルの画像ファイル管理をご覧ください。

画像を取得するには、管理画面メニューのショップ作成->画像ファイル管理をクリックし、画像管理画面で表示したい画像を選択して表示されたURLをコピーします。

ヘッダーバナーの設置はこれで完了です。

メイン用バナーは１〜３カラムのレイアウトを選択できます。必要に応じて複製や削除を行って下さい。

１カラムのバナーを３つ表示するには以下のようにします。タイトル部分はテキストの変更ができます。不要の場合は削除して下さい。

<!-- バナー メイン -->
<div class="ui-section">
  <div class="block-banner-main">
    <div class="section-title">
      <h2 class="title">キャンペーン</h2>
    </div>
    <div class="section-body">
      <div class="block-banner">
        <a href="#"><img src="バナー画像のURLをここに記述" alt="banner-1col" class="img-responsive" /></a>
      </div>
      <div class="block-banner">
        <a href="#"><img src="バナー画像のURLをここに記述" alt="banner-1col" class="img-responsive" /></a>
      </div>
      <div class="block-banner">
        <a href="#"><img src="バナー画像のURLをここに記述" alt="banner-1col" class="img-responsive" /></a>
      </div>
    </div>
  </div>
</div>
<!-- /バナー メイン -->

以上でテンプレートの初期設定は完了です。