縦帯バナーの差替方法

ご注意:こちらの設定方法は上級者モードでのご案内になります。初心者モードをご利用中の場合は、上級者モードへの切替をお願いいたします。【切替方法はこちら


PACKではサイトへ縦帯バナーを設置する事ができます。(サンプルサイトでは画面左のセールバナー)
ここではバナーの差替方法を解説します。
※スマートフォンでは表示されません。

  1. 初めにバナーを設定します。
    縦帯バナーを作成し、画像ファイル管理からファイルをアップロードします。サンプルサイトではバナーサイズが横60px×縦500pxになります。
    [ショップ作成] → [画像ファイル管理]をクリックすると、画像ファイル管理がポップアップにて表示されます。
  2. 作成したバナーを選択し[アップロード]ボタンをクリック。
  3. ファイル確認から作成したバナーをクリックするとプレビュー画像と画像URLが表示されます。プレビュー画像が作成した差替用のバナーである事を確認します。
    画像URLを全選択しコピーしておきます。
  4. [ショップ作成] → [デザイン設定]から利用中のテンプレートの[デザイン編集]をクリックします。
    共通の[項目編集]ボタンをクリックし、縦帯バナー画像の項目へ先程コピーした画像URLをペーストして[更新]ボタンをクリックします。
  5. 次にURLを設定します。
    [ショップ作成] → [デザイン設定] → PACKの[デザイン編集]から共通の[HTML/CSS編集]をクリック
  6. 下記を変更します。変更箇所はページ内に1カ所
    (ページ内検索にて「縦帯バナー - 設置箇所」で探すと便利です。)

    変更前:
    <div class="banner-belt__section visible-desktop">
      <a href=""></a>
    </div>
    
    変更後:
    <div class="banner-belt__section visible-desktop">
      <a href="こちらにリンク先URLを記入"></a>
    </div>
    
  7. 変更しましたら、[更新]ボタンをクリック。
  8. サイトにアクセスして変更が反映されている事を確認します。