手作り石鹸のネットショップです。

トップバナー下部の差替方法

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

SHELF(有料版)ではサイトへトップバナーを設置する事ができます。(サンプルサイトではトップ中段付近のバナー大小1本づつ)
ここではトップバナー下部の差替方法を解説します。

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

    変更前:
    <div class="section__block banner-contents__section row">
      <div class="col col-lg-4">
        <a href="">
          <img src="//img.shop-pro.jp/tmpl_img/80/img_top-short_bnr.png" alt="" />
        </a>
      </div>
      <div class="col col-lg-8">
        <a href="">
          <img src="//img.shop-pro.jp/tmpl_img/80/img_top-long_bnr.png" alt="" />
        </a>
      </div>
    </div>
    
    変更後:こちらに先程コピーした画像URLををペーストし、リンクURL・代替テキストを記入します。
    <div class="section__block banner-contents__section row">
      <div class="col col-lg-4">
        <a href="リンク先URL">
          <img src="こちらに画像URLを記入(小さなバナー)" alt="代替テキスト" />
        </a>
      </div>
      <div class="col col-lg-8">
        <a href="リンク先URL">
          <img src="こちらに画像URLを記入(大きなバナー)" alt="代替テキスト" />
        </a>
      </div>
    </div>
    
  6. 変更しましたら、[更新]ボタンをクリック。
  7. サイトにアクセスして変更が反映されている事を確認します。