概要

ブログ記事でサイト内回遊率を高めるために、リンクを記事内に設置をすることが多いと思います。遷移先の内容などをより詳細に記載したりデザイン性を高めることでリンクのクリック率を上げるためにカード形式のリンクにする機能をブログカードと呼びます。

ブログカード

上記はWordpress公式で紹介されているブログカードのデザインで、Wordpressではリンクを貼ると自動的にブログカードに変換してくれる機能があります。

しかし、ShopifyはEC機能が中心のためか記事系の機能は弱く、ブログカード生成の機能もありません。そこで、Shopifyの記事で、ブログカードを自動生成する方法について解説をします。

Shopifyプラグイン

Shopify App Storeに公開されている下記のプラグインを使うことで、自動でリンクをブログカード化することができます。

ブログカード: https://apps.shopify.com/product-link-card

ブログカード

リンクを貼ると上図のようなカード形式に変換されます。

使い方

アプリの有効化

まず、プラグインをインストールした後に、アプリの有効化をします。

管理画面サイドメニューの「オンラインストア」→「テーマ」を選択し、「カスタマイズ」ボタンを押してください。

管理画面サイドメニューの「オンラインストア」→「テーマ」を選択し、「カスタマイズ」ボタンを押します。

カスタマイズ画面の左下にある「テーマ設定」を押した後、「アプリを埋め込む」メニューを選択し、「Product Link Card」のボタンを押した後に、「保存する」ボタンを押します。

カスタマイズ画面の左下にある「テーマ設定」を押した後、「アプリを埋め込む」メニューを選択し、「Product Link Card」のボタンを押した後に、「保存する」ボタンを押します。

リンクの変換方法

商品やブログ記事の編集画面で、商品カードを表示したい位置に、商品URLを貼り付けます。(URLに「?」が含まれていると動作しません。)

商品やブログ記事の編集画面で、商品カードを表示したい位置に、商品URLを貼り付けます。(URLに「?」が含まれていると動作しません。)

商品URLを選択した後、「リンクを挿入」ボタンを押します。

商品URLを選択した後、「リンクを挿入」ボタンを押します。

リンクを挿入ダイアログで、「リンク先」に先ほどと同じ商品URLを挿入し「リンクを挿入」ボタンを押します。

リンクを挿入ダイアログで、「リンク先」に先ほどと同じ商品URLを挿入し「リンクを挿入」ボタンを押します。

記事を保存した後に、ページをプレビューしてし、商品URLがカードに変換されていることを確認します。

デザインのカスタマイズ

プラグインのページから、ボタンの色、文言、テキストの色など、ブログカードのデザインをカスタマイズすることが可能なので、サイトのテイストに合わせてデザインを修正しましょう。

デザインのカスタマイズ

サイト内回遊