商品詳細ページのレイアウト切替後、タブの初期値をイメージへ変更する方法

バージョンアップ[2015/12/13]により商品詳細ページのレイアウトを一部切り替える事が出来るようになりました。切替後に商品詳細ページへアクセスするとタブが最初に開いているのは「商品説明」となっています。これを「イメージ」に変更する方法をご紹介します。

管理画面から[ショップ作成] → [デザイン設定] → MODEの[デザイン編集]から商品詳細の[HTML/CSS編集]をクリック

下記を変更します。（ページ内検索にて「商品詳細ページのレイアウト切替」で探すと便利です。）

変更箇所1：273行目付近、タブ切替部分のclass名であるactiveを商品説明からイメージへ変更する

<ul class="product_tabs row">
      <!-- ▼ダウンロードいただいた段階ではclass="product_tab active col <{$tab_col_class}>"となっているのでclass名のactiveを削除する▼ -->
      <li id="product_panel_explain" class="product_tab col <{$tab_col_class}>">
        <a href="#">商品説明</a>
      </li>
      <!-- ▼こちらにclass名のactiveを追加 class="product_tab col active <{$tab_col_class}>"とする▼ -->
      <li id="product_panel_image" class="product_tab col active <{$tab_col_class}>">
        <a href="#">イメージ</a>
      </li>
      <{if $review_use_flg }>
        <li id="product_panel_review" class="product_tab col <{$tab_col_class}>">
          <a href="#">レビュー(<{$review_item_num}>)</a>
        </li>
      <{/if}>
    </ul>

変更箇所2：286行目付近、タブ切替表示部分のclass名であるactiveを商品説明からイメージへ変更する

<div class="product_panels">
        <!-- ▼ダウンロードいただいた段階ではclass="product_panel_explain product_panel active"となっているのでclass名のactiveを削除する▼ -->
        <div class="product_panel_explain product_panel">
          <!-- 商品説明文 -->
            以下省略
          <!-- // 商品説明文 -->
        </div>
        <!-- ▼こちらにclass名のactiveを追加 class="product_panel_image product_panel active"とする▼ -->
        <div class="product_panel_image product_panel active">
          <!-- 画像 -->
            以下省略
          <!-- //画像 -->
        </div>
        <{ if $review_use_flg }>
          <div class="product_panel_review product_panel">
            <!-- レビュー -->
            以下省略
            <!-- //レビュー -->
          </div>
        <{/if}>
    </div>