[Shopify] ブログサイドバーにピックアップおすすめ記事を表示させる

現状、ブログ記事のサイドバーには

• プロフィール
• カテゴリ一覧
• アーカイブ

が表示されていますが、ここに自分でピックアップしたおすすめ記事を載せたいと考えました。

イメージはこんな感じです。（各記事はカスタマイズ画面から編集可能になっています。）

好きな記事をピックアップし、表示させる仕様です。

おすすめ記事の効果

検索エンジンからブログ記事に来てもらった際に、できれば他の記事もついでに見ていって欲しい。。そんな風に考えるのは自然なことでしょう。

しかし、表示したブログ記事内に導線となる他の記事へのリンクがないとユーザーはすぐに離脱してしまいます。

まずは

• サイト内にどのような記事があるのか
• 人気な（おすすめしたい）記事はどんなものがあるのか

をちゃんと一覧表示し、ユーザーに提示することで滞在時間を増やすことが効果として期待されています。

おすすめ記事を表示するためのコード

 それでは、さっそくピックアップ（おすすめ）記事を表示するためのコードを作成します。

これを新規セクションを作成し、コピペします。

 私は"pickup-articles.liquid"と名前をつけ保存しました！

そして、毎度毎度になりますが表示させたい場所に、、、

を記載すればおすすめ記事を表示できます！（まだカスタマイズ画面から編集が必要。）

カスタマイズ画面からおすすめ記事を選択する

これでコード側の編集は終わりましたので、今度は管理画面から表示させたい記事を選択していきます。

管理画面→オンラインストア→テーマ→該当テーマのカスタマイズ

カスタマイズボタンを押したら先ほど作成したpickup-articles.liquidを挿入したページに移動しましょう。

私が挿入したのはブログ記事のサイドバーなので、適当なブログ記事を開きます。すると、カスタマイズ画面に"pickup articles"というセクションが表示されるはずです。

（表示されない場合は、埋め込む場所が間違っているか、開いているページが間違っている可能性があります。）

このpickup articlesを開いてみると記事を追加していける仕様になっています。

一応際限なく何記事でも追加できるようにはなっていますが、長すぎるとスクロールが大変なので、程々にしておきましょう。

ここで選択した記事が、、、

このようにおすすめ記事の画像、タイトルとして表示されます。

スタイル変更したい場合は、<style>タグの中で変更できますので、そちらからCSSを編集できます。ご自由にカスタマイズしてみてください！（ちなみに私は、おすすめ記事というタイトルに加え、枠なども別途HTML/CSSで編集しているので、必ずしも同じ見た目になるとは限りません。）

Shopifyにピックアップおすすめ記事を表示させる　まとめ

以上、おすすめブログ記事を表示する方法でした！

上記コードはもちろんご自由に使用していただいて構いませんが、もしよろしければSNS等でシェアしていただいてからご使用いただけるととても喜び、励みになります。

そして、このおすすめ記事集を使用することで、より多くの訪問者の方がより多くの記事を読んでくれるようになれば良いなぁ。

最後までお読みいただきありがとうございました！それでは、本日も良い1日を！