商品画像10枚表示 PC版無料テンプレート用

このページでは、レギュラーより上のプランにプランアップした際に、
レギュラーより上のプランで標準機能である商品画像10枚表示を行う為の、既存テンプレートの修正方法を説明しています。
商品画像10枚表示は、レギュラーより上のプランをご利用のショップ様のみとなります。それ以外のプランをご利用いただいているショップ様が、本修正を行いましても、
商品画像10枚表示は行えません。ご了承ください。

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

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

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

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

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

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


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

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

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

タグの挿入箇所を確認

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

指定タグをコピー、挿入

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

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

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

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

■ ウェスト(ホワイト)

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

  <div class="zoom-desc">
      <{if $product.img_url != ""}>
        <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.img_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot1_url != ""}>
        <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot1_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot2_url != ""}>
        <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot2_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot3_url != ""}>
        <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot3_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot4_url != ""}>
        <a href="<{$product.ot4_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot4_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot4_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot5_url != ""}>
        <a href="<{$product.ot5_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot5_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot5_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot6_url != ""}>
        <a href="<{$product.ot6_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot6_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot6_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot7_url != ""}>
        <a href="<{$product.ot7_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot7_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot7_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot8_url != ""}>
        <a href="<{$product.ot8_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot8_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot8_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot9_url != ""}>
        <a href="<{$product.ot9_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot9_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot9_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot10_url != ""}>
        <a href="<{$product.ot10_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot10_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot10_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>

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

  <div class="zoom-desc">
      <{if $product.img_url != ""}>
        <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.img_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot1_url != ""}>
        <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot1_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot2_url != ""}>
        <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot2_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot3_url != ""}>
        <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot3_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
        </a>
      <{/if}>


      <{if $otherimg_num != 0}>
        <{section name=num loop=$otherimg}>
          <{if $otherimg[num].url != ""}>
            <a href="<{$otherimg[num].url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$otherimg[num].url}>' ">
            <img class="zoom-tiny-image" src="<{$otherimg[num].url}>" />
            </a>
          <{else}>
            <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' ">
            <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" />
            </a>
          <{/if}>
        <{/section}>
      <{/if}>

共通CSS

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

■ ウェスト(ブラック)

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

  <div class="zoom-desc">
      <{if $product.img_url != ""}>
        <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.img_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot1_url != ""}>
        <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot1_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot2_url != ""}>
        <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot2_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot3_url != ""}>
        <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot3_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot4_url != ""}>
        <a href="<{$product.ot4_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot4_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot4_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot5_url != ""}>
        <a href="<{$product.ot5_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot5_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot5_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot6_url != ""}>
        <a href="<{$product.ot6_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot6_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot6_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot7_url != ""}>
        <a href="<{$product.ot7_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot7_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot7_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot8_url != ""}>
        <a href="<{$product.ot8_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot8_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot8_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot9_url != ""}>
        <a href="<{$product.ot9_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot9_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot9_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot10_url != ""}>
        <a href="<{$product.ot10_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot10_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot10_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>

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

  <div class="zoom-desc">
      <{if $product.img_url != ""}>
        <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.img_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot1_url != ""}>
        <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot1_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot2_url != ""}>
        <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot2_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot3_url != ""}>
        <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot3_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
        </a>
      <{/if}>


      <{if $otherimg_num != 0}>
        <{section name=num loop=$otherimg}>
          <{if $otherimg[num].url != ""}>
            <a href="<{$otherimg[num].url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$otherimg[num].url}>' ">
            <img class="zoom-tiny-image" src="<{$otherimg[num].url}>" />
            </a>
          <{else}>
            <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' ">
            <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" />
            </a>
          <{/if}>
        <{/section}>
      <{/if}> 

共通CSS

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

■ ピン(ライトグレー)

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

  <!-- その他の画像 -->
  <{if $product.ot1_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot2_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot3_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
    </div>
  <{/if}>

  <{if $product.ot4_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot5_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot6_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot7_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot8_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot9_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot10_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot10_url}>"><img src="<{$product.ot10_url}>" /></a>
    </div>
  <{/if}> 

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

<!-- その他の画像 -->

  <{if $product.ot1_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot2_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
    </div>
  <{/if}>
  <{if $product.ot3_url != ""}>
    <div class="box product_image_other">
      <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
    </div>
  <{/if}>


  <{if $otherimg_num != 0}>
    <{section name=num loop=$otherimg}>
      <{if $otherimg[num].url != ""}>
        <div class="box product_image_other">
          <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a>
        </div>
      <{/if}>
    <{/section}>
  <{/if}>

共通CSS

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

■ フォトグラフ(ウッド)

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

  <div class="zoom-desc">
      <{if $product.img_url != ""}>
        <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.img_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot1_url != ""}>
        <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot1_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot2_url != ""}>
        <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot2_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot3_url != ""}>
        <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot3_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot4_url != ""}>
        <a href="<{$product.ot4_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot4_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot4_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot5_url != ""}>
        <a href="<{$product.ot5_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot5_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot5_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot6_url != ""}>
        <a href="<{$product.ot6_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot6_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot6_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot7_url != ""}>
        <a href="<{$product.ot7_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot7_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot7_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot8_url != ""}>
        <a href="<{$product.ot8_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot8_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot8_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot9_url != ""}>
        <a href="<{$product.ot9_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot9_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot9_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot10_url != ""}>
        <a href="<{$product.ot10_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot10_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot10_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>

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

  <div class="zoom-desc">
      <{if $product.img_url != ""}>
        <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.img_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>

      <{if $product.ot1_url != ""}>
        <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot1_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot2_url != ""}>
        <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot2_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>
      <{if $product.ot3_url != ""}>
        <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' ">
        <img class="zoom-tiny-image" src="<{$product.ot3_url}>" />
        </a>
      <{else}>
        <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
        <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
        </a>
      <{/if}>


      <{if $otherimg_num != 0}>
        <{section name=num loop=$otherimg}>
          <{if $otherimg[num].url != ""}>
            <a href="<{$otherimg[num].url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$otherimg[num].url}>' ">
            <img class="zoom-tiny-image" src="<{$otherimg[num].url}>" />
            </a>
          <{else}>
            <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' ">
            <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" />
            </a>
          <{/if}>
        <{/section}>
      <{/if}>

共通CSS

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

■ メモリー

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

  <!-- 商品サブ画像 -->
  <div class="subimg">
   <{if $product.ot1_url != ""}>
    <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
   <{/if}>

   <{if $product.ot2_url != ""}>
    <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
   <{/if}>

   <{if $product.ot3_url != ""}>
    <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
   <{/if}>

   <{if $product.ot4_url != ""}>
    <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a>
   <{/if}>

   <{if $product.ot5_url != ""}>
    <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a>
   <{/if}>

   <{if $product.ot6_url != ""}>
    <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a>
   <{/if}>

   <{if $product.ot7_url != ""}>
    <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a>
   <{/if}>

   <{if $product.ot8_url != ""}>
    <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a>
   <{/if}>

   <{if $product.ot9_url != ""}>
    <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a>
   <{/if}>

  </div>
  <!--// 商品サブ画像 -->

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

  <!-- 商品サブ画像 -->

  <div class="subimg">
   <{if $product.ot1_url != ""}>
    <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
   <{/if}>

   <{if $product.ot2_url != ""}>
    <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
   <{/if}>

   <{if $product.ot3_url != ""}>
    <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
   <{/if}>
  </div>

  <{if $otherimg_num != 0}>
  <div class="subimg">
   <{section name=num loop=$otherimg}>
   <{if $otherimg[num].url != ""}>
    <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a>
   <{/if}>
   <{/section}>
  </div>
  <{/if}>

  <!--// 商品サブ画像 -->

共通CSS

/* 商品その他画像のサイズと装飾 */
.subimg img{
  width:<{$link_img}>;
  border:1px solid <{$productimg_border}>;
  margin-right:5px;
  margin-top:3px;
  margin-bottom:3px;
}

■ オレンジノート

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

   <!-- 商品サブ画像 -->      
   <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail border" /></a><{/if}>
   <!--// 商品サブ画像 -->

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

   <!-- 商品サブ画像 -->
   <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}>
   <{if $otherimg_num != 0}>
   <{section name=num loop=$otherimg}>
   <{if $otherimg[num].url != ""}>
   <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail border" /></a>
   <{/if}>
   <{/section}>
   <{/if}>
   <!--// 商品サブ画像 -->

共通CSS

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

■ スカイノート

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

   <!-- 商品サブ画像 -->      
   <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail border" /></a><{/if}>
   <!--// 商品サブ画像 -->

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

   <!-- 商品サブ画像 -->
   <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}>
   <{if $otherimg_num != 0}>
   <{section name=num loop=$otherimg}>
   <{if $otherimg[num].url != ""}>
   <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail border" /></a>
   <{/if}>
   <{/section}>
   <{/if}>
   <!--// 商品サブ画像 -->

共通CSS

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

■ レタスノート

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

   <!-- 商品サブ画像 -->      
   <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail border" /></a><{/if}>
   <!--// 商品サブ画像 -->

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

   <!-- 商品サブ画像 -->
   <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}>
   <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}>
   <{if $otherimg_num != 0}>
   <{section name=num loop=$otherimg}>
   <{if $otherimg[num].url != ""}>
   <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail border" /></a>
   <{/if}>
   <{/section}>
   <{/if}>
   <!--// 商品サブ画像 -->

共通CSS

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

■ プレーン

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

<!-- 商品画像その他 -->
<div>
 <{if $product.ot1_url != ""}>
 <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
 <{/if}>
 <{if $product.ot2_url != ""}>
 <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
 <{/if}>
 <{if $product.ot3_url != ""}>
 <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
 <{/if}>
 <{if $product.ot4_url != ""}>
 <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small small_tp" /></a>
 <{/if}>
 <{if $product.ot5_url != ""}>
 <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small small_tp" /></a>
 <{/if}>
 <{if $product.ot6_url != ""}>
 <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small small_tp" /></a>
 <{/if}>
 <{if $product.ot7_url != ""}>
 <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small small_tp" /></a>
 <{/if}>
 <{if $product.ot8_url != ""}>
 <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small small_tp" /></a>
 <{/if}>
 <{if $product.ot9_url != ""}>
 <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small small_tp" /></a>
 <{/if}>
</div>
<br style="clear:both;">

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

<!-- 商品画像その他 -->
<div>
 <{if $product.ot1_url != ""}>
 <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
 <{/if}>
 <{if $product.ot2_url != ""}>
 <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
 <{/if}>
 <{if $product.ot3_url != ""}>
 <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
 <{/if}>
 
<{if $otherimg_num != 0}>
  <{section name=num loop=$otherimg}>
  <{if $otherimg[num].url != ""}>
  <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small<{if $smarty.section.num.index >= 3 }> small_tp<{/if}>" /></a>
  <{/if}>
  <{/section}>
<{/if}>
</div>
<br style="clear:both;">

共通CSS

/* ************************************************ 
 *  商品詳細
 * ************************************************ */

.large {
}

.small {
  width:150px ;
  margin:0px 10px 0px 0px;
  float:left;
}

.small_tp {
  margin-top:10px;
}

■ シンプル(レッド)

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

<!-- 商品画像その他 -->
<{if $product.ot1_url != ""}>
<a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
<{/if}>
<{if $product.ot2_url != ""}>
<a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
<{/if}>
<{if $product.ot3_url != ""}>
<a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
<{/if}>
<{if $product.ot4_url != ""}>
<a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a>
<{/if}>
<{if $product.ot5_url != ""}>
<a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a>
<{/if}>
<{if $product.ot6_url != ""}>
<a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a>
<{/if}>
<{if $product.ot7_url != ""}>
<a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a>
<{/if}>
<{if $product.ot8_url != ""}>
<a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a>
<{/if}>
<{if $product.ot9_url != ""}>
<a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a>
<{/if}>

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

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

共通CSS

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

■ シンプル(ブルー)

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

<!-- 商品画像その他 -->
<{if $product.ot1_url != ""}>
<a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
<{/if}>
<{if $product.ot2_url != ""}>
<a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
<{/if}>
<{if $product.ot3_url != ""}>
<a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
<{/if}>
<{if $product.ot4_url != ""}>
<a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a>
<{/if}>
<{if $product.ot5_url != ""}>
<a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a>
<{/if}>
<{if $product.ot6_url != ""}>
<a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a>
<{/if}>
<{if $product.ot7_url != ""}>
<a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a>
<{/if}>
<{if $product.ot8_url != ""}>
<a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a>
<{/if}>
<{if $product.ot9_url != ""}>
<a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a>
<{/if}>

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

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

共通CSS

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

■ シンプル(グレー)

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

<!-- 商品画像その他 -->
<{if $product.ot1_url != ""}>
<a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
<{/if}>
<{if $product.ot2_url != ""}>
<a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
<{/if}>
<{if $product.ot3_url != ""}>
<a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
<{/if}>
<{if $product.ot4_url != ""}>
<a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a>
<{/if}>
<{if $product.ot5_url != ""}>
<a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a>
<{/if}>
<{if $product.ot6_url != ""}>
<a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a>
<{/if}>
<{if $product.ot7_url != ""}>
<a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a>
<{/if}>
<{if $product.ot8_url != ""}>
<a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a>
<{/if}>
<{if $product.ot9_url != ""}>
<a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a>
<{/if}>

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

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

共通CSS

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

■ シンプル(ラベンダー)

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

<!-- 商品画像その他 -->
<{if $product.ot1_url != ""}>
<a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
<{/if}>
<{if $product.ot2_url != ""}>
<a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
<{/if}>
<{if $product.ot3_url != ""}>
<a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
<{/if}>
<{if $product.ot4_url != ""}>
<a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a>
<{/if}>
<{if $product.ot5_url != ""}>
<a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a>
<{/if}>
<{if $product.ot6_url != ""}>
<a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a>
<{/if}>
<{if $product.ot7_url != ""}>
<a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a>
<{/if}>
<{if $product.ot8_url != ""}>
<a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a>
<{/if}>
<{if $product.ot9_url != ""}>
<a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a>
<{/if}>

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

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

共通CSS

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

■ ミニ

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

       <!-- 商品画像その他 -->
        <{if $product.ot1_url != ""}>
          <br><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
        <{/if}>

        <{if $product.ot2_url != ""}>
          <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
        <{/if}>

        <{if $product.ot3_url != ""}>
          <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
        <{/if}>
        
        <{if $product.ot4_url != ""}>
          <br><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a>
        <{/if}>
        
        <{if $product.ot5_url != ""}>
          <br><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a>
        <{/if}>
        
        <{if $product.ot6_url != ""}>
          <br><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>"  class="small" /></a>
        <{/if}>
        
        <{if $product.ot7_url != ""}>
          <br><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a>
        <{/if}>
        
        <{if $product.ot8_url != ""}>
          <br><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a>
        <{/if}>
        
        <{if $product.ot9_url != ""}>
          <br><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a>
        <{/if}>

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

       <!-- 商品画像その他 -->
        <{if $product.ot1_url != ""}>
          <br><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
        <{/if}>

        <{if $product.ot2_url != ""}>
          <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
        <{/if}>

        <{if $product.ot3_url != ""}>
          <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
        <{/if}>
         
        <{if $otherimg_num != 0}>
        <{section name=num loop=$otherimg}>
        <{if $otherimg[num].url != ""}>
          <br><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a>
        <{/if}>
        <{/section}>
        <{/if}>

共通CSS

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

■ ヘンプ

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

<!-- Product(商品詳細) -->
<table class="main_title" cellpadding="0" cellspacing="0" border="0">
<tr><td><{$product.name}></td></tr>
</table>


<{ if $product.id != "" }>
<form name="product_form" method="post" action="<{$cart_url}>">

<div id="detail">

  <{if $product.img_url != ""}><img src="<{$product.img_url}>" class="main_img" alt="" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/26/now_m.gif" class="main_img" alt="" /><{/if}>

<div class="expl"><{$product.explain}></div>

  <{if $product.ot1_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot2_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot3_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot4_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot5_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot6_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot7_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot8_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot9_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" /></a></div><{/if}>

  <br style="clear:both;" />

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

<!-- Product(商品詳細) -->
<table class="main_title" cellpadding="0" cellspacing="0" border="0">
<tr><td><{$product.name}></td></tr>
</table>


<{ if $product.id != "" }>
<form name="product_form" method="post" action="<{$cart_url}>">

<div id="detail">

  <{if $product.img_url != ""}><img src="<{$product.img_url}>" class="main_img" alt="" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/26/now_m.gif" class="main_img" alt="" /><{/if}>

<div class="expl"><{$product.explain}></div>

  <{if $product.ot1_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot2_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a></div><{/if}>
  <{if $product.ot3_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a></div><{/if}>
         
  <{if $otherimg_num != 0}>
    <{section name=num loop=$otherimg}>
    <{if $otherimg[num].url != ""}>
    <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>"><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" /></a></div>
    <{/if}>
    <{/section}>
  <{/if}>

  <br style="clear:both;" />

共通CSS
    追加タグ

/* ************************************************ 
 *  商品詳細 レイアウト
 * ************************************************ */

#detail {
  text-align:center;
  color:<{$font_color}>;
  }

#detail .expl {
  line-height:150%;
  text-align: left;
  margin: 10px 10px 5px 10px;
  }

#detail .main_img {
  padding: 4px;
  border:1px #dacdb9 solid;
  }

#detail .sub {
  float: left;
  width: 188px;
  text-align: center;
  }

#detail .sub_tp {
  padding-top:18px;
  }

■ ビター

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

   <!-- 商品サブ画像 -->
    <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot4_url != ""}><br /><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot7_url != ""}><br /><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail" /></a>
    <{/if}>
    <!--// 商品サブ画像 -->

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

   <!-- 商品サブ画像 -->
    <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail" /></a>
    <{/if}>
    <{if $otherimg_num != 0}>
    <{section name=num loop=$otherimg}>
    <{if $otherimg[num].url != ""}>
      <{if $smarty.section.num.index%3 == 0 && $smarty.section.num.index != 0 }>
      <br />
      <{/if}>
    <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail" /></a>
    <{/if}>
    <{/section}>
    <{/if}>
    <!--// 商品サブ画像 -->

共通CSS

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

■ アクア

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

<!-- 商品画像その他 -->
<div id="detailImg" style="padding:10px 0px;">
<{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a><{/if}>
<{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a><{/if}>
<{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a><{/if}>
<{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a><{/if}>
<{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a><{/if}>
<{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a><{/if}>
<{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a><{/if}>
<{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a><{/if}>
<{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a><{/if}>
</div>  

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

<!-- 商品画像その他 -->
<div id="detailImg" style="padding:10px 0px;">
<{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a><{/if}>
<{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a><{/if}>
<{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a><{/if}>
<{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a><{/if}><{/section}><{/if}>
</div>

共通CSS
    削除タグ         追加タグ

/*----------------------------------------------------------------------
  商品詳細
----------------------------------------------------------------------*/


#detail {
  padding : 0px 15px;
}


.product_explain {
  line-height : 180%;
  padding : 10px 0px;
}

#detailImg {
  border-top : 1px dotted <{$productimg_border}>;
}

#detailImg a {
  color : #fff;
}

img.small {
  width: 150px;
  margin-right:7px;
  margin:4px 7px 3px 0px;
}

■ ブロック

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

<!-- メイン画像 -->
<div class="main_menu">商品詳細</div>
<div style="width:210px; margin:15px auto; text-align:center;">
<div style="width:210px; margin:15px auto 35px; text-align:center;">
 <div class="main_more_1"><{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/3/now200.gif"><{/if}></div>
 <div class="main_more_3"><{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="60px" /></a><{/if}></div>
 <div style="clear:left;"></div>
</div>  

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

<!-- メイン画像 -->
<div class="main_menu">商品詳細</div>
<div style="width:210px; margin:15px auto; text-align:center;">
<div style="width:210px; margin:15px auto 35px; text-align:center;">
 <div class="main_more_1"><{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/3/now200.gif"><{/if}></div>
 <div class="main_more_3"><{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}></div>
 <div class="main_more_3"><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}></div>
<{if $otherimg_num != 0}>
 <{section name=num loop=$otherimg}>
 <{if $otherimg[num].url != ""}>
 <div class="main_more_3"><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="60px" /></a></div>
 <{/if}>
 <{/section}>
<{/if}>
 <div style="clear:left;"></div>
</div>

共通CSS
    削除タグ         追加タグ

/* ------------------------------------------- 
 *  商品その他画像
 * ------------------------------------------- */
.main_more_3 {
  width: 60px;
  padding: 10px 5px;
  margin-bottom: 10px;
  padding: 10px 5px 0px;
  float: left;
}

■ 鹿の子

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

 <!-- 商品サブ画像 -->
 <dd>
  <{if $product.ot1_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a>
  </div>
  <{/if}>

  <{if $product.ot2_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a>
  </div>
  <{/if}>

  <{if $product.ot3_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a>
  </div>
  <{/if}>

  <br class="clear" />

  <{if $product.ot4_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a>
  </div>
  <{/if}>

  <{if $product.ot5_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a>
  </div>
  <{/if}>

  <{if $product.ot6_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a>
  </div>
  <{/if}>

  <br class="clear" />

  <{if $product.ot7_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a>
  </div>
  <{/if}>

  <{if $product.ot8_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a>
  </div>
  <{/if}>

  <{if $product.ot9_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a>
  </div>
  <{/if}>

  <br class="clear" />
 </dd>
 <!--// 商品サブ画像 -->

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

 <!-- 商品サブ画像 -->
 <dd>
  <{if $product.ot1_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a>
  </div>
  <{/if}>

  <{if $product.ot2_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a>
  </div>
  <{/if}>

  <{if $product.ot3_url != ""}>
  <div class="subimg">
   <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a>
  </div>
  <{/if}>

  <br class="clear" />
  <{if $otherimg_num != 0}>
  <{section name=num loop=$otherimg}>
  <{if $otherimg[num].url != ""}>
  <{if $smarty.section.num.index%3 == 0 && $smarty.section.num.index != 0 }>
  <br class="clear" />
  <{/if}>
  <div class="subimg">
   <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a>
  </div>
  <{/if}>
  <{/section}>
  <br class="clear" />
  <{/if}>

 </dd>
 <!--// 商品サブ画像 -->

共通CSS
    削除タグ         追加タグ

/* ------------------------------------- 
 *  商品のその他画像
 * ------------------------------------- */
.subimg {
  width:<{$left_width}>;/* サムネイル画像のサイズ(初期モードで設定) */
  float:left;
  margin-right:20px;
  margin:5px 20px 5px 0px;
}

■ レース

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

   <!-- サブ画像 -->
   <{if $product.ot1_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot2_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot3_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot4_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot5_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot6_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot7_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot8_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot9_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="sub border" /></a></div>
   <{/if}>

   <br class="clr" />

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

   <!-- サブ画像 -->
   <{if $product.ot1_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot2_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="sub border" /></a></div>
   <{/if}>

   <{if $product.ot3_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="sub border" /></a></div>
   <{/if}>
   <{if $otherimg_num != 0}>
   <{section name=num loop=$otherimg}>
   <{if $otherimg[num].url != ""}>
   <div class="detail_sub"><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="sub border" /></a></div>
   <{/if}>
   <{/section}>
   <{/if}>

   <br class="clr" />

共通CSS

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

■ ビューティー

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

     <!-- 商品サブ画像 -->
     <{if $product.ot1_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{ else }> <{/if}>
     <{if $product.ot2_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <{if $product.ot3_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <{if $product.ot4_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <{if $product.ot5_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <{if $product.ot6_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <{if $product.ot7_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <{if $product.ot8_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <{if $product.ot9_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <!--// 商品サブ画像 -->

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

     <!-- 商品サブ画像 -->
     <{if $product.ot1_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{ else }> <{/if}>
     <{if $product.ot2_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     <{if $product.ot3_url != ""}><div class="sub_img">
      <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
     </div><{/if}>
     
     <{if $otherimg_num != 0}>
      <{if $smarty.section.num.index == 0 || $otherimg[num].url == "" }> <{/if}>
      <{section name=num loop=$otherimg}>
      <{if $otherimg[num].url != ""}>
      <div class="sub_img">
       <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a>
      </div>
      <{/if}>
      <{/section}>
     <{/if}>
     <!--// 商品サブ画像 -->

共通CSS
    追加タグ

/*価格詳細表*/
.spec  {
  font-size:12px;
  margin:10px 0px 0px 0px;
  }
.spec td {
  height:20px;
  padding-right:10px;
  }

.sub_img {
  float:left;
  width:100px;
  margin-right:5px;
  margin-bottom:5px;
  }

■ ナチュラル

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

<!-- Product(商品詳細) -->
<div class="linktitle">商品詳細</div>

<{ if $product.id != "" }>

<form name="product_form" method="post" action="<{$cart_url}>">
 
 <table width="550" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td width="220" valign="top" align="center">

    <div class="product_img_main">商品イメージ</div>
    <{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/1/now200.gif"><{/if}>

    <div class="product_img_sub"></div>
    <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}>
    <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}>
    <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}>
    <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="60px" /></a><{/if}>
    <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="60px" /></a><{/if}>
    <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="60px" /></a><{/if}>
    <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="60px" /></a><{/if}>
    <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="60px" /></a><{/if}>
    <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="60px" /></a><{/if}>
   </td>

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

<!-- Product(商品詳細) -->
<div class="linktitle">商品詳細</div>

<{ if $product.id != "" }>

<form name="product_form" method="post" action="<{$cart_url}>">
 
 <table width="550" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td width="220" valign="top" align="center">

    <div class="product_img_main">商品イメージ</div>
    <{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/1/now200.gif"><{/if}>

    <div class="product_img_sub"></div>
    <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}>
    <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}>
    <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}>
    <{if $otherimg_num != 0}>
    <{section name=num loop=$otherimg}>
    <{if $otherimg[num].url != ""}>
     <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="60px" /></a>
    <{/if}>
    <{/section}>
    <{/if}>
   </td>

共通CSS

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

■ エレガント

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

    <!-- 商品画像その他 -->
     <{if $product.ot1_url != ""}>
      <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot2_url != ""}>
      <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot3_url != ""}>
      <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot4_url != ""}>
      <br><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot5_url != ""}>
      <br><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot6_url != ""}>
      <br><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot7_url != ""}>
      <br><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot8_url != ""}>
      <br><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot9_url != ""}>
      <br><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a>
     <{/if}>

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

    <!-- 商品画像その他 -->
     <{if $product.ot1_url != ""}>
      <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot2_url != ""}>
      <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot3_url != ""}>
      <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
     <{/if}>
      <{if $otherimg_num != 0}>
      <{section name=num loop=$otherimg}>
      <{if $otherimg[num].url != ""}>
      <{if $smarty.section.num.index != 0 }><br><{/if}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a>
      <{/if}>
      <{/section}>
      <{/if}>

共通CSS

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

■ フラワー

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

<!-- Product(商品詳細) -->

<{ if $product.id != "" }>

<form name="product_form" method="post" action="<{$cart_url}>">
 
 <table width="400" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
   <td valign="top" align="center" class="product_picture01">
    <div style="margin:15px 15px;">
    <{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/2/now200.gif"><{/if}>

    <div class="product_img_sub"></div>
    <div class="product_img_sub_parts_wrap">
    <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}>
    <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}>
    <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}>
    <{if $product.ot4_url != ""}><br /><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="60px" /></a><{/if}>
    <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="60px" /></a><{/if}>
    <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="60px" /></a><{/if}>
    <{if $product.ot7_url != ""}><br /><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="60px" /></a><{/if}>
    <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="60px" /></a><{/if}>
    <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="60px" /></a><{/if}>
    </div>

    </div>
   </td></tr>

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

<!-- Product(商品詳細) -->

<{ if $product.id != "" }>

<form name="product_form" method="post" action="<{$cart_url}>">
 
 <table width="400" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
   <td valign="top" align="center" class="product_picture01">
    <div style="margin:15px 15px;">
    <{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/2/now200.gif"><{/if}>

    <div class="product_img_sub"></div>
    <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}>
    <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}>
    <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}>
    <{if $otherimg_num != 0}>
    <div class="product_img_sub_parts_wrap">
    <{section name=num loop=$otherimg}>
    <{if $otherimg[num].url != ""}>
    <{if $smarty.section.num.index%3 == 0 && $smarty.section.num.index != 0 }><br /><{/if}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="60px" /></a>
    <{/if}>
    <{/section}>
    </div>
    <{/if}>

    </div>
   </td></tr>

共通CSS
    追加タグ

/* 特定商取引法に基づく表記(返品など)ボタン */
p#sk_link_other {
  text-align:left;
  margin-top:10px;
}

p#sk_link_other a {
  font-size:12px;
}

/* その他画像 */
.product_img_sub_parts_wrap {
  line-height:1.5em;
}

■ ブルーチェック

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

<!-- Product(商品詳細) -->
<table cellpadding="0" cellspacing="0" border="0" class="main_title">
 <tr>
  <td><{$product.name}></td>
 </tr>
</table>
<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div id="detail">
   <{if $product.img_url != ""}>
    <img src="<{$product.img_url}>" class="main_img" alt="" />
   <{else}>
    <img src="http://img.shop-pro.jp/tmpl_img/27/now_m.gif" class="main_img" alt="" />
   <{/if}>
   <div class="expl">
    <{$product.explain}>
   </div>

   <{if $product.ot1_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot2_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot3_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot4_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot5_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot6_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot7_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot8_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot9_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" /></a>
    </div>
   <{/if}>
   <br style="clear:both;" />

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

<!-- Product(商品詳細) -->
<table cellpadding="0" cellspacing="0" border="0" class="main_title">
 <tr>
  <td><{$product.name}></td>
 </tr>
</table>
<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div id="detail">
   <{if $product.img_url != ""}>
    <img src="<{$product.img_url}>" class="main_img" alt="" />
   <{else}>
    <img src="http://img.shop-pro.jp/tmpl_img/27/now_m.gif" class="main_img" alt="" />
   <{/if}>
   <div class="expl">
    <{$product.explain}>
   </div>

   <{if $product.ot1_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot2_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot3_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $otherimg_num != 0}>
    <{section name=num loop=$otherimg}>
    <{if $otherimg[num].url != ""}>
    <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>">
     <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" /></a>
    </div>
    <{/if}>
    <{/section}>
   <{/if}>
   <br style="clear:both;" />

共通CSS
    追加タグ

/* ************************************************ 
 *  商品詳細 レイアウト
 * ************************************************ */

#detail {
  text-align:center;
  color:<{$font_color}>;
  }

#detail .expl {
  line-height:150%;
  text-align:left;
  margin:10px 10px 5px 10px;
  }

#detail .main_img {
  padding:4px;
  border-top:1px solid #D1D1D1;
  border-left:1px solid #D1D1D1;
  border-right:1px solid #989898;
  border-bottom:1px solid #989898;
  }

#detail .sub {
  float:left;
  width:188px;
  text-align:center;
  }

#detail .sub_tp {
  padding-top:18px;
  }

■ ペーパー

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

    <!-- 商品サブ画像 --><{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a><{/if}><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a><{/if}><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a><{/if}><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a><{/if}><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a><{/if}><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a><{/if}><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a><{/if}><!--// 商品サブ画像 -->

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

    <!-- 商品サブ画像 --><{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a><{/if}><{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a><{/if}><{/section}><{/if}><!--// 商品サブ画像 -->

共通CSS

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

■ ウッド

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

<!-- Product(商品詳細) -->
<table class="main_title" cellpadding="0" cellspacing="0" border="0">
<tr><td><img src="http://img.shop-pro.jp/tmpl_img/11/sp.gif" width="15px" height="5px">▼ <{$product.name}></td></tr>
</table>


<{ if $product.id != "" }>
<form name="product_form" method="post" action="<{$cart_url}>">

<div id="detail">

 <{if $product.img_url != ""}><img src="<{$product.img_url}>" class="main_img" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/11/now_m.gif" class="main_img"><{/if}>

<div class="expl"><{$product.explain}></div>

 <{if $product.ot1_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a></div><{/if}>
 <{if $product.ot2_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a></div><{/if}>
 <{if $product.ot3_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a></div><{/if}>
 <{if $product.ot4_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a></div><{/if}>
 <{if $product.ot5_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a></div><{/if}>
 <{if $product.ot6_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a></div><{/if}>
 <{if $product.ot7_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a></div><{/if}>
 <{if $product.ot8_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a></div><{/if}>
 <{if $product.ot9_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a></div><{/if}>
 <br style="clear:both;" />

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

<!-- Product(商品詳細) -->
<table class="main_title" cellpadding="0" cellspacing="0" border="0">
<tr><td><img src="http://img.shop-pro.jp/tmpl_img/11/sp.gif" width="15px" height="5px">▼ <{$product.name}></td></tr>
</table>


<{ if $product.id != "" }>
<form name="product_form" method="post" action="<{$cart_url}>">

<div id="detail">

 <{if $product.img_url != ""}><img src="<{$product.img_url}>" class="main_img" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/11/now_m.gif" class="main_img"><{/if}>

<div class="expl"><{$product.explain}></div>

 <{if $product.ot1_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a></div><{/if}>
 <{if $product.ot2_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a></div><{/if}>
 <{if $product.ot3_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a></div><{/if}>
 <{if $otherimg_num != 0}>
  <{section name=num loop=$otherimg}>
  <{if $otherimg[num].url != ""}>
  <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>">
   <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a>
  </div>
  <{/if}>
  <{/section}>
 <{/if}>
 <br style="clear:both;" />

共通CSS

/* ************************************************ 
 *  商品詳細 レイアウト
 * ************************************************ */

#detail {
  text-align:center;
  color:<{$font_color}>;
  }

#detail .expl {
  line-height:150%;
  text-align: left;
  margin: 10px 10px 5px 10px;
  }

#detail .main_img {
  padding: 4px;
  border-top: 1px #D1D1D1 solid;
  border-right: 1px #989898 solid;
  border-bottom: 1px #989898 solid;
  border-left: 1px #D1D1D1 solid;
  }

#detail .sub {
  float: left;
  width: 188px;
  text-align: center;
  }

#detail .sub_tp {
  padding-top:18px;
  }

■ ストライプ

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

    <!-- 商品画像その他 -->
     <{if $product.ot1_url != ""}>
      <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot2_url != ""}>
      <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot3_url != ""}>
      <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot4_url != ""}>
      <br><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot5_url != ""}>
      <br><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot6_url != ""}>
      <br><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot7_url != ""}>
      <br><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot8_url != ""}>
      <br><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot9_url != ""}>
      <br><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a>
     <{/if}>

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

    <!-- 商品画像その他 -->
     <{if $product.ot1_url != ""}>
      <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot2_url != ""}>
      <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a>
     <{/if}>
     <{if $product.ot3_url != ""}>
      <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a>
     <{/if}>
     <{if $otherimg_num != 0}>
      <{section name=num loop=$otherimg}>
      <{if $otherimg[num].url != ""}>
       <{if $smarty.section.num.index != 0 }><br><{/if}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a>
      <{/if}>
      <{/section}>
     <{/if}>

共通CSS

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

■ 2カラム(左メニュー)

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

 <!-- 商品画像その他 -->
  <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。-->
  <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="200" /></a><{/if}><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="200" /></a><{/if}><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="200" /></a><{/if}><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="200" /></a><{/if}><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="200" /></a><{/if}><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="200" /></a><{/if}>

  <br style="clear:both;">

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

 <!-- 商品画像その他 -->
  <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。-->
  <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}>
  <{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="200" /></a><{/if}><{/section}><{/if}>

  <br style="clear:both;">

共通CSS

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

■ 2カラム(右メニュー)

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

 <!-- 商品画像その他 -->
  <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。-->
  <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="200" /></a><{/if}><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="200" /></a><{/if}><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="200" /></a><{/if}><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="200" /></a><{/if}><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="200" /></a><{/if}><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="200" /></a><{/if}>

  <br style="clear:both;">

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

 <!-- 商品画像その他 -->
  <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。-->
  <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}>
  <{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="200" /></a><{/if}><{/section}><{/if}>

  <br style="clear:both;">

共通CSS

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

■ 3カラム

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

 <!-- 商品画像その他 -->
  <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。-->
  <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="200" /></a><{/if}><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="200" /></a><{/if}><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="200" /></a><{/if}><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="200" /></a><{/if}><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="200" /></a><{/if}><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="200" /></a><{/if}>

  <br style="clear:both;">

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

 <!-- 商品画像その他 -->
  <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。-->
  <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}>
  <{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="200" /></a><{/if}><{/section}><{/if}>

  <br style="clear:both;">

共通CSS

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

■ ベビー

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

<!-- ▼商品詳細▼ -->
<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div id="datails_area">
   <table width="474" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td align="left" valign="top" class="top"></td>
    </tr>
    <tr>
     <td align="center" valign="top" class="main" style="padding:15px 0px;">
      <{if $product.img_url != ""}>
       <img src="<{$product.img_url}>" alt="" class="main_image" />
      <{else}>
       <img src="http://img.shop-pro.jp/tmpl_img/28/now_printing02.gif" alt="" class="main_image" />
      <{/if}>
     </td>
    </tr>
    <tr>
     <td align="center" valign="top" class="main">
      <div class="other_area">
       <{if $product.ot1_url != ""}>
        <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" class="other_image" /></a>
       <{/if}>
       <{if $product.ot2_url != ""}>
        <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" class="other_image" style="margin-left:17px;" /></a>
       <{/if}>
       <{if $product.ot3_url != ""}>
        <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" class="other_image" style="margin-left:17px;" /></a>
       <{/if}>
       <{if $product.ot4_url != ""}>
        <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" class="other_image" /></a>
       <{/if}>
       <{if $product.ot5_url != ""}>
        <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" class="other_image" style="margin-left:17px;" /></a>
       <{/if}>
       <{if $product.ot6_url != ""}>
        <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" class="other_image" style="margin-left:17px;" /></a>
       <{/if}>
       <{if $product.ot7_url != ""}>
        <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" class="other_image" /></a>
       <{/if}>
       <{if $product.ot8_url != ""}>
        <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" class="other_image" style="margin-left:17px;" /></a>
       <{/if}>
       <{if $product.ot9_url != ""}>
        <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" class="other_image" style="margin-left:17px;"/></a>
       <{/if}>
       <{if $product.ot1_url != ""}><br clear="all" /><{/if}>

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

<!-- ▼商品詳細▼ -->
<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div id="datails_area">
   <table width="474" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td align="left" valign="top" class="top"></td>
    </tr>
    <tr>
     <td align="center" valign="top" class="main" style="padding:15px 0px;">
      <{if $product.img_url != ""}>
       <img src="<{$product.img_url}>" alt="" class="main_image" />
      <{else}>
       <img src="http://img.shop-pro.jp/tmpl_img/28/now_printing02.gif" alt="" class="main_image" />
      <{/if}>
     </td>
    </tr>
    <tr>
     <td align="center" valign="top" class="main">
      <div class="other_area">
       <{if $product.ot1_url != ""}>
        <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" class="other_image" /></a>
       <{/if}>
       <{if $product.ot2_url != ""}>
        <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" class="other_image" style="margin-left:17px;" /></a>
       <{/if}>
       <{if $product.ot3_url != ""}>
        <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" class="other_image" style="margin-left:17px;" /></a>
       <{/if}>
       <{if $otherimg_num != 0}>
        <{section name=num loop=$otherimg}>
        <{if $otherimg[num].url != ""}>
        <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" class="other_image" <{if $smarty.section.num.index%3 == 0 }><{else}>style="margin-left:17px;" <{/if}>/></a>
        <{/if}>
        <{/section}>
        <{if $otherimg[num].url != ""}><br clear="all" /><{/if}>
       <{/if}>

共通CSS
    追加タグ

/* --------
   商品詳細
   -------- */
#datails_area {
  width:474px;
  padding:0px 0px 10px 20px;
  }

#datails_area .top {
  width:474px;
  height:5px;
  background:transparent url(http://img.shop-pro.jp/tmpl_img/28/itemlist_top_bg01.gif) top left no-repeat;
  }

#datails_area .main {
  width:474px;
  background:transparent url(http://img.shop-pro.jp/tmpl_img/28/itemlist_main_bg01.gif) top left repeat-y;
  }

#datails_area .bottom {
  width:474px;
  height:16px;
  background:transparent url(http://img.shop-pro.jp/tmpl_img/28/itemlist_bottom_bg01.gif) top left no-repeat;
  }

#datails_area .main_image {
  display:block;
  height:auto;
  border:1px solid #CCCCCC;
  }

#datails_area .other_area {
  width:430px;
  margin:0px auto;
  }

#datails_area .other_image {
  display:block;
  float:left;
  width:130px;
  height:auto;
  border:1px solid #CCCCCC;
  margin:8px 0px 9px;
  }

■ レッドチェック

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

<!-- Product(商品詳細) -->
<table cellpadding="0" cellspacing="0" border="0" class="main_title">
 <tr>
  <td><{$product.name}></td>
 </tr>
</table>
<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div id="detail">
   <{if $product.img_url != ""}>
    <img src="<{$product.img_url}>" class="main_img" alt="" />
   <{else}>
    <img src="http://img.shop-pro.jp/tmpl_img/29/now_m.gif" class="main_img" alt="" />
   <{/if}>
   <div class="expl">
    <{$product.explain}>
   </div>

   <{if $product.ot1_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot2_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot3_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a>
    </div>
   <{/if}>
    <{if $product.ot4_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot5_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot6_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot7_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot8_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot9_url != ""}>
    <div class="sub sub_tp">
     <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" /></a>
    </div>
   <{/if}>
   <br style="clear:both;" />

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

<!-- Product(商品詳細) -->
<table cellpadding="0" cellspacing="0" border="0" class="main_title">
 <tr>
  <td><{$product.name}></td>
 </tr>
</table>
<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div id="detail">
   <{if $product.img_url != ""}>
    <img src="<{$product.img_url}>" class="main_img" alt="" />
   <{else}>
    <img src="http://img.shop-pro.jp/tmpl_img/29/now_m.gif" class="main_img" alt="" />
   <{/if}>
   <div class="expl">
    <{$product.explain}>
   </div>

   <{if $product.ot1_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot2_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $product.ot3_url != ""}>
    <div class="sub">
     <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a>
    </div>
   <{/if}>
   <{if $otherimg_num != 0}>
   <{section name=num loop=$otherimg}>
   <{if $otherimg[num].url != ""}>
    <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>">
     <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" /></a>
    </div>
   <{/if}>
   <{/section}>
   <{/if}>

共通CSS
    追加タグ

/* ************************************************ 
 *  商品詳細 レイアウト
 * ************************************************ */

#detail {
  text-align:center;
  color:<{$font_color}>;
  }

#detail .expl {
  line-height:150%;
  text-align:left;
  margin:10px 10px 5px 10px;
  }

#detail .main_img {
  padding:4px;
  border-top:1px solid #D1D1D1;
  border-left:1px solid #D1D1D1;
  border-right:1px solid #989898;
  border-bottom:1px solid #989898;
  }

#detail .sub {
  float:left;
  width:188px;
  text-align:center;
  }

#detail .sub_tp {
  padding-top:18px;
  }

■ リネン

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

       <!-- 売切れ時、休止時、ログイン限定購入商品は表示不可  -->
       <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
        <tr>
         <td width="60" style="padding-bottom:20px;">購入数:</td>
         <td width="100">
          <table width="100"border="0" cellpadding="0" cellspacing="0">
           <tr>
            <td width="50"><input type="text" name="product_num" value="<{$product.init_num}>" style="width:50px;height:1.5em;" /></td>
            <td width="15">
             <div class="detail_arrow">
              <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>" alt="" /></a>
              <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>" alt="" /></a>
             </div>
            </td>
            <td width="35"><{$product.unit}></td>
           </tr>
          </table>
         </td>
        </tr>
       <{/if}>
      </table>
     </td>
    </tr>
    <tr>
     <td width="320" valign="top" style="padding-top:10px;">
      <{if $product.ot1_url != ""}>
       <div class="detail_other">
        <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
      <{if $product.ot2_url != ""}>
       <div class="detail_other" style="margin-left:7px;">
        <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
      <{if $product.ot3_url != ""}>
       <div class="detail_other" style="margin-left:7px;">
        <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
     </td>
    </tr>
    <tr>
     <td width="320" valign="top" style="padding-top:10px;">
      <{if $product.ot4_url != ""}>
       <div class="detail_other">
        <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
      <{if $product.ot5_url != ""}>
       <div class="detail_other" style="margin-left:7px;">
        <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
      <{if $product.ot6_url != ""}>
       <div class="detail_other" style="margin-left:7px;">
        <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
     </td>
    </tr>
    <tr>
     <td width="320" valign="top" style="padding-top:10px;">
      <{if $product.ot7_url != ""}>
       <div class="detail_other">
        <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
      <{if $product.ot8_url != ""}>
       <div class="detail_other" style="margin-left:7px;">
        <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
      <{if $product.ot9_url != ""}>
       <div class="detail_other" style="margin-left:7px;">
        <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
     </td>
    </tr>

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

       <!-- 売切れ時、休止時、ログイン限定購入商品は表示不可  -->
       <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
        <tr>
         <td width="60" style="padding-bottom:20px;">購入数:</td>
         <td width="100">
          <table width="100"border="0" cellpadding="0" cellspacing="0">
           <tr>
            <td width="50"><input type="text" name="product_num" value="<{$product.init_num}>" style="width:50px;height:1.5em;" /></td>
            <td width="15">
             <div class="detail_arrow">
              <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>" alt="" /></a>
              <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>" alt="" /></a>
             </div>
            </td>
            <td width="35"><{$product.unit}></td>
           </tr>
          </table>
         </td>
        </tr>
       <{/if}>
      </table>
     </td>
    </tr>
    <tr>
     <td width="320" valign="top" style="padding-top:10px;">   
      <{if $product.ot1_url != ""}>
       <div class="detail_other">
        <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
      <{if $product.ot2_url != ""}>
       <div class="detail_other" style="margin-left:7px;">
        <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
      <{if $product.ot3_url != ""}>
       <div class="detail_other" style="margin-left:7px;">
        <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" class="detail_thum" /></a>
       </div>
      <{/if}>
     <{if $otherimg_num != 0}>
      <{section name=num loop=$otherimg}>
       <{if $otherimg[num].url != ""}>
        <{if $smarty.section.num.index%3 == 0 && $smarty.section.num.index != 0 }>
          </td>
         </tr>
         <tr>
          <td width="320" valign="top" style="padding-top:10px;">
        <{/if}>
       <div class="detail_other"<{if $smarty.section.num.index%3 != 0 }> style="margin-left:7px;"<{/if}>>
        <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" class="detail_thum" /></a>
       </div>
       <{/if}>
      <{/section}>
     <{/if}>
     </td>
    </tr>

共通CSS

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

■ モール1

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

<!-- Product(商品詳細) -->
<div class="product_name"><{$product.name}></div>
<div class="expl_block"><{$product.explain}></div>

<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div class="detail_cont">
   <div class="detail_img_block">
    <div class="detail_img">
     <{if $product.img_url != ""}>
      <img src="<{$product.img_url}>" class="main_img" alt="" />
     <{else}>
      <img src="http://img.shop-pro.jp/tmpl_img/31/now_m.gif" class="main_img" alt="" />
     <{/if}>
    </div>

    <div class="detail_other">
     <{if $product.ot1_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot2_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot3_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot4_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot5_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot6_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot7_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot8_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot9_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a>
      </div>
     <{/if}>
     <br style="clear:both;" />
    </div>
   </div>

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

<!-- Product(商品詳細) -->
<div class="product_name"><{$product.name}></div>
<div class="expl_block"><{$product.explain}></div>

<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div class="detail_cont">
   <div class="detail_img_block">
    <div class="detail_img">
     <{if $product.img_url != ""}>
      <img src="<{$product.img_url}>" class="main_img" alt="" />
     <{else}>
      <img src="http://img.shop-pro.jp/tmpl_img/31/now_m.gif" class="main_img" alt="" />
     <{/if}>
    </div>

    <div class="detail_other">
     <{if $product.ot1_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot2_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot3_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
      </div>
     <{/if}>

     <{if $otherimg_num != 0}>
     <{section name=num loop=$otherimg}>
     <{if $otherimg[num].url != ""}>
      <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>">
       <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a>
      </div>
     <{/if}>
     <{/section}>
     <{/if}>
     <br style="clear:both;" />
    </div>
   </div>

共通CSS
    追加タグ

/* ************************************************ 
 *  商品詳細 レイアウト
 * ************************************************ */

.detail_cont {
  width:726px;
}

.detail_img_block {
  width:405px;
  float:left;
}

.detail_txt_block {
  width:294px;
  float:right;
  text-align:left;
}


.detail_img_block img {
  border:1px solid #999999;
}

.product_name {
  font-size:18px;
  font-weight:bold;
  margin-bottom:10px;
}

.expl_block {
  margin-bottom:30px;
}

.detail_img {
  margin-bottom:20px;
}

.detail_other {
  width:405px;
}

.detail_other .sub {
  width:135px;
  float:left;
}

.detail_other .sub_tp {
  padding-top:15px;
}

■ モール2

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

<!-- Product(商品詳細) -->
<div class="product_name"><{$product.name}></div>
<div class="expl_block"><{$product.explain}></div>

<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div class="detail_cont">
   <div class="detail_img_block">
    <div class="detail_img">
     <{if $product.img_url != ""}>
      <img src="<{$product.img_url}>" class="main_img" alt="" />
     <{else}>
      <img src="http://img.shop-pro.jp/tmpl_img/32/now_m.gif" class="main_img" alt="" />
     <{/if}>
    </div>

    <div class="detail_other">
     <{if $product.ot1_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot2_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot3_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot4_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot5_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot6_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot7_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot8_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot9_url != ""}>
      <div class="sub sub_tp">
       <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a>
      </div>
     <{/if}>
     <br style="clear:both;" />
    </div>
   </div>

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

<!-- Product(商品詳細) -->
<div class="product_name"><{$product.name}></div>
<div class="expl_block"><{$product.explain}></div>

<{ if $product.id != "" }>
 <form name="product_form" method="post" action="<{$cart_url}>">
  <div class="detail_cont">
   <div class="detail_img_block">
    <div class="detail_img">
     <{if $product.img_url != ""}>
      <img src="<{$product.img_url}>" class="main_img" alt="" />
     <{else}>
      <img src="http://img.shop-pro.jp/tmpl_img/32/now_m.gif" class="main_img" alt="" />
     <{/if}>
    </div>

    <div class="detail_other">
     <{if $product.ot1_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot2_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
      </div>
     <{/if}>
     <{if $product.ot3_url != ""}>
      <div class="sub">
       <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
      </div>
     <{/if}>

     <{if $otherimg_num != 0}>
     <{section name=num loop=$otherimg}>
     <{if $otherimg[num].url != ""}>
      <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>">
       <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a>
      </div>
     <{/if}>
     <{/section}>
     <{/if}>
     <br style="clear:both;" />
    </div>
   </div>

共通CSS
    追加タグ

/* ************************************************ 
 *  商品詳細 レイアウト
 * ************************************************ */

.detail_cont {
  width:726px;
}

.detail_img_block {
  width:405px;
  float:left;
}

.detail_txt_block {
  width:294px;
  float:right;
  text-align:left;
}


.detail_img_block img {
  border:1px solid #999999;
}

.product_name {
  font-size:18px;
  font-weight:bold;
  margin-bottom:10px;
}

.expl_block {
  margin-bottom:30px;
}

.detail_img {
  margin-bottom:20px;
}

.detail_other {
  width:405px;
}

.detail_other .sub {
  width:135px;
  float:left;
}

.detail_other .sub_tp {
  padding-top:15px;
}