【Shopify】新着情報・お知らせ一覧のセクションを作成する【簡単】｜liquid note

いわゆる新着情報が縦並びになってる「お知らせ一覧」って日本のサイト、特にコーポレートサイトだと定番のコンテンツですが、Shopifyのテーマではあまり見かけないですよね。（大抵は四角いブログ記事が横に3つ並ぶのが1種類用意されているだけ・・）

ただ、案件としては、「ECにもコーポレートサイトの機能を持たせたい」とか「ニュースティッカーくらい普通にあるでしょ？」みたいな声をいただくことも多いです。。

そこで今回は、トップページにお知らせ一覧を追加するためのサンプルコードを作成してみました。

▼今回作成するサンプル▼

kei

コピペするだけでも実装できますが、コードも簡単に解説しているので、要望に合わせてカスタマイズしてみて下さい

Contents

【まずはコピペ】トップページに「お知らせ一覧」のセクションを追加する
- 実際にストアに表示させてみよう
今回追加したコードの簡単な解説
まとめ

【まずはコピペ】トップページに「お知らせ一覧」のセクションを追加する

まずは「オンラインストア」>「テーマ」を選択します。

次に編集するテーマの「アクション」から「コードを編集する」を選択します。

「新しいSectionを追加する」をクリックして、お知らせ一覧を表示するための場所を作成します。

名前は自由ですが、今回は「news-list」にしておきましょう。

空の「news-list.liquid」が追加できたら、そこに以下のコードをコピペします。

{%- assign blog = blogs[section.settings.news_list] -%}

<div id="section-news-list">
  <div class="container">
    <div class="news-list-heading">
      <h2>{{ section.settings.title | escape }}</h2>
      <a href="{{ blog.url }}">一覧を見る</a>
    </div>
      <ul class="news-list">
        {% for article in blog.articles limit: section.settings.post_limit %}
        	<li class="news-list-item">
              <a href="{{ article.url }}">
                <div class="news-list-info">
                  {% if section.settings.news_list_date %}
                    <span class="news-list-date">{{ article.published_at | date: "%Y &frasl; %m &frasl; %d" }}</span>
                  {% endif %}
                  {% if section.settings.news_list_category %}
                    <span class="news-list-category">{{ article.tags }}</span>
                  {% endif %}
                </div>
                <div class="news-list-title">{{ article.title }}</div>
              </a>
        	</li>
        {% endfor %}
      </ul>
  </div>
</div>

{% schema %}
{
  "name": "お知らせ一覧",
  "settings": [
    {
      "id": "title",
      "type": "text",
      "label": "見出し",
      "default": "お知らせ一覧"
    },
    {
      "id": "news_list",
      "type": "blog",
      "label": "表示するブログ記事を選択"
    },
    {
      "id": "post_limit",
      "type": "range",
      "label": "表示数を選択",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3
    },
    {
      "id": "news_list_date",
      "type": "checkbox",
      "label": "日付を表示する",
      "default": true
    },
    {
      "id": "news_list_category",
      "type": "checkbox",
      "label": "カテゴリーを表示する",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "お知らせ一覧",
      "category": "お知らせ一覧"
    }
  ]
}
{% endschema %}

{% stylesheet %}
  #section-news-list .news-list-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
  }
  #section-news-list .container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px;
  }
  #section-news-list .news-list{
    border: 1px solid #ccc;
  }
  #section-news-list .news-list-item{
    border-bottom: 1px solid #ccc;
  }
  #section-news-list .news-list-item>a{
    display: flex;
    align-items: center;
    padding: 20px;
  }
  #section-news-list .news-list-item:last-child{
    border-bottom: none;
  }
  #section-news-list .news-list-date{
    font-size: 12px;
    margin-right: 15px;
  }
  #section-news-list .news-list-category{
    font-size: 10px;
    color: #fff;
    background: #000;
    padding: 5px;
    margin-right: 15px;
  }
  #section-news-list .news-list-info{
    position: relative;
    top: -1px;
  }
  #section-news-list .news-list-title{
    font-size: 14px;
    margin-bottom: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    top: 1px;
  }
  @media screen and (max-width: 768px){
    #section-news-list .container{
      padding: 35px 20px;
    }
    #section-news-list .news-list-item>a{
      display: block;
      padding: 15px;
    }
    #section-news-list .news-list-info{
      margin-bottom: 5px;
    }
  }
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

こんな感じになっていればOKです。

これでお知らせ一覧を表示させる準備は整いました。

実際にストアに表示させてみよう

お知らせ一覧をストア上に表示するには、「テーマ」から「カスタマイズ」を選択します。

次に「セクションを追加する」を選択します。

セクションの一覧の一番上に「お知らせ一覧」というセクションが新たに追加されているので、選択します。

あとは表示させたい「ブログ」を選択すれば、トップページに記事の一覧が表示されるはずです。

こんな感じで表示されるはず！デザインはCSSで適宜調整してください。

今回追加したコードの簡単な解説

何でトップページに一覧が表示されるようになったのか？を簡単に解説します。

「カスタマイズ」から編集をするためには「Sections」に追加する必要がある

テーマの「カスタマイズ」からコードを編集せずにパーツを追加したり削除したりするためには、テーマファイル内の「Sections」という場所にLiquidファイルを作る必要があります。

「カスタマイズ」の編集項目は「schema」で設定する

コードの下のほうにある {% schema %}〜{% endschema %} という記述は、テーマのカスタマイズに入力欄やチェックボックスを作ったりするための記述になります。

トップページに表示するセクションは「schema」に”presets”の設定が必要

さらに、トップページのセクションとして「お知らせ一覧」という項目を追加するためには{% schema %}〜{% endschema %} の中にある“presets”という設定が必要です。
今回は「お知らせ一覧」というカテゴリの「お知らせ一覧」という名前のパーツを作成していることになります。