サイドバーバナーの差替方法

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

SHELF（有料版）ではサイトへサイドバーバナーを設置する事ができます。（サンプルサイトではサイドメニュー下のバナー2本）
ここではサイドバーバナーの差替方法を解説します。

初めにバナーを設定します。
サイドバーバナーを作成し、画像ファイル管理からファイルをアップロードします。サンプルサイトではバナーサイズが横270px×縦270pxになります。
[ショップ作成] → [画像ファイル管理]をクリックすると、画像ファイル管理がポップアップにて表示されます。
作成したバナーを選択し[アップロード]ボタンをクリック。
ファイル確認から作成したバナーをクリックするとプレビュー画像と画像URLが表示されます。プレビュー画像が作成した差替用のバナーである事を確認します。
画像URLを全選択しコピーしておきます。
[ショップ作成] → [デザイン設定] → 利用中のテンプレートの[デザイン編集]から共通の[HTML/CSS編集]をクリックします。

下記を変更します。変更箇所はページ内に1カ所
（ページ内検索にて「サイドバーバナー - 差替箇所」で探すと便利です。）

変更前：

<div class="section__block banner-sidebar__section">
  <ul>
    <li>
      <a href="">
        <img src="//img.shop-pro.jp/tmpl_img/80/img_sidebar_bnr.png" alt="" />
      </a>
    </li>
    <li>
      <a href="">
        <img src="//img.shop-pro.jp/tmpl_img/80/img_sidebar_bnr.png" alt="" />
      </a>
    </li>
  </ul>
</div>

変更後：こちらに先程コピーした画像URLををペーストし、リンクURL・代替テキストを記入します。

<div class="section__block banner-sidebar__section">
  <ul>
    <li>
      <a href="リンク先URL">
        <img src="こちらに画像URLを記入" alt="代替テキスト" />
      </a>
    </li>
    <li>
      <a href="リンク先URL">
        <img src="こちらに画像URLを記入" alt="代替テキスト" />
      </a>
    </li>
  </ul>
</div>