Shopifyでブログ記事一覧（お知らせ一覧）を実装する方法を考察

はじめに

今回は、Shopify でブログ記事一覧（お知らせ一覧）を実装する方法について考察していきます。

HTML・CSS を用いてブログ記事一覧（お知らせ一覧）を実装する方法や、Liquid のオブジェクトについて調べていきます。

それでは、頑張っていきましょう。

Shopify でブログ記事一覧（お知らせ一覧）を実装する定義

まずは、Shopify でブログ記事一覧（お知らせ一覧）を実装する定義について考えていきましょう。

Shopifyでブログ記事一覧を実装するとは、ストア内に掲載されている複数のブログ記事を一覧形式で表示する機能を指します。

これにより、訪問者は特定のカテゴリやタグに関連する複数の記事を一目で確認し、興味のあるコンテンツに迅速にアクセスできるようになります。

ブログ記事一覧は、ブログのトップページや特定のコレクションページに配置することが一般的です。ShopifyのテンプレートやLiquidコードを使用して、記事のタイトル、概要、公開日、サムネイル画像などを表示できます。

また、ページネーションを追加することで、膨大な記事がある場合でも快適な閲覧体験を提供できます。ブログ記事一覧を導入することで、SEO対策や訪問者のエンゲージメント向上を図ることができ、ストア全体のコンテンツマーケティング戦略を強化することが可能です。

Shopifyでブログ記事一覧を実装するメリット

まずは、Shopify でブログ記事一覧を実装するメリットについて考えていきましょう。

Shopifyでブログ記事一覧を実装することは、ECサイト運営において多くのメリットをもたらします。以下では、そのメリットを解説します。

1. 訪問者のエンゲージメント向上

ブログ記事一覧を実装することで、訪問者は興味のある記事に簡単にアクセスできるようになります。記事一覧があることで、複数の記事を一目で確認できるため、サイト内での滞在時間が増加し、結果的にエンゲージメントが向上します。特に、関連性の高い記事が連続して表示されることで、訪問者が次々と記事を読む動機づけとなり、サイト内での回遊率が上がることが期待できます。

2. SEO対策の強化

ブログ記事一覧を構築することで、内部リンクが増加し、サイト全体のSEOパフォーマンスが向上します。記事一覧ページは、Googleなどの検索エンジンに対して、サイト内のコンテンツの構造を明確に伝える役割を果たします。さらに、特定のキーワードで複数の記事がヒットする場合、検索エンジンが関連性の高いコンテンツとして評価しやすくなるため、検索順位の向上につながります。

3. ブランド認知度の向上

ブログ記事一覧は、ブランドの専門性や情報発信力を示すための重要なツールです。記事一覧を通じて、訪問者に対して一貫性のあるメッセージや価値観を伝えることができ、ブランドの認知度と信頼性が向上します。特に、専門的な内容や独自の視点を持った記事が多く掲載されている場合、訪問者に対して「このブランドは信頼できる情報源である」と認識させることができます。

4. コンテンツマーケティングの効率化

ブログ記事一覧は、コンテンツマーケティング戦略を効率的に進める上で欠かせない機能です。記事一覧を活用することで、過去の記事を効果的に再利用でき、新しい訪問者にも既存のコンテンツを見てもらう機会が増えます。これにより、コンテンツの鮮度を保ちながらも、リソースを節約することが可能です。また、特定のテーマやキャンペーンに合わせた記事一覧を作成することで、ターゲット層に対するメッセージを強化することができます。

Shopifyでブログ記事一覧を実装するデメリット

それでは次に、Shopify でブログ記事一覧を実装するデメリットについて考察していきます。

ブログ記事一覧を実装することは多くのメリットをもたらしますが、同時にいくつかのデメリットやリスクも伴います。以下では、そのデメリットについて技術ブログ風に解説します。

1. サイトのパフォーマンスへの影響

ブログ記事一覧を表示するには、各記事のデータを一度に読み込み、一覧表示する必要があります。特に、多くの記事を一度に表示する場合や、画像が多い場合、ページの読み込み速度が遅くなる可能性があります。これにより、訪問者がページを開くまでに時間がかかり、離脱率が高まるリスクがあります。さらに、ページのパフォーマンスが低下すると、検索エンジンによる評価も下がり、SEOに悪影響を与える可能性があります。

2. 管理の手間が増える

ブログ記事一覧を効果的に運用するためには、コンテンツの定期的な更新が必要です。新しい記事を公開するたびに、記事一覧ページを更新したり、過去の記事を整理したりする手間が発生します。また、特定の記事を優先的に表示したい場合や、古くなった記事を非表示にしたい場合、手動での調整が必要となり、管理コストが増加する可能性があります。これにより、小規模な運営チームやリソースが限られている場合、負担が大きくなることがあります。

3. ユーザーエクスペリエンスの低下

ブログ記事一覧は、すべての訪問者にとって有益とは限りません。特に、記事が多すぎる場合、訪問者がどの記事を読むべきか迷ってしまい、かえって混乱を招くことがあります。情報過多の状態に陥ると、訪問者が重要な情報を見逃すリスクがあり、サイト全体のユーザーエクスペリエンスが低下する可能性があります。さらに、特定の記事にアクセスするためにスクロールやフィルタリングが必要になる場合、訪問者がストレスを感じることもあります。

4. デザインやレイアウトの制約

ブログ記事一覧を実装する際には、デザインやレイアウトに制約が生じることがあります。Shopifyのテーマによっては、記事一覧のカスタマイズが難しく、サイト全体のデザインとの一貫性を保つのが困難になる場合があります。これにより、ブランドイメージを損なう可能性や、サイトのビジュアルコンセプトに合わない一覧表示になるリスクがあります。また、デザインの制約が原因で、必要な情報が適切に伝わらない場合もあります。

5. コンテンツの鮮度の低下

ブログ記事一覧に古い記事が多く含まれていると、サイトのコンテンツ全体が古く見えてしまう可能性があります。特に、更新頻度が低いサイトでは、記事一覧が過去のコンテンツばかりで占められることになり、新規訪問者に対してネガティブな印象を与えるリスクがあります。このため、記事一覧を維持し続けるには、継続的なコンテンツ更新が求められ、それが負担となる場合があります。

Shopify でブログ記事一覧（お知らせ一覧）を実装する方法

それでは、Shopify でブログ記事一覧（お知らせ一覧）を実装する方法について考察していきます。

まずは、使用する Liquid のオブジェクトを確認していきましょう。

使用する Liquid オブジェクトの確認

それでは、使用する Liquid オブジェクトを確認していきます。

Shopify でブログ記事を表示させるためには、blogオブジェクトを使用する必要が有るかと思います。

以下の Liquid の公式ドキュメントが参考になります。

https://shopify.dev/docs/api/liquid/objects/blog

blogオブジェクトの中身は、以下のような形になっています。

{
  "all_tags": [],
  "articles": [],
  "articles_count": 3,
  "comments_enabled?": true,
  "handle": "potion-notions",
  "id": 78580613185,
  "metafields": {},
  "moderated?": true,
  "next_article": {},
  "previous_article": {},
  "tags": [],
  "template_suffix": "",
  "title": "Potion Notions",
  "url": "/blogs/potion-notions"
}

上記のarticlesに、ブログ記事の情報が入っています。

ちなみに、blogオブジェクトはblogsオブジェクトを用いてアクセスできます。

ドキュメントに有る通り、blogsオブジェクトからblogオブジェクトへのアクセスはhandleを用いて行われます。

それでは次に、articleオブジェクトを見ていきましょう。

以下の、articleオブジェクトを見ていきます。

https://shopify.dev/docs/api/liquid/objects/article

articleオブジェクトには、以下の要素が含まれています。

{
  "author": "Polina Waters",
  "comment_post_url": "/blogs/potion-notions/how-to-tell-if-you-have-run-out-of-invisibility-potion/comments",
  "comments": [],
  "comments_count": 1,
  "comments_enabled?": true,
  "content": "<p>We've all had this problem before: we peek into the potions vault to determine which potions we are running low on, and the invisibility potion bottle looks completely empty.</p>\n<p>...</p>\n<p> </p>",
  "created_at": "2022-04-14 16:56:02 -0400",
  "excerpt": "And where to buy <strong>more</strong>!",
  "excerpt_or_content": "And where to buy <strong>more</strong>!",
  "handle": "potion-notions/how-to-tell-if-you-have-run-out-of-invisibility-potion",
  "id": 556510085185,
  "image": {},
  "metafields": {},
  "moderated?": true,
  "published_at": "2022-04-14 16:56:02 -0400",
  "tags": [],
  "template_suffix": "",
  "title": "How to tell if you're out of invisibility potion",
  "updated_at": "2022-06-04 19:27:33 -0400",
  "url": {},
  "user": {}
}

上記に有る通り、titleにはブログのタイトルが、excerptにはブログの抜粋が、urlにはブログのリンクが格納されています。

また、imageにはブログ記事の画像が格納されているので、ブログ記事一覧を実装する際には利用できそうですね。

それでは次に、HTML・CSS を用いてブログ記事一覧を実装してみましょう。

HTML・CSS を用いたブログ記事一覧

以下が、サンプルコードです。

<ul class='news-section-article-list-6'>
  <li class='news-section-article-list-item-6'>
    <a href='#' class='news-section-article-link-6'>
      <div class='news-section-article-image-wrapper-6'>
        <img
          src='your-image-url.jpg'
          loading='lazy'
          sizes='(min-width: 1200px) 3200px, 100vw'
          srcset='your-image-url.jpg 3200w'
          class='news-section-article-image-6'
          alt='Your Image Alt Text'
        />
      </div>
      <div class='news-section-article-content-6'>
        <div class='news-section-article-title-and-excerpt-6'>
          <h3 class='news-section-article-title-6'>記事のタイトル</h3>
          <div class='news-section-article-excerpt-6'>記事の抜粋テキスト...</div>
        </div>
        <div class='news-section-article-meta-data-6'>
          <div class='news-section-article-tag-container-6'>
            <div class='news-section-article-tag-6'>タグ1</div>
            <div class='news-section-article-tag-6'>タグ2</div>
          </div>
          <div class='news-section-article-date-and-author-container-6'>
            <time class='news-section-article-date-6'>2024年8月8日</time>
            <div class='news-section-article-author-6'>執筆者名</div>
          </div>
        </div>
      </div>
    </a>
    <a href='#' class='news-section-article-link-6'>
      <div class='news-section-article-image-wrapper-6'>
        <img
          src='your-image-url.jpg'
          loading='lazy'
          sizes='(min-width: 1200px) 3200px, 100vw'
          srcset='your-image-url.jpg 3200w'
          class='news-section-article-image-6'
          alt='Your Image Alt Text'
        />
      </div>
      <div class='news-section-article-content-6'>
        <div class='news-section-article-title-and-excerpt-6'>
          <h3 class='news-section-article-title-6'>記事のタイトル</h3>
          <div class='news-section-article-excerpt-6'>記事の抜粋テキスト...</div>
        </div>
        <div class='news-section-article-meta-data-6'>
          <div class='news-section-article-tag-container-6'>
            <div class='news-section-article-tag-6'>タグ1</div>
            <div class='news-section-article-tag-6'>タグ2</div>
          </div>
          <div class='news-section-article-date-and-author-container-6'>
            <time class='news-section-article-date-6'>2024年8月8日</time>
            <div class='news-section-article-author-6'>執筆者名</div>
          </div>
        </div>
      </div>
    </a>
    <a href='#' class='news-section-article-link-6'>
      <div class='news-section-article-image-wrapper-6'>
        <img
          src='your-image-url.jpg'
          loading='lazy'
          sizes='(min-width: 1200px) 3200px, 100vw'
          srcset='your-image-url.jpg 3200w'
          class='news-section-article-image-6'
          alt='Your Image Alt Text'
        />
      </div>
      <div class='news-section-article-content-6'>
        <div class='news-section-article-title-and-excerpt-6'>
          <h3 class='news-section-article-title-6'>記事のタイトル</h3>
          <div class='news-section-article-excerpt-6'>記事の抜粋テキスト...</div>
        </div>
        <div class='news-section-article-meta-data-6'>
          <div class='news-section-article-tag-container-6'>
            <div class='news-section-article-tag-6'>タグ1</div>
            <div class='news-section-article-tag-6'>タグ2</div>
          </div>
          <div class='news-section-article-date-and-author-container-6'>
            <time class='news-section-article-date-6'>2024年8月8日</time>
            <div class='news-section-article-author-6'>執筆者名</div>
          </div>
        </div>
      </div>
    </a>
  </li>
  <!-- 以降の記事リスト -->
</ul>

<!-- すべてのお知らせを見るリンク -->
<a href='/blogs/your-blog-handle' class='news-section-view-more-link-text-6'>
  すべてのお知らせを見る
</a>

<style>
  /* お知らせセクションのスタイル */
  .news-section-article-list-6 {
    width: 100%;
    margin-top: 32px;
  }

  /* aタグのスタイル */
  .news-section-article-link-6 {
    display: flex;
    text-decoration: none;
    color: #000000; /* テキストカラー */
    padding: 16px;
  }

  @media (min-width: 768px) {
    .news-section-article-link-6 {
      padding: 24px 16px 16px 16px;
    }

    .news-section-article-link-6:hover .news-section-article-image-6 {
      transform: scale(1.05); /* 5% 拡大 */
    }
  }

  /* コンテンツの配置 */
  .news-section-article-content-6 {
    display: flex;
    flex-direction: column;
  }

  .news-section-article-image-wrapper-6 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-right: 16px;
    max-width: 20%;
    border-radius: 11px;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
  }

  @media (min-width: 768px) {
    .news-section-article-image-wrapper-6 {
      transition: transform 0.6s ease;
      margin-right: 40px;
    }
  }

  /* 画像のスタイル */
  .news-section-article-image-6 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.6s ease;
  }

  /* li のスタイル */
  .news-section-article-list-item-6 {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    border-bottom: 1px solid #CCCCCC; /* ボーダーカラー */
    background-color: #FFFFFF; /* バックグラウンドカラー */
  }

  /* タイトル */
  .news-section-article-title-6 {
    color: #000000; /* テキストカラー */
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
  }

  @media (min-width: 768px) {
    .news-section-article-title-6 {
      font-size: 16px;
    }
  }

  /* 抜粋 */
  .news-section-article-excerpt-6 {
    font-size: 12px;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
  }

  @media (min-width: 768px) {
    .news-section-article-excerpt-6 {
      -webkit-line-clamp: 1;
    }
  }

  /* 日付・執筆者の配置 */
  .news-section-article-meta-data-6 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    flex-direction: column;
  }

  .news-section-article-date-and-author-container-6 {
    display: flex;
    align-items: baseline;
    margin-top: 8px;
  }

  .news-section-article-date-6 {
    color: #000000; /* テキストカラー */
    font-size: 12px;
    margin-right: 8px;
  }

  .news-section-article-author-6 {
    font-size: 12px;
    flex-shrink: 0;
  }

  /* タグの配置 */
  .news-section-article-tag-container-6 {
    display: flex;
    flex-wrap: wrap;
  }

  /* タグ */
  .news-section-article-tag-6 {
    font-size: 11px;
    color: #FF0000; /* プライマリカラー */
    border: 2px solid #FF0000; /* プライマリカラー */
    margin-top: 8px;
    margin-right: 8px;
    padding: 4px 12px;
    border-radius: 11px;
    line-height: 1;
  }

  /* すべてのお知らせを見る */
  .news-section-view-more-link-text-6 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    font-weight: bold;
    color: #000000; /* 見出しカラー */
    border: solid 1px #000000; /* 見出しカラー */
    border-radius: 8px;
    padding: 17px 50px;
    text-decoration: none;
    min-width: 280px;
    max-width: 80%;
  }

  .news-section-view-more-link-text-6:hover {
    text-decoration: underline;
  }
</style>

それでは、上記のコードについて解説していきます。まずは、HTML 部分の解説からです。

```html
<ul class='news-section-article-list-6'>
  <li class='news-section-article-list-item-6'>
    <!-- 記事リンク -->
    <a href='#' class='news-section-article-link-6'>
      <!-- 記事の画像表示 -->
      <div class='news-section-article-image-wrapper-6'>
        <img
          src='your-image-url.jpg'
          loading='lazy'
          sizes='(min-width: 1200px) 3200px, 100vw'
          srcset='your-image-url.jpg 3200w'
          class='news-section-article-image-6'
          alt='Your Image Alt Text'
        />
      </div>
      <!-- 記事のコンテンツ -->
      <div class='news-section-article-content-6'>
        <div class='news-section-article-title-and-excerpt-6'>
          <h3 class='news-section-article-title-6'>記事のタイトル</h3>
          <div class='news-section-article-excerpt-6'>記事の抜粋テキスト...</div>
        </div>
        <div class='news-section-article-meta-data-6'>
          <!-- 記事タグの表示 -->
          <div class='news-section-article-tag-container-6'>
            <div class='news-section-article-tag-6'>タグ1</div>
            <div class='news-section-article-tag-6'>タグ2</div>
          </div>
          <!-- 記事の日付と執筆者情報 -->
          <div class='news-section-article-date-and-author-container-6'>
            <time class='news-section-article-date-6'>2024年8月8日</time>
            <div class='news-section-article-author-6'>執筆者名</div>
          </div>
        </div>
      </div>
    </a>
    <!-- 次の記事へのリンク -->
    <a href='#' class='news-section-article-link-6'>
      <!-- 以下同様の構造が続く -->
    </a>
  </li>
</ul>

<!-- "すべてのお知らせを見る" リンク -->
<a href='/blogs/your-blog-handle' class='news-section-view-more-link-text-6'>
  すべてのお知らせを見る
</a>

• 記事リスト (<ul>要素): 複数の記事をリスト形式で表示します。<li>要素がそれぞれの記事を表しています。
• リンク付き画像とコンテンツ (<a>要素): それぞれの記事はリンク付きの画像、タイトル、抜粋、タグ、日付、執筆者情報で構成されます。
• "すべてのお知らせを見る"リンク (<a>要素): 記事一覧の下に表示されるリンクで、全記事を表示するページに遷移させます。

それでは次に、CSS 部分の解説です。

/* お知らせセクションのスタイル */
.news-section-article-list-6 {
  width: 100%;
  margin-top: 32px;
}

/* 記事リンクのスタイル */
.news-section-article-link-6 {
  display: flex;
  text-decoration: none;
  color: #000000; /* テキストカラー */
  padding: 16px;
}

@media (min-width: 768px) {
  .news-section-article-link-6 {
    padding: 24px 16px 16px 16px;
  }

  .news-section-article-link-6:hover .news-section-article-image-6 {
    transform: scale(1.05); /* 5% 拡大 */
  }
}

/* コンテンツの配置 */
.news-section-article-content-6 {
  display: flex;
  flex-direction: column;
}

.news-section-article-image-wrapper-6 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-right: 16px;
  max-width: 20%;
  border-radius: 11px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
  .news-section-article-image-wrapper-6 {
    transition: transform 0.6s ease;
    margin-right: 40px;
  }
}

/* 画像のスタイル */
.news-section-article-image-6 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s ease;
}

/* 記事リスト項目のスタイル */
.news-section-article-list-item-6 {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  border-bottom: 1px solid #CCCCCC; /* ボーダーカラー */
  background-color: #FFFFFF; /* バックグラウンドカラー */
}

/* タイトル */
.news-section-article-title-6 {
  color: #000000; /* テキストカラー */
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}

@media (min-width: 768px) {
  .news-section-article-title-6 {
    font-size: 16px;
  }
}

/* 抜粋 */
.news-section-article-excerpt-6 {
  font-size: 12px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

@media (min-width: 768px) {
  .news-section-article-excerpt-6 {
    -webkit-line-clamp: 1;
  }
}

/* 日付・執筆者の配置 */
.news-section-article-meta-data-6 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  flex-direction: column;
}

.news-section-article-date-and-author-container-6 {
  display: flex;
  align-items: baseline;
  margin-top: 8px;
}

.news-section-article-date-6 {
  color: #000000; /* テキストカラー */
  font-size: 12px;
  margin-right: 8px;
}

.news-section-article-author-6 {
  font-size: 12px;
  flex-shrink: 0;
}

/* タグの配置 */
.news-section-article-tag-container-6 {
  display: flex;
  flex-wrap: wrap;
}

/* タグ */
.news-section-article-tag-6 {
  font-size: 11px;
  color: #FF0000; /* プライマリカラー */
  border: 2px solid #FF0000; /* プライマリカラー */
  margin-top: 8px;
  margin-right: 8px;
  padding: 4px 12px;
  border-radius: 11px;
  line-height: 1;
}

/* すべてのお知らせを見る */
.news-section-view-more-link-text-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  font-weight: bold;
  color: #000000; /* 見出しカラー */
  border: solid 1px #000000; /* 見出しカラー */
  border-radius: 8px;
  padding: 17px 50px;
  text-decoration: none;
  min-width: 280px;
  max-width: 80%;
}

.news-section-view-more-link-text-6:hover {
  text-decoration: underline;
}

• 全体レイアウト: .news-section-article-list-6クラスは、全体のレイアウトを定義し、各記事リストアイテムは.news-section-article-list-item-6クラスでスタイルされています。
• 画像とリンク: .news-section-article-link-6クラスは、各記事全体をリンクとして設定し、マウスホバー時のスタイルも定義しています。
• タグ、日付、執筆者情報: .news-section-article-meta-data-6クラスとその子要素のクラスが、タグ、日付、執筆者情報の表示スタイルを設定しています。
• レスポンシブデザイン: メディアクエリを使用して、768px以上の画面幅に対するスタイル調整を行っています。特に、画像やリンクのホバー効果、テキストサイズの調整が含まれます。

ここまでが、ブログ記事一覧を表示するための HTML・CSS のコードと、そのコードの解説になります。

こちらのコードと、Shopify の Liquid オブジェクトを利用すれば、Shopify でブログ記事一覧を表示できそうですね。

ここまでで、コードについての解説は終了です。

ここからは、非エンジニアの方に向けて、Shopify アプリを用いてブログ記事一覧を実装する方法を解説していきます。

Shopify アプリを使ってブログ記事一覧を実装する方法

それでは、Shopify アプリを使ってブログ記事一覧を実装する方法について紹介していきます。

今回紹介するのは、シンプルお知らせ一覧｜お手軽ブログ一覧挿入アプリというアプリです。

以下の記事を参考にしています。

https://unreact.jp/blog/shopify-blog-posts-announcements-list

https://unblog.unreact.jp/blog/shopify-blog-list

https://unreact.jp/shopify-apps/sa-029-ur-news-section-app/guide

https://qiita.com/eijiSaito/items/566f480b9435820f06d5

以下が、Shopify 公式のアプリストアです。

https://apps.shopify.com/ur-smart-blog-articles?locale=ja

こちらのアプリについて簡単に紹介していきます。

シンプルお知らせ一覧｜お手軽ブログ一覧挿入アプリの機能について

シンプルお知らせ一覧｜お手軽ブログ一覧挿入アプリは、ノーコードで簡単にブログ一覧を Shopify に実装できるアプリです。

ノーコードで、以下のようなお知らせセクションを挿入できます。

ブログ一覧セクションは 10 種類以上のスタイルから選択できます。

日本製の Shopify アプリなので、デザインも日本っぽいですね。

また、ノーコードで見た目をカスタマイズできます。背景色やテキストの色など、様々な項目をカスタマイズ可能です。

安価で使いやすいブログ一覧セクション挿入アプリなので、コーディングでブログ一覧を作成するのが難しい場合には、選択肢の一つに入ってくるかと思います。

https://apps.shopify.com/ur-smart-blog-articles?locale=ja

最後に

今回は、コーディングでブログ一覧を作成する方法と、Shopify アプリを用いてブログ一覧を作成する方法について解説しました。

お疲れさまでした。