Shopify にブログ記事一覧（お知らせ一覧）を表示する方法（コーディング・アプリ）について徹底解説！

はじめに

本記事では、Shopify のブログ記事一覧（お知らせ一覧）について解説します。

Shopify ストアでブログ記事一覧（お知らせ一覧）を表示するメリットやブログ記事一覧（お知らせ一覧）の表示方法を画像を用いた実践形式で説明します。

今回は、以下の記事を参考にしています。

Shopify のブログ記事一覧（お知らせ一覧）とは

Shopify のブログ機能を使うと、ブログ記事やお知らせ記事を簡単に管理し、サイト上で一覧表示することができます。これにより、顧客や訪問者に対して最新情報や特定のテーマに関する記事を効率的に提供できます。各記事はカテゴリやタグで分類できるため、訪問者が興味のあるトピックをすばやく見つけやすくなります。

Shopify のブログ記事一覧（お知らせ一覧）を使用するメリット

SEO の強化

ブログ記事を継続的に更新することで、検索エンジンからの評価が向上します。これにより、自然検索結果での順位が上がり、より多くのトラフィックをショップに誘導できます。特に、特定のキーワードに焦点を当てた記事を書くことで、狙ったターゲット層を効率的に集客することが可能です。

ブランドの信頼性向上

業界に関する最新のニュースやトレンドについての記事を発信することで、ブランドが業界内で信頼される専門家として認識されます。これにより、顧客に安心感を与え、長期的な信頼関係を築くことができるでしょう。

顧客とのエンゲージメント強化

ブログ記事に対して顧客がコメントを残せるようにすることで、ダイレクトなフィードバックを得られます。また、ソーシャルメディアで記事を共有することで、さらに多くの潜在顧客とつながり、顧客との関係を深めることができます。

新製品やキャンペーンの告知

新製品の発売やキャンペーンの開始時にブログ記事を活用することで、訪問者にタイムリーに情報を伝えることができます。これにより、興味を引き、即座に行動を促すことができ、売上増加につながります。

顧客教育

商品の特長や使用方法を詳しく説明する記事を提供することで、顧客がより自信を持って商品を購入できるようになります。これにより、顧客満足度が向上し、購入後のトラブルを減少させることが期待されます。

Shopify にブログ記事一覧（お知らせ一覧）を表示させる方法

Shopify にブログ記事一覧（お知らせ一覧）を表示させる方法には、「テーマにあるブログ一覧（お知らせ一覧）のセクションを使用する」、「テーマにブログ一覧（お知らせ一覧）のセクションを作成・追加する」、「Shopify App Store からブログ一覧（お知らせ一覧）アプリをインストールする」の 3 つの方法があります。

※あらかじめブログを作成する必要があります。ブログの作成方法についてはこちらをご覧ください。

本記事では Dawn のテーマを使用して解説します。

テーマにあるブログ一覧（お知らせ一覧）のセクションを使用する

Shopify 管理画面で「販売チャネル > テーマ」を開きます。
「販売チャネル > テーマ」を開く

ブログ一覧（お知らせ一覧）のセクションを使用するテーマの「カスタマイズ」ボタンをクリックします。

選択したテーマのカスタマイズ画面が表示されます。

ブログ一覧（お知らせ一覧）のセクションを表示したページに移動し、「セクションを追加」ボタンをクリックし、「ブログ記事」セクションを選択します。

セクションの設定が表示されるので、ブログ一覧（お知らせ一覧）のデザインや表示するブログを設定してください。

設定し「保存する」ボタンをクリックすると、ブログ一覧（お知らせ一覧）を表示することができます。

テーマにブログ一覧（お知らせ一覧）のセクションを作成・追加する

使用しているテーマにブログ一覧（お知らせ一覧）のセクションがない場合、コーディングでブログ一覧（お知らせ一覧）セクションを作成する必要があります。

この方法では、コーディングが必要になりますので、普段プログラミングをされていない方は、次に紹介する「Shopify App Store からブログ一覧（お知らせ一覧）アプリをインストールする」の方法でブログ一覧（お知らせ一覧）を表示することをお勧めします。

それでは、説明していきます。

Shopify 管理画面で「販売チャネル > テーマ」を開きます。

「販売チャネル > テーマ」を開く

ブログ一覧（お知らせ一覧）のセクションを作成・追加するテーマの「・・・ > コードを編集」ボタンをクリックします。

「・・・ > コードを編集」ボタンをクリック

選択したテーマのテーマエディタが表示されます。

テーマエディタが表示

sections フォルダの「+ 新しいセクションを追加する」ボタンをクリックします。

「+ 新しいセクションを追加する」ボタンをクリック

custom-blog-posts.liquid ファイルを追加します。

ファイルに下記のコードを貼り付けます。

<div class="blog-article-list">
  {% assign blog_articles = blogs[section.settings.blog].articles | limit: section.settings.articles_count %}
  {% for article in blog_articles %}
    <div class="blog-article">
      <a href="{{ article.url }}">
        <img src="{{ article.image | img_url: 'large' }}" alt="{{ article.title }}">
      </a>
      <h2 class="blog-article-title">{{ article.title }}</h2>
      <p class="blog-article-excerpt">{{ article.excerpt | strip_html | truncate: 100 }}</p>
      <a class="blog-article-link" href="{{ article.url }}">Read more</a>
    </div>
  {% endfor %}
</div>

{% style %}
  .blog-article-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .blog-article {
    width: calc(33.333% - 20px);
  }

  .blog-article img {
    width: 100%;
    height: auto;
  }

  .blog-article-title {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
  }

  .blog-article-excerpt {
    font-size: 14px;
  }

  .blog-article-link {
    display: inline-block;
    margin-top: 10px;
    color: #000;
    text-decoration: underline;
  }
{% endstyle %}

{% schema %}
{
  "name": "Custom Blog Posts",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "Blog"
    },
    {
      "type": "number",
      "id": "articles_count",
      "label": "Number of articles to display",
      "default": 5
    }
  ],
  "presets": [
    {
      "name": "Custom Blog Posts ",
    }
  ]
}
{% endschema %}

コード追加