商品詳細ページへサンプルサイトと同様にサイズ詳細を作る方法

アパレルショッピングサイトでは必ず必要になるサイズ詳細。今回はサンプルショップと同様にサイズ詳細を作る方法をご紹介します。

サイズ詳細を掲載したい商品の商品編集へ移動します。管理画面から[商品管理] → [商品検索・変更] → 該当商品の[修正]ボタンをクリック

説明の項目へ下記を追加します。サイズ画像有りの場合又はサイズ画像無しの場合になります。サイズ画像についての詳細は管理画面からMODEのマニュアルをご覧下さい。

※説明の項目が「自動改行する」に設定されている場合は、スペースをつめる必要がありますのでHTML圧縮ツールなどをご利用下さい。例えばHTML Minifier[URL]の場合は上部テキストエリアへ下記HTMLをコピー&ペーストし[Minify]ボタンをクリック。下部テキストエリアに出てくるHTMLを説明へ追加して下さい。

サイズ画像有りの場合

<div class="sizeguide_table_box row">
      <div class="col col-lg-4 col-xs-12">
      <!-- ▼ サイズ画像を使用する場合はこちらを修正 ▼ -->
        <img src="サイズ画像のURL" />
      </div>
      <div class="sizeguide_table col col-lg-8 col-xs-12">
        <p class="">サイズ詳細</p>
        <table class="table">
          <!-- ▼ こちらに掲載したい項目を追加 ▼ -->
          <tr>
            <th>サイズ</th>
            <th>肩幅</th>
            <th>身幅</th>
            <th>袖丈</th>
            <th>着丈</th>
          </tr>
          <!-- ▼ 以下各サイズの詳細を追加 数値は例となりますので商品毎に差し替えてください ▼ -->
          <tr>
            <td>SMALL</td>
            <td>35cm</td>
            <td>45cm</td>
            <td>58cm</td>
            <td>77.5cm</td>
          </tr>
          <tr>
            <td>MEDIAM</td>
            <td>37.5cm</td>
            <td>49.5cm</td>
            <td>60cm</td>
            <td>79cm</td>
          </tr>
          <tr>
            <td>LARGE</td>
            <td>40cm</td>
            <td>54cm</td>
            <td>63cm</td>
            <td>80.5cm</td>
          </tr>
        </table>
      </div>
    </div>

サイズ画像無しの場合

<div class="sizeguide_table_box row">
      <div class="sizeguide_table col col-lg-12">
        <p class="">サイズ詳細</p>
        <table class="table">
          <!-- ▼ こちらに掲載したい項目を追加 ▼ -->
          <tr>
            <th>サイズ</th>
            <th>肩幅</th>
            <th>身幅</th>
            <th>袖丈</th>
            <th>着丈</th>
          </tr>
          <!-- ▼ 以下各サイズの詳細を追加 数値は例となりますので商品毎に差し替えてください ▼ -->
          <tr>
            <td>SMALL</td>
            <td>35cm</td>
            <td>45cm</td>
            <td>58cm</td>
            <td>77.5cm</td>
          </tr>
          <tr>
            <td>MEDIAM</td>
            <td>37.5cm</td>
            <td>49.5cm</td>
            <td>60cm</td>
            <td>79cm</td>
          </tr>
          <tr>
            <td>LARGE</td>
            <td>40cm</td>
            <td>54cm</td>
            <td>63cm</td>
            <td>80.5cm</td>
          </tr>
        </table>
      </div>
    </div>