商品画像10枚表示 スマートフォン版無料テンプレート用

このページでは、レギュラーより上のプランにプランアップした際に、
レギュラーより上のプランで標準機能である商品画像10枚表示を行う為の、既存テンプレートの修正方法を説明しています。

商品画像10枚表示は、レギュラーより上のプランをご利用のショップ様のみとなります。それ以外のプランをご利用いただいているショップ様が、本修正を行いましても、
商品画像10枚表示は行えません。ご了承ください。

2013年5月13日以降にダウンロードされたショップテンプレートには、本修正を行う必要はございません。

商品画像10枚表示用タグ追加方法 … スマートフォン版無料テンプレート用

対応方法は以下の2通りございます。どちらかの対応をお願いします。

■ 対応方法1:再度テンプレートを追加する 【※推奨】

■ 対応方法2:テンプレートの該当箇所を修正、または追加する

テンプレートの編集を行う場合は、【商品詳細】HTML・【共通】CSS の計2箇所を編集します。
使用するテンプレートを確認し、編集を行ってください。
» 各テンプレート修正内容へのリンク一覧はこちら


※修正タグを変更する位置が不明な場合は、ご利用中のテンプレートと同じテンプレートを追加していただき、
修正用タグが記述されている位置をご確認ください。

商品画像10枚表示用タグ追加手順

使用しているテンプレートを確認

【商品詳細】HTML に追加するタグは各テンプレート毎に異なります。対象のテンプレートをご確認ください。

タグの挿入箇所を確認

【テンプレート別挿入タグ一覧表】の、 <!-- 黄色いマークの文字列 --> が挿入箇所の目安となりますので、
文字列を【商品詳細】HTML 内にて検索します。

指定タグをコピー、挿入

・検索後、各テンプレートの追加位置をご確認いただき、 ピンクエリアの追加タグ を挿入してください。

テンプレートによっては、一部タグを削除していただいた後、タグを追加していただく必要がございます。
削除する必要のタグがある場合、 削除該当部分を グレーエリア で表示しています。
グレーエリア部分のタグを削除後に、ピンクエリア部分のタグを挿入してください。

・追加するHTMLタグには、画像を1枚ずつ追加するタグと、画像をまとめて出力するタグの2通りがございます。
どちらのタグをご利用いただいても、商品画像は表示されますので、
テンプレートのカスタマイズなど行っている場合は、カスタマイズに合ったHTMLタグをご利用ください。
※CSSは共通です。

■ テンプレート別挿入タグ一覧表 スマートフォン版無料テンプレート 【 商品詳細 】HTML

■ ベーシック(青)

商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
    追加タグ

     <!-- 商品画像その他 -->
     <aside class="dtl_asd">
      <ul>
       <{if $product.ot1_url != ""}>
       <li><img src="<{$product.ot1_url}>" ></li>
       <{/if}>
       <{if $product.ot2_url != ""}>
       <li><img src="<{$product.ot2_url}>" ></li>
       <{/if}>
       <{if $product.ot3_url != ""}>
       <li><img src="<{$product.ot3_url}>" ></li>
       <{/if}>
       <{if $product.ot4_url != ""}>
       <li><img src="<{$product.ot4_url}>" /></li>
       <{/if}>
       <{if $product.ot5_url != ""}>
       <li><img src="<{$product.ot5_url}>" /></li>
       <{/if}>
       <{if $product.ot6_url != ""}>
       <li><img src="<{$product.ot6_url}>" /></li>
       <{/if}>
       <{if $product.ot7_url != ""}>
       <li><img src="<{$product.ot7_url}>" /></li>
       <{/if}>
       <{if $product.ot8_url != ""}>
       <li><img src="<{$product.ot8_url}>" /></li>
       <{/if}>
       <{if $product.ot9_url != ""}>
       <li><img src="<{$product.ot9_url}>" /></li>
       <{/if}>
      </ul>
     </aside>

商品詳細HTML - 画像をまとめて出力するタグ
    削除タグ         追加タグ

     <!-- 商品画像その他 -->
     <aside class="dtl_asd">
      <ul>
       <{if $product.ot1_url != ""}>
       <li><img src="<{$product.ot1_url}>" ></li>
       <{/if}>
       <{if $product.ot2_url != ""}>
       <li><img src="<{$product.ot2_url}>" ></li>
       <{/if}>
       <{if $product.ot3_url != ""}>
       <li><img src="<{$product.ot3_url}>" ></li>
       <{/if}>
       <{if $otherimg_num != 0}>
       <{section name=num loop=$otherimg}>
       <{if $otherimg[num].url != ""}>
       <li><img src="<{$otherimg[num].url}>" /></li>
       <{/if}>
       <{/section}>
       <{/if}>
      </ul>
     </aside>

共通CSS

このテンプレートでのCSS修正はありません。

■ ベーシック(黄)

商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
    追加タグ

     <!-- 商品画像その他 -->
     <aside class="dtl_asd">
      <ul>
       <{if $product.ot1_url != ""}>
       <li><img src="<{$product.ot1_url}>" ></li>
       <{/if}>
       <{if $product.ot2_url != ""}>
       <li><img src="<{$product.ot2_url}>" ></li>
       <{/if}>
       <{if $product.ot3_url != ""}>
       <li><img src="<{$product.ot3_url}>" ></li>
       <{/if}>
       <{if $product.ot4_url != ""}>
       <li><img src="<{$product.ot4_url}>" /></li>
       <{/if}>
       <{if $product.ot5_url != ""}>
       <li><img src="<{$product.ot5_url}>" /></li>
       <{/if}>
       <{if $product.ot6_url != ""}>
       <li><img src="<{$product.ot6_url}>" /></li>
       <{/if}>
       <{if $product.ot7_url != ""}>
       <li><img src="<{$product.ot7_url}>" /></li>
       <{/if}>
       <{if $product.ot8_url != ""}>
       <li><img src="<{$product.ot8_url}>" /></li>
       <{/if}>
       <{if $product.ot9_url != ""}>
       <li><img src="<{$product.ot9_url}>" /></li>
       <{/if}>
      </ul>
     </aside>

商品詳細HTML - 画像をまとめて出力するタグ
    削除タグ         追加タグ

     <!-- 商品画像その他 -->
     <aside class="dtl_asd">
      <ul>
       <{if $product.ot1_url != ""}>
       <li><img src="<{$product.ot1_url}>" ></li>
       <{/if}>
       <{if $product.ot2_url != ""}>
       <li><img src="<{$product.ot2_url}>" ></li>
       <{/if}>
       <{if $product.ot3_url != ""}>
       <li><img src="<{$product.ot3_url}>" ></li>
       <{/if}>
       <{if $otherimg_num != 0}>
       <{section name=num loop=$otherimg}>
       <{if $otherimg[num].url != ""}>
       <li><img src="<{$otherimg[num].url}>" /></li>
       <{/if}>
       <{/section}>
       <{/if}>
      </ul>
     </aside>

共通CSS

このテンプレートでのCSS修正はありません。

■ ベーシック(ピンク)

商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
    追加タグ

     <!-- 商品画像その他 -->
     <aside class="dtl_asd">
      <ul>
       <{if $product.ot1_url != ""}>
       <li><img src="<{$product.ot1_url}>" ></li>
       <{/if}>
       <{if $product.ot2_url != ""}>
       <li><img src="<{$product.ot2_url}>" ></li>
       <{/if}>
       <{if $product.ot3_url != ""}>
       <li><img src="<{$product.ot3_url}>" ></li>
       <{/if}>
       <{if $product.ot4_url != ""}>
       <li><img src="<{$product.ot4_url}>" /></li>
       <{/if}>
       <{if $product.ot5_url != ""}>
       <li><img src="<{$product.ot5_url}>" /></li>
       <{/if}>
       <{if $product.ot6_url != ""}>
       <li><img src="<{$product.ot6_url}>" /></li>
       <{/if}>
       <{if $product.ot7_url != ""}>
       <li><img src="<{$product.ot7_url}>" /></li>
       <{/if}>
       <{if $product.ot8_url != ""}>
       <li><img src="<{$product.ot8_url}>" /></li>
       <{/if}>
       <{if $product.ot9_url != ""}>
       <li><img src="<{$product.ot9_url}>" /></li>
       <{/if}>
      </ul>
     </aside>

商品詳細HTML - 画像をまとめて出力するタグ
    削除タグ         追加タグ

     <!-- 商品画像その他 -->
     <aside class="dtl_asd">
      <ul>
       <{if $product.ot1_url != ""}>
       <li><img src="<{$product.ot1_url}>" ></li>
       <{/if}>
       <{if $product.ot2_url != ""}>
       <li><img src="<{$product.ot2_url}>" ></li>
       <{/if}>
       <{if $product.ot3_url != ""}>
       <li><img src="<{$product.ot3_url}>" ></li>
       <{/if}>
       <{if $otherimg_num != 0}>
       <{section name=num loop=$otherimg}>
       <{if $otherimg[num].url != ""}>
       <li><img src="<{$otherimg[num].url}>" /></li>
       <{/if}>
       <{/section}>
       <{/if}>
      </ul>
     </aside>

共通CSS

このテンプレートでのCSS修正はありません。