フッターバナーの差替方法(PCおよびスマートフォン共通)

  1. 差替用のバナーを作成し、画像ファイル管理からファイルをアップロードします。サンプルサイトではバナーサイズが横460px×縦280pxになります。
    [ショップ作成] → [画像ファイル管理]をクリックすると、画像ファイル管理がポップアップにて表示されます。
  2. 作成したバナーを選択し[アップロード]ボタンをクリック。
  3. ファイル確認から作成したバナーをクリックするとプレビュー画像と画像URLが表示されます。プレビュー画像が作成した差替用のバナーである事を確認します。
    1〜3を繰り返し、差替用のバナーを4つアップロードします。
  4. アップロードが完了しましたら実際に差し替えていきます。
    [ショップ作成] → [デザイン設定] → MODEの[デザイン編集]から共通の[HTML/CSS編集]をクリック
  5. 下記を変更します。変更箇所はページ内に1カ所
    (ページ内検索にて「フッターバナー - 差替箇所」で探すと便利です。)

    変更前:
    <li class="col col-sm-6 col-lg-3"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/footer_banner.png" alt="左から1番目のバナーの説明文" /></a></li>
    <li class="col col-sm-6 col-lg-3"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/footer_banner.png" alt="左から2番目のバナーの説明文" /></a></li>
    <li class="col col-sm-6 col-lg-3"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/footer_banner.png" alt="左から3番目のバナーの説明文" /></a></li>
    <li class="col col-sm-6 col-lg-3"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/footer_banner.png" alt="左から4番目のバナーの説明文" /></a></li>
    変更後:画像ファイル管理からバナーをクリックします。画像URLが表示されますのでコピーし、差し替えたい箇所へペーストします。
    <li class="col col-sm-6 col-lg-3"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="左から1番目のバナーの説明文" /></a></li>
    <li class="col col-sm-6 col-lg-3"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="左から2番目のバナーの説明文" /></a></li>
    <li class="col col-sm-6 col-lg-3"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="左から3番目のバナーの説明文" /></a></li>
    <li class="col col-sm-6 col-lg-3"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="左から4番目のバナーの説明文" /></a></li>
    リンク先URL、バナーの説明文もそれぞれ記入します。
  6. 変更しましたら、[保存]ボタンをクリック。
  7. サイトにアクセスして変更が反映されている事を確認します。