【クリエイターモード】テンプレートPulsefitのトップページで「特集」の部分の表示方法について教えてください。 – makeshop よくある質問

テンプレートPulsefitのトップページ「特集」は、
ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
「HTML」欄　内に記述されているモジュールタグ

<{$module.banner}>

に、

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール「バナー」の内容が表示されています。

モジュール「バナー」ソースコード

<{if $shop.banner.has_item}>
    <section class="shop-banner">
        <div class="section-heading center">
            <span>Feature</span>
            <h2>特集</h2>
        </div>
        <{if $shop.comment}>
            <p class="shop-comment center"><{$shop.comment}></p>
        <{/if}>
        <ul class="banner-list">
        <{section name=i loop=$shop.banner.list}>
            <li>
                <a href="<{$shop.banner.list[i].url}>" class="loop-shop-banner" target="<{$shop.banner.list[i].target}>">
                    <img src="<{$shop.banner.list[i].image_url}>">
                </a>
            </li>
        <{/section}>
        </ul>
    </section>
<{/if}>

こちらのモジュールは
<{if $shop.banner.has_item}>から<{/if}>
の分岐が記述されているため、
ショップデザイン / デザイン設定 / ショップロゴ/バナー管理
にて「バナー画像が登録されている場合に」表示されます。

■マニュアル　バナーの登録

赤枠部分の「特集」タイトルは
モジュール「バナー」内の下記の記述部分で表示されています。

<div class="section-heading center">
    <span>Feature</span>
    <h2>特集</h2>
</div>

テキスト内容を変えたい場合は上記のFeature、特集のテキストを変更してください。

- - - - - - - - - - - - - - - - - - - -
青枠部分のテキストは
ショップデザイン / 機能・設定 / トップページ / トップページデザイン
の内容を表示するタグ

<{$shop.comment}>

で表示が可能ですので、表示させたい内容を記述してください。

サンプルショップ入力例）
“忙しい日々に、森の中でひとやすみ。<br>あたたかな光とコーヒーを。”<br> Forest Lamp — Brewed with Light.

■マニュアル　トップページデザイン設定

トップページデザインの内容を使用しない場合は、

<{if $shop.comment}>
    <p class="shop-comment center"><{$shop.comment}></p>
<{/if}>

の部分を下記に変更し、直接表示させたいテキストを記述してください。

変更例）

<p class="shop-comment center">表示させたいテキスト</p>

- - - - - - - - - - - - - - - - - - - -

下部の4枚の画像は
ショップデザイン / デザイン設定 / ショップロゴ/バナー管理
にてバナー画像の登録を行ってください。
サンプルショップではタテヨコ1000pxの画像を登録しています。

■マニュアル　バナーの登録

管理画面からのバナー画像ではなく、ショップ様側で直接HTMLを記述し表示させたい場合は
分岐の削除と画像表示部分のソースコードの変更が必要です。

手順1）分岐の削除
モジュール「バナー」の先頭行と末尾の分岐、

<{if $shop.banner.has_item}>

と

<{/if}>
を削除してください。

手順2）画像ソースコードの変更
モジュール「バナー」内の記述、

<{section name=i loop=$shop.banner.list}>
    <li>
        <a href="<{$shop.banner.list[i].url}>" class="loop-shop-banner" target="<{$shop.banner.list[i].target}>">
            <img src="<{$shop.banner.list[i].image_url}>">
        </a>
    </li>
<{/section}>

こちらの記述を下記に変更してください。

変更例）

<li>
    <a href="リンク先URL1" class="loop-shop-banner" target="_blank">
        <img src="画像URL1">
    </a>
</li>
<li>
    <a href="リンク先URL2" class="loop-shop-banner" target="_blank">
        <img src="画像URL2">
    </a>
</li>
<li>
    <a href="リンク先URL3" class="loop-shop-banner" target="_blank">
        <img src="画像URL3">
    </a>
</li>
<li>
    <a href="リンク先URL4" class="loop-shop-banner" target="_blank">
        <img src="画像URL4">
    </a>
</li>

リンク先URL、画像URLはショップ様側で変更してください。
また、表示させたい画像はあらかじめファイルサーバーにアップロードしてご用意ください。

サポート記事：画像やCSSファイルをアップロードしたい

ご参考）

トップページデザインとバナー管理を使用しない場合のソースコード例は下記です。

<!--  トップページデザインとバナー管理を使用しない -->
<section class="shop-banner">
    <div class="section-heading center">
        <span>Feature</span>
        <h2>特集</h2>
    </div>
    <p class="shop-comment center">表示させたいテキスト</p>
    <ul class="banner-list">
      <li>
          <a href="リンク先URL1" class="loop-shop-banner" target="_blank">
              <img src="画像URL1">
          </a>
      </li>
      <li>
          <a href="リンク先URL2" class="loop-shop-banner" target="_blank">
              <img src="画像URL2">
          </a>
      </li>
      <li>
          <a href="リンク先URL3" class="loop-shop-banner" target="_blank">
              <img src="画像URL3">
          </a>
      </li>
      <li>
          <a href="リンク先URL4" class="loop-shop-banner" target="_blank">
              <img src="画像URL4">
          </a>
      </li>
    </ul>
</section>

関連記事