スライドショー設定

スライドショー機能とは

ショップのトップページに大きな画像を貼りつけて、商品やショップの雰囲気を表現することができます。
スライドショーを設定したサンプルショップは こちら

※本機能を利用したスライドショーの対応ブラウザは、Firefox, Chrome, Safari, iOS, Android, IE7+となります。

※HTML、CSSの編集に関しましては、サポート対象外となりますので、テンプレートを編集の際には必ず「コピー」機能にてバックアップをお願いいたします。

ショップ作成 > デザイン設定 > テンプレートをコピー【追加】ボタンを押すことで、利用中のテンプレートをコピーできます。

下記ページにて、編集・確認することができます。

スライドショーを使用するまでの手順

1.スライドショー設定画面へ

管理画面「ショップ作成>デザイン設定」をクリック。
左メニューの「スライドショー設定」をクリック。

2.スライドショー用の画像をアップロードする

  1. スライドショーで使いたい画像を【ここにファイルをドラッグ】と書かれたグレーの部分に移動(ドラッグ)してマウスを離す(ドロップ)
    • 一度に複数枚の画像を登録できます。
  2. 上の1で登録できない場合、【ファイルを追加】ボタンを押して画像を追加することも可能です。
    • アップロードできる1ファイル当たりのサイズ上限は2MBまでとなります。
    • 画像は10枚まで登録できます。

・登録された画像の中で最も大きいサイズに合わせて左寄せで表示される仕様となります。
・推奨サイズは特にございませんが、画像の縦横比を合わせことで余白なく表示されますので、縦横比を合わせてアップロードすることをお薦めいたします。

 

スライドショー用の画像が追加されました。

  1. リンクURLを入力すると画像にリンクを貼ることができます。
    セールページやブログ等への誘導やバナー表示としてもご活用いただくことが可能です。
  2. 字幕を入力すると画像の下部分に文字が表示されます。
  3. アップロードした画像を削除した場合には【×】ボタンをクリックしてください。

画面下にある【保存】ボタンを押します。

3.表示時間、スライド方法を設定する

実際のショップに表示するスライドショーの詳細な設定を行います。

  1. スライドの停止時間と早さを設定します。数字が小さなるほどスライドの表示スピードが早くなります。
    変更する場合は、半角数字を入れてエンターキーを押してください。
    初期設定は停止時間【2】秒(sec)スライド時の早さ【1】秒(sec)となります。
  2. スライド方法を選択します。
  3. スライドショー用の画像をアップロードした際に登録した字幕の表示設定です。字幕を非表示にしたい場合には、
    【なし】を選択してください。
  4. 上の1・2・3で設定したスライドの動きを確認できます。
    • 表示サンプルはアップロードした画像が表示されるものではありません。
    • 表示スピードやスライドの動きを確認するためのサンプルとなります。

4.出力用タグをショップテンプレートに設定する

Image

【3】で設定したスライドショーをショップに表示するためにHTMLタグが生成されました。
出力用HTMLタグをコピーして、デザイン設定の「トップ」に貼りつけます。

管理画面の「ショップ作成>デザイン設定」へ

「編集するテンプレートを選択」画面の「2 トップ >【HTML/CSS編集】」をクリックします。

「テンプレート編集」画面が開きます。HTML編集内の任意の箇所(ここでは最上部)に、コピーした「出力用HTMLタグ」を貼り付けます。
【更新】ボタンを押して設定を完了します。

【プレビュー】か右上の【ショップを表示】を押して、ショップでの表示を確認してください。

スライドショーの設定方法は以上となります。