PICK UP ITEMSの編集方法

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

PICK UP ITEMSの差し替え箇所

PICK UP ITEMSでは特におすすめしたい商品を2枚の画像を使ってアプローチいただけます。

差し替え手順

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

    変更前:最初の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="商品1の画像説明文1" />
            </div>
            <div class="p-pickup-list__img-r">
                <img src="https://img.shop-pro.jp/tmpl_img/85/pickup-sample-01-02.jpg" alt="商品1の画像説明文2" />
            </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="商品1の画像説明文1" />
            </div>
            <div class="p-pickup-list__img-r">
                <img src="こちらに右側の画像URLをペースト" alt="商品1の画像説明文2" />
            </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>
    
    画像URL1、画像URL2、画像の説明文、タイトル、本文、リンク先URLもそれぞれ記入します。
  7. 変更しましたら、[更新]ボタンをクリック。
  8. サイトにアクセスして変更が反映されている事を確認します。

ショッピングガイド

SHIPPING 配送・送料について

東京急便
配送は東京急便にてお届けいたします。

送料は全国一律525円頂いております。
1回のお買い上げ商品の合計金額が10,000円以上の場合は送料が無料となります。

RETURN 返品について

不良品
商品到着後速やかにご連絡ください。商品に欠陥がある場合を除き、返品には応じかねますのでご了承ください。
返品期限
商品到着後7日以内とさせていただきます。
返品送料
お客様都合による返品につきましてはお客様のご負担とさせていただきます。不良品に該当する場合は当方で負担いたします。

PAYMENT お支払いについて

銀行振込
購入後にお送りさせて頂きますご注文確認メールに記載されております弊社指定の銀行口座へ、ご請求金額をお振り込み下さい。
クレジット
分割払い、リボ払い可能です。
※支払い回数はクレジットカード会社によって異なります。