【クリエイターモード】商品詳細ページにバリエーションの独自商品コードを表示させることはできますか。 – makeshop よくある質問

HTMLを編集することで、SKU（バリエーションを項目ごとに表示する形式）に独自商品コードを表示させることができます。

＜使用する変数タグ＞

変数タグ	説明
$item.option_sku.list[i].original_code	バリエーション独自コード

この機能は、商品管理 / 商品一覧 / 商品登録・編集で、バリエーションの表示形式を「項目ごとに買い物かごを表示する」に設定している場合に表示されます。
「プルダウンで表示」に設定している場合は表示されません。

編集する前にデザインセットのコピーボタンをクリックしてバックアップを保管し、元の状態に戻せるように準備したうえで作業をおこなってください。

■makeshopサポート
ショップデザインバックアップしてますか？！

※すでにデザインセットが5個以上ある場合は以下を参照してください。
■よくある質問
【クリエイターモード】デザインセットが5個以上あるとコピーできません。バックアップを取る方法を教えてください。

＜手順＞

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

「HTML」欄の <{section name=i loop=$item.option_sku.list}> ～ <{/section}> のループ内、独自コードを表示させたい位置に、下記を参考に追記してください。

テンプレートBasicsの場合

「HTML」入力欄内に一度カーソルを置いた状態でキーボードの Ctrl と F キーを同時に押し、表示される検索窓に

name1

と入力（コピー＆ペースト）し、キーボードの Enter キーを押して以下の記述を見つけてください。

<td><{$item.option_sku.list[i].name1}></td>

この記述に、「バリエーション独自コード」のソースを追記してください。

＜追記例＞

<td><p class="sku-code"><{$item.option_sku.list[i].original_code}></p><{$item.option_sku.list[i].name1}></td>

背景色などのスタイルを指定したい場合は、「CSS」欄の先頭にCSSを追記し、保存してください。

＜CSS追記例＞

.sku-code {
  background-color: #333;
  color: #fff;
  font-size: 90%;
  text-align: center;
  padding: 4px 8px;
  display: block;
  width: 50%;
  margin: 0 auto 5px;
}

テンプレートManabitoの場合

（１）「HTML」入力欄内に一度カーソルを置いた状態でキーボードの Ctrl と F キーを同時に押し、表示される検索窓に

sku

と入力し、キーボードの Enter キーを押して以下の記述を見つけてください。

<!--オプションがある場合-->
  <{if $item.is_option_sku}>
  <!--SKUごとの表示-->
    <table class="sku">
       <tr>
         <th></th>

<th></th> の前に、下記を追記してください。

<{if $item.option_sku.list[i].original_code}><th class="w25">商品コード</th><{/if}>

（２）同様に Ctrl と F で

sku-img

を検索し、以下の記述を見つけてください。

<td class="sku-img">

この前に、以下を追記し、保存してください。

<{if $item.option_sku.list[i].original_code}>
  <td class="sku-original-code"><{$item.option_sku.list[i].original_code}></td>
<{/if}>

＜ご注意＞

上記はテンプレートBasics、Manabitoでの追記例です。
ほかのテンプレートをご利用の場合は、商品詳細ページのHTMLの構成にあわせて追記する位置を調整してください。

修正が難しい場合は有料の制作代行プランのご利用を検討してください。

→ おてがる更新代行サービス