テーマ仕様書
shop
TOP
トップページ

トップページ

ショップのトップページです。
ハードコーディングしだいで自由度が高いページになります。

ショップのパス

ドメイン/shop

ecforce管理画面の「設定 購入/フォーム 購入の設定 (opens in a new tab)」で、ドメイン/ へのアクセス時に /shop と同じコンテンツを表示する設定が可能です。 (デフォルトでは ドメイン/ アクセス時にはLPを表示します)

テーマ管理のファイルパス

ec_force/shop/base/index.html.liquid
ec_force/shop/base/index.html+smartphone.liquid

JS タグ

{{ 'shop/base' | javascript_include_tag }}

必要なコンポーネント

※任意とあるもの以外はシステム上必要なコンポーネントのため、必ず使用してください。

{{ 'shop/base' | javascript_include_tag }}
 
<!-- フラッシュメッセージ -->
{{ 'notice' | flash: 'alert alert-success', 'text' }}
{{ 'alert' | flash: 'alert alert-danger', 'text' }}
 
<!-- ニュース一覧へのリンク(任意) -->
<a href="/shop/information">ニュース一覧へ</a>
 
<!-- 新着ニュース(任意) -->
{% if informations.size != 0 %}
 
  <!-- 新着ニュースx件表示 例) limit: 3 => 新着3件表示 -->
  {% for information in informations | limit: 3 %}
 
    <!-- ニュース記事サムネイル画像(任意) -->
    <a href="/shop/information/{{ information.slug }}">
      {% if information.thumbnail.url %}
        {% assign src = information.thumbnail.url %}
      {% else %}
        {% assign src = default_information_thumbnail_url %}
      {% endif %}
      <img src='{{ src }}'>
    </a>
 
    <!-- ニュース記事タイトル(任意) -->
    <a href="/shop/information/{{ information.slug }}">{{ information.title }}</a>
 
    <!-- ニュース記事メタ情報(任意) -->
      <!-- 公開日時(任意) -->
      {{ information.published_at | date: '%Y.%m.%d' }}
 
      <!-- カテゴリ(任意) -->
      <a href="/shop/information_categories/{{ information.information_category.slug }}">{{ information.information_category.name }}</a>
 
  {% endfor %}
{% endif %}
<!-- 新着ニュース(任意) ここまで-->
 
<!-- イチオシ商品、新着商品一覧、セール商品一覧(全て任意)、ランキング -->
{% if base_info.use_cart %}
 
  <!-- イチオシ商品(任意) -->
  {% if hot_product %}
 
    <!-- イチオシ商品サムネイル画像(任意) -->
    <a href="/shop/products/{{ hot_product.master.sku }}">
      {% if hot_product.thumbnail.url %}
        {% assign src = hot_product.thumbnail.url %}
      {% else %}
        {% assign src = default_information_thumbnail_url %}
      {% endif %}
      <img src='{{ src }}'>
    </a>
 
    <!-- イチオシ商品タイトル(任意) -->
    <a href="/shop/products/{{ hot_product.master.sku }}">{{ hot_product.name }}</a>
    
    <!-- イチオシ商品バッジ(任意) -->
    {% if pre_order_badge_flg_hash[hot_product.master.id] or delivery_group_badge_flg_hash[hot_product.id] or concurrent_purchase_group_badge_flg_hash[hot_product.id] or campaign_badge_flg_hash[hot_product.id] %}
      <!-- イチオシ商品予約マーク(任意) -->
      {% if pre_order_badge_flg_hash[hot_product.master.id] %}
        予約商品
      {% endif %}
      <!-- イチオシ商品配送温度帯ラベル(任意) -->
      {% for delivery_group_name in hot_product.delivery_group_names %}
        {{ delivery_group_name }}
      {% endfor %}
      <!-- イチオシ商品同時購入グループバッジ(任意) -->
      <!-- 「バッジ表示名」を表示したい場合、hot_product.concurrent_purchase_group_names を hot_product.concurrent_purchase_badge_names に修正してください。 -->
      {% for concurrent_purchase_group_name in hot_product.concurrent_purchase_group_names %}
        {{ concurrent_purchase_group_name }}
      {% endfor %}
      <!-- キャンペーンバッジ(任意) -->
      {% assign badges = campaign_badge_flg_hash[hot_product.id] | liquid_render_badges %}
      {% for render_badge in badges %}
        {{ render_badge | hash: 'value' }}
      {% endfor %}
    {% endif %}
 
    <!-- イチオシ商品説明(任意) -->
    {{ hot_product.description | simple_format }}
 
    <!-- イチオシ商品販売価格(任意) -->
    {{ hot_product.first_price | number_to_currency: format: '%n %u' }}
 
  {% endif %}
 
  <!-- 商品一覧へのリンク(任意) -->
  <a href="/shop/products">商品一覧へ</a>
 
  <!-- 新着商品(任意) -->
  {% if new_products.size != 0 %}
 
    <!-- 新着商品x件表示 例) limit: 3 => 新着3件表示 -->
    {% for product in new_products | limit: 3 %}
 
      <!-- 新着商品サムネイル画像(任意) -->
      <a href="/shop/products/{{ product.master.sku }}">
        {% if product.thumbnail.url %}
          {% assign src = product.thumbnail.url %}
        {% else %}
          {% assign src = 'missing' | image_url %}
        {% endif %}
        <img src='{{ src }}'>
      </a>
 
      <!-- 新着商品タイトル(任意) -->
      <a href="/shop/products/{{ product.master.sku }}">{{ product.name }}</a>
      
      <!-- 新着商品バッジ(任意) -->
      {% if pre_order_badge_flg_hash[product.master.id] or delivery_group_badge_flg_hash[product.id] or concurrent_purchase_group_badge_flg_hash[product.id] or campaign_badge_flg_hash[product.id] %}
        <!-- 新着商品予約マーク(任意) -->
        {% if pre_order_badge_flg_hash[product.master.id] %}
          予約商品
        {% endif %}
        <!-- 新着商品配送温度帯ラベル(任意) -->
        {% for delivery_group_name in product.delivery_group_names %}
          {{ delivery_group_name }}
        {% endfor %}
        <!-- 新着商品同時購入グループバッジ(任意) -->
        <!-- 「バッジ表示名」を表示したい場合、product.concurrent_purchase_group_names を product.concurrent_purchase_badge_names に修正してください。 -->
        {% for concurrent_purchase_group_name in product.concurrent_purchase_group_names %}
          {{ concurrent_purchase_group_name }}
        {% endfor %}
        <!-- キャンペーンバッジ(任意) -->
        {% assign badges = campaign_badge_flg_hash[product.id] | liquid_render_badges %}
        {% for render_badge in badges %}
          {{ render_badge | hash: 'value' }}
        {% endfor %}
      {% endif %}
 
      <!-- 新着商品説明(任意) -->
      {{ product.description | simple_format }}
 
      <!-- 新着商品販売価格(任意) -->
      {{ product.first_price | number_to_currency: format: '%n %u' }}
 
    {% endfor %}
 
  {% endif %}
  <!-- 新着商品(任意) ここまで-->
 
 
  <!-- セール商品(任意) -->
  {% if sale_products.size != 0 %}
 
    <!-- セール商品x件表示 例) limit: 3 => 新着3件表示 -->
    {% for product in sale_products | limit: 3 %}
 
      <!-- セール商品サムネイル画像(任意) -->
      <a href="/shop/products/{{ product.master.sku }}">
        {% if product.thumbnail.url %}
          {% assign src = product.thumbnail.url %}
        {% else %}
          {% assign src = 'missing' | image_url %}
        {% endif %}
        <img src='{{ src }}'>
      </a>
 
      <!-- セール商品タイトル(任意) -->
      <a href="/shop/products/{{ product.master.sku }}">{{ product.name }}</a>
 
      <!-- セール商品バッジ(任意) -->
      {% if pre_order_badge_flg_hash[product.master.id] or delivery_group_badge_flg_hash[product.id] or concurrent_purchase_group_badge_flg_hash[product.id] or campaign_badge_flg_hash[product.id] %}
        <!-- セール商品予約マーク(任意) -->
        {% if pre_order_badge_flg_hash[product.master.id] %}
          予約商品
        {% endif %}
        <!-- セール商品配送温度帯ラベル(任意) -->
        {% for delivery_group_name in product.delivery_group_names %}
          {{ delivery_group_name }}
        {% endfor %}
        <!-- セール商品同時購入グループバッジ(任意) -->
        <!-- 「バッジ表示名」を表示したい場合、product.concurrent_purchase_group_names を product.concurrent_purchase_badge_names に修正してください。 -->
        {% for concurrent_purchase_group_name in product.concurrent_purchase_group_names %}
          {{ concurrent_purchase_group_name }}
        {% endfor %}
        <!-- キャンペーンバッジ(任意) -->
        {% assign badges = campaign_badge_flg_hash[product.id] | liquid_render_badges %}
        {% for render_badge in badges %}
          {{ render_badge | hash: 'value' }}
        {% endfor %}
      {% endif %}
 
      <!-- セール商品説明(任意) -->
      {{ product.description | simple_format }}
 
      <!-- セール商品販売価格(任意) -->
      {{ product.first_price | number_to_currency: format: '%n %u' }}
 
    {% endfor %}
 
  {% endif %}
  <!-- セール商品(任意) -->
 
  <!-- ランキング(任意) -->
  {% if base_info.use_product_sale_ranking and sale_rankings.size != 0 %}
    <a href="/shop/sale_ranking">ランキング画面へ</a>
 
    <!-- ランキングx件表示 例) limit: 5 => ランキング5件表示 -->
    {% for sale_ranking in sale_rankings | limit: 5 %}
 
      <!-- ランキング商品サムネイル画像(任意) -->
      <a href="/shop/products/{{ sale_ranking.product.master.sku }}">
        {% if sale_ranking.product.thumbnail.url %}
          {% assign src = sale_ranking.product.thumbnail.url %}
        {% else %}
          {% assign src = 'missing' | image_url %}
        {% endif %}
        <img src='{{ src }}'>
      </a>
 
      <!-- ランキング順位(任意) -->
      {{ sale_ranking.rank }}位
 
      <!-- ランキング商品名(任意) -->
      <a href="/shop/products/{{ sale_ranking.product.master.sku }}">{{ sale_ranking.product.name }}</a>
 
      <!-- ランキング商品バッジ(任意) -->
      {% if pre_order_badge_flg_hash[sale_ranking.product.master.id] or delivery_group_badge_flg_hash[sale_ranking.product.id] or concurrent_purchase_group_badge_flg_hash[sale_ranking.product.id] or campaign_badge_flg_hash[sale_ranking.product.id] %}
        <!-- ランキング商品予約マーク(任意) -->
        {% if pre_order_badge_flg_hash[sale_ranking.product.master.id] %}
          予約商品
        {% endif %}
        <!-- ランキング商品配送温度帯ラベル(任意) -->
        {% for delivery_group_name in sale_ranking.product.delivery_group_names %}
          {{ delivery_group_name }}
        {% endfor %}
        <!-- ランキング商品同時購入グループバッジ(任意) -->
        <!-- 「バッジ表示名」を表示したい場合、sale_ranking.product.concurrent_purchase_group_names を sale_ranking.product.concurrent_purchase_badge_names に修正してください。 -->
        {% for concurrent_purchase_group_name in sale_ranking.product.concurrent_purchase_group_names %}
          {{ concurrent_purchase_group_name }}
        {% endfor %}
        <!-- キャンペーンバッジ(任意) -->
        {% assign badges = campaign_badge_flg_hash[sale_ranking.product.id] | liquid_render_badges %}
        {% for render_badge in badges %}
          {{ render_badge | hash: 'value' }}
        {% endfor %}
      {% endif %}
 
      <!-- ランキング商品説明(任意) -->
      {{ sale_ranking.product.description | simple_format }}
 
      <!-- ランキング商品販売価格(任意) -->
      {{ sale_ranking.product.first_price | number_to_currency: format: '%n %u' }}
 
    {% endfor %}
 
  {% endif %}
  <!-- ランキング(任意) -->
 
{% endif %}
<!-- イチオシ商品、新着商品一覧、セール商品一覧(全て任意)、ランキング ここまで-->
 
<!-- セレクション(特集)一覧 (任意)ここから -->
<!-- 特集一覧ページへのリンク(任意) -->
<a href="/shop/selections">特集一覧へ</a>
 
<!-- 特集(任意) -->
{% if selections.size != 0 %}
 
  <!-- 特集(任意) -->
  {% for selection in selections %}
 
    <!-- 特集アイキャッチ画像(任意) -->
    <a href="/shop/selections/{{ selection.friendly_id }}">
      <img src='{{ selection.eye_catch_path }}' alt="{{ selection.title }}">
    </a>
 
    <!-- 特集タイトル(任意) -->
    <a href="/shop/information/{{ selection.friendly_id }}">{{ selection.title }}</a>
  {% endfor %}
 
{% endif %}
<!-- セレクション(特集)一覧 (任意)ここまで-->

画面イメージ

こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。
コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。