TOPページ下部バナーの編集方法

ご注意：こちらはテンプレート編集（上級者モード）のご案内になります。

差し替え手順

1. 差替用のバナーを作成し、画像ファイル管理からファイルをアップロードします。
   サンプルサイトではバナーサイズが横400px×縦340pxになります。
   [ショップ作成] → [画像ファイル管理]をクリックすると、画像ファイル管理がポップアップにて表示されます。
2. 作成したバナーを選択し[アップロード]ボタンをクリック。
3. ファイル確認から作成したバナーをクリックするとプレビュー画像と画像URLが表示されます。
   プレビュー画像が作成した差替用のバナーである事を確認します。
   1〜3を繰り返し、差替用のバナーを3つアップロードします。
4. アップロードが完了しましたら実際に差し替えていきます。
   [ショップ作成] → [デザイン]から利用中のテンプレートの[テンプレート編集]をクリックします。
5. [トップ]の[HTML・CSS編集]をクリックします。
6. 下記を変更します。変更箇所はページ内に1カ所
   （ページ内検索にて「TOPページ下部バナー」で探すと便利です。）
   
   はじめに、TOPページ下部バナーを表示させるため、コメントアウトしているテキストを2箇所削除します。
   
   1箇所目

     <!-- TOPページ下部バナーを表示する場合はこちらのコメントアウトを外してください。
   

   2箇所目

     TOPページ下部バナーを表示する場合はこちらのコメントアウトを外してください。 -->
   

   
   
   次に、下記を変更します。
   
   変更前：上から右、中央、左のバナーになります。

   <li class="p-bnr-list__item">
       <a class="u-img-scale" href="#">
           <img src="https://img.shop-pro.jp/tmpl_img/86/bnr-sample.png" alt="右側のバナー説明文" />
       </a>
   </li>
   <li class="p-bnr-list__item">
       <a class="u-img-scale" href="#">
           <img src="https://img.shop-pro.jp/tmpl_img/86/bnr-sample.png" alt="中央のバナー説明文" />
       </a>
   </li>
   <li class="p-bnr-list__item">
       <a class="u-img-scale" href="#">
           <img src="https://img.shop-pro.jp/tmpl_img/86/bnr-sample.png" alt="左側の画像説明文" />
       </a>
   </li>
   

   
   
   変更後：画像ファイル管理からバナーをクリックします。画像URLが表示されますのでコピーし、差し替えたい箇所へペーストします。

   <li class="p-bnr-list__item">
       <a class="u-img-scale" href="こちらにリンク先URLを記入">
           <img src="こちらに画像URLをペース" alt="右側のバナー説明文" />
       </a>
   </li>
   <li class="p-bnr-list__item">
       <a class="u-img-scale" href="こちらにリンク先URLを記入">
           <img src="こちらに画像URLをペース" alt="中央のバナー説明文" />
       </a>
   </li>
   <li class="p-bnr-list__item">
       <a class="u-img-scale" href="こちらにリンク先URLを記入">
           <img src="こちらに画像URLをペース" alt="左側の画像説明文" />
       </a>
   </li>
   

   リンク先URL、バナーの説明文もそれぞれ記入します。
7. 変更しましたら、[更新]ボタンをクリック。
8. サイトにアクセスして変更が反映されている事を確認します。