差し替え手順

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

   <li class="p-pickup-list__item">
       <div class="p-pickup-list__img fadeIn fromBottom">
           <div class="p-pickup-list__img-l">
               <img src="https://img.shop-pro.jp/tmpl_img/85/pickup-sample-01-01.jpg" alt="商品１の画像説明文１" />
           </div>
           <div class="p-pickup-list__img-r">
               <img src="https://img.shop-pro.jp/tmpl_img/85/pickup-sample-01-02.jpg" alt="商品１の画像説明文２" />
           </div>
       </div>
       <div class="p-pickup-list__txt fadeIn fromBottom">
           <h3 class="p-pickup-list__ttl">
               セルクリストソープ 80g<br />（泡立てネット1P）
           </h3>
           <p class="p-pickup-list__body">
               テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
           </p>
           <div class="p-pickup-list__btn">
               <a href="#" class="c-btn-more">
                   MORE
               </a>
           </div>
       </div>
   </li>
   

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

   <li class="p-pickup-list__item">
       <div class="p-pickup-list__img fadeIn fromBottom">
           <div class="p-pickup-list__img-l">
               <img src="こちらに左側の画像URLをペースト" alt="商品１の画像説明文１" />
           </div>
           <div class="p-pickup-list__img-r">
               <img src="こちらに右側の画像URLをペースト" alt="商品１の画像説明文２" />
           </div>
       </div>
       <div class="p-pickup-list__txt fadeIn fromBottom">
           <h3 class="p-pickup-list__ttl">
               こちらにタイトルを記入
           </h3>
           <p class="p-pickup-list__body">
               こちらに本文を記入
           </p>
           <div class="p-pickup-list__btn">
               <a href="こちらにリンク先URLを記入" class="c-btn-more">
                   MORE
               </a>
           </div>
       </div>
   </li>
   

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