商品画像10枚表示 スマートフォン版無料テンプレート用
このページでは、レギュラーより上のプランにプランアップした際に、
レギュラーより上のプランで標準機能である商品画像10枚表示を行う為の、既存テンプレートの修正方法を説明しています。
商品画像10枚表示は、レギュラーより上のプランをご利用のショップ様のみとなります。それ以外のプランをご利用いただいているショップ様が、本修正を行いましても、
商品画像10枚表示は行えません。ご了承ください。
2013年5月13日以降にダウンロードされたショップテンプレートには、本修正を行う必要はございません。
商品画像10枚表示は行えません。ご了承ください。
2013年5月13日以降にダウンロードされたショップテンプレートには、本修正を行う必要はございません。
- 商品画像10枚表示 PC版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 PC版有料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 モバイル版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 モバイル版有料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 スマートフォン版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 スマートフォン版有料テンプレート用 アップデートマニュアルはこちら
商品画像10枚表示用タグ追加方法 … スマートフォン版無料テンプレート用
対応方法は以下の２通りございます。どちらかの対応をお願いします。
■ 対応方法１：再度テンプレートを追加する 【※推奨】
■ 対応方法２：テンプレートの該当箇所を修正、または追加する
テンプレートの編集を行う場合は、【商品詳細】HTML・【共通】CSS の計2箇所を編集します。
使用するテンプレートを確認し、編集を行ってください。
» 各テンプレート修正内容へのリンク一覧はこちら
使用するテンプレートを確認し、編集を行ってください。
» 各テンプレート修正内容へのリンク一覧はこちら
※修正タグを変更する位置が不明な場合は、ご利用中のテンプレートと同じテンプレートを追加していただき、
修正用タグが記述されている位置をご確認ください。
商品画像10枚表示用タグ追加手順
使用しているテンプレートを確認
【商品詳細】HTML に追加するタグは各テンプレート毎に異なります。対象のテンプレートをご確認ください。
タグの挿入箇所を確認
【テンプレート別挿入タグ一覧表】の、 <!-- 黄色いマークの文字列 --> が挿入箇所の目安となりますので、
文字列を【商品詳細】HTML 内にて検索します。
文字列を【商品詳細】HTML 内にて検索します。
指定タグをコピー、挿入
・検索後、各テンプレートの追加位置をご確認いただき、 ピンクエリアの追加タグ を挿入してください。
テンプレートによっては、一部タグを削除していただいた後、タグを追加していただく必要がございます。
削除する必要のタグがある場合、 削除該当部分を グレーエリア で表示しています。
グレーエリア部分のタグを削除後に、ピンクエリア部分のタグを挿入してください。
・追加するHTMLタグには、画像を１枚ずつ追加するタグと、画像をまとめて出力するタグの２通りがございます。
どちらのタグをご利用いただいても、商品画像は表示されますので、
テンプレートのカスタマイズなど行っている場合は、カスタマイズに合ったHTMLタグをご利用ください。
※CSSは共通です。
テンプレートによっては、一部タグを削除していただいた後、タグを追加していただく必要がございます。
削除する必要のタグがある場合、 削除該当部分を グレーエリア で表示しています。
グレーエリア部分のタグを削除後に、ピンクエリア部分のタグを挿入してください。
・追加するHTMLタグには、画像を１枚ずつ追加するタグと、画像をまとめて出力するタグの２通りがございます。
どちらのタグをご利用いただいても、商品画像は表示されますので、
テンプレートのカスタマイズなど行っている場合は、カスタマイズに合ったHTMLタグをご利用ください。
※CSSは共通です。
■ テンプレート別挿入タグ一覧表 スマートフォン版無料テンプレート 【 商品詳細 】HTML
■ ベーシック（青）
商品詳細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 $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 - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <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 - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <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修正はありません。
2018.02.26