Shopifyのブログ記事内に自動で目次を生成する Tsun Inc.

Shopifyのブログ記事内に自動で目次を生成する


ブログ記事だけでなく、商品ページやコレクション、Pagesなどにも目次を自動生成できる世界に1つしかないShopifyアプリです。
無料から利用でき、ノーコードで導入可能です。
文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。

無料でインストール

なぜ、作ろうと思ったのか？

  • ブログ記事の読みやすさを考えると目次は必須である
  • Shopifyの純正CMSでは目次を生成することが出来ない
  • 目次を生成できたとして、1記事ずつ手動で目次を挿入するのは手間がかかる

下記の記事ではShopifyに目次を生成するアプリをご紹介していますので、ご参考にしてみてください。

目次を生成できるShopifyアプリを紹介

まだShopifyのブログ機能を利用していない方は、下記の記事でShopifyのブログ機能について解説していますので参考にしてみてください。
Shopifyのブログ機能をフル活用しよう｜機能や拡張アプリを紹介

作成したもの

Shopifyブログ記事内のh2とh3タグを抽出して、目次を自動生成するスクリプトを作成しました。
このような目次が生成できます。

目次の生成した参考例

主な機能は下記のとおりです。

  • ブログ記事内のh2とh3タグを元に目次を自動で生成
  • テーマ内でスクリプトを実行するため、すべてのブログ記事に反映
  • 目次部分のクリックで該当箇所までスクロール

コード全体はTsun Inc.のリポジトリをご覧ください。

以下で実装方法を詳しく解説していきます！

実装に入る前に（アプリとソースコードの比較）

実装に入る前に「RuffRuff 目次作成」という無料で利用できる目次作成アプリをリリースしています。実装に入る前に一度アプリを導入し、無料で実装時間を節約しませんか？

アプリとソースコードの機能比較

アプリ名 RuffRuff 目次作成 本記事のソースコード
目次の自動生成 ◯ ◯
見出し選択
（目次に利用する）		 ◯
h1~h6		 ✕
h2とh3のみ
スクロール
（Smooth Scroll） 		◯ ✕
段落表示 ◯
3種類		 ✕
区切り線 ◯ ✕
字下げ
（インデント）		 ◯ ◯
カラー変更 ◯ ✕
開閉ボタン ◯ ✕
初期表示行数設定 ◯ ✕
特定記事で目次非表示 ◯
テンプレートを分けて対応		 ✕
目次の表示位置調整 ◯
3種類 		✕
最初の見出し上のみ
ライブプレビュー ◯ ✕
商品ページに
目次表示 		◯ ✕
コレクションページに
目次表示		 ◯ ✕
Pagesに
目次表示 		◯ ✕

アプリをインストール

前提条件

対象読者

  • Shopifyのテーマ変更ができる
  • HTML、CSS、JavaScriptに関する簡単な知識がある

準備するもの

  • Dawnテーマ (v5.0.0で動作確認しましたが、以前のバージョンでも問題ないはずです)
  • ブログ記事 

実装

※ 今回の実装方法ではShopifyのテーマのコードを直接編集する方法をとるため、必ず事前にバックアップをしておいてください。

今回の実装では

  • 目次を自動生成するJavaScriptファイルを追加する
  • 上記JavaScriptが実行されるようにする

の2つの工程を行います。

どちらの工程もコード編集画面から行いますので、

  1. Shopifyの管理画面から オンラインストア > テーマ を選択
  2. アクション > コードを編集 を選択

を行い、コード編集画面を表示しておいてください。

JavaScriptファイルを追加する

  1. Assets > 新しいassetを追加を選択
  2. 空のファイルを作成する
  3. 名前: table-of-contents、ファイルタイプ: .js を入力し、アセットを追加する
  4. Assets一覧に作成されたtable-of-contents.jsを選択
  5. コードを貼り付けて、保存するを選択

JavaScriptが実行されるようにする

  1. Sections一覧からmain-article.liquidを選択
  2. ブログ記事のコンテンツ部分が挿入される箇所を下記のように変更

開発環境でのテスト

KOMARIさんの Shopifyテーマのローカル開発環境 -Shopify CLI- の記事がとても参考になるので、テスト方法が気になる方はぜひチェックしてみてください！

まとめ

上記のように、JavaScriptのコードをテーマに追加することで目次を自動で生成することができました。

目次部分のデザインや抽出するタグ、生成するタグのIDなど適宜修正して、お好みに合わせた形でご利用ください。

目次の自動生成する無料のShopifyアプリ「RuffRuff 目次作成」を作りました。

オリジナルデザインの目次を簡単にブログ記事に追加したい場合は一度お試しください。

【無料】RuffRuff 目次作成

2022年12月にリリースしたばかりの最新Shopifyアプリです。
無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。
文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。

料金

$0 / 月〜

機能

  •  目次の自動生成
  •  目次に利用する見出しの選択（h1からh6の中から）
  •  タイトルの文言変更
  •  区切り線の有無を変更
  •  カラー変更（背景、枠、区切り線、タイトル、リンク）
  •  章番号の表記の変更（なし、点、数字の３種類から選択可能）
  •  字下げ（インデント）の有無を変更
  •  スクロールの有無を変更
  •  スクロールオフセットの調整
  •  ライブプレビュー
ブログに戻る

Shopifyアプリ

  • RuffRuff 予約販売

    💎 Built for Shopify

    Shopifyストアに予約販売機能を簡単に導入できるShopifyアプリ

    詳しくみる 

  • RuffRuff 注文制限

    Shopifyストアで販売個数制限を簡単に実施できるShopifyアプリ

    詳しくみる 

  • RuffRuff 販売期間

    Shopifyストアで発売予告や期間限定販売を簡単に実施できるShopifyアプリ

    詳しくみる 
  • RuffRuff 目次作成｜Shopifyアプリ

    RuffRuff 目次作成

    💎 Built for Shopify

    Shopifyのコンテンツに自動で目次を表示するShopifyアプリ

    詳しくみる 
  • RuffRuff タグ一覧｜Shopifyアプリ

    RuffRuff タグ一覧

    💎 Built for Shopify

    Shopifyストアにタグ一覧を自動で表示するShopifyアプリ

    詳しくみる 
  • RuffRuff 著者情報｜Shopifyアプリ

    RuffRuff 著者情報

    Shopifyストアに著者プロフィールを簡単に表示できるShopifyアプリ

    詳しくみる 
1 6

ブログ

すべてを表示する
  • Shopifyで代引き決済を導入するメリット・デメリット｜設定方法や手数料もご紹介

    Shopifyで代引き決済を導入するメリット・デメリット｜設定方法や手数料もご紹介

    Tsunライターチーム

    みなさんはご自身のShopifyストアで代引き決済を導入していますか？ 本記事では代引き決済のメリットやデメリット、設定方法などをご紹介します。 代引き決済とは？ 代引き決済とは「代金引換決済」の略で、商品の配達時に配達員に代金を支払う決済方法です。代引き決済はクレジットカードを所有していないユーザーでも商品を購入できるメリットがある一方で、代引き手数料が発生するデメリットもあります。 代引き決済のメリット 安心して購入できる 商品を受け取ってから代金を支払うため、お客様にとっては詐欺や商品未着のリスクを回避できます。 カゴ落ち防止に繋がる 出典：Baymard Institute カゴ落ちの原因の上位に「クレジットカード情報を入力したくない」や「希望する決済種別がない」という理由があります。クレジットカードを保有していない方や、好まない方のカゴ落ちを防ぐためにも、代引き決済はある程度効果があるといえるでしょう。 出典：インターネットの利用状況｜総務省 令和3年版の総務省の調査結果では、「インターネットで購入する際の決済方法」として、代引き決済はクレジットカード決済やコンビニ決済に次いで３番目に利用されている決済方法です。決済方法を増やしたいと考えている方は、代引き決済を検討してみてはいかがでしょうか。 ２番目に多く利用されているコンビニ決済に関しては下記のブログ記事もご参考にしてください。 Shopifyストアにコンビニ決済を導入するメリットや導入方法 下記のブログ記事では「決済方法の拡充」以外にもShopifyで出来るカゴ落ち対策を紹介しています。ご参考になさってください。 Shopifyで出来るカゴ落ち対策｜原因やShopifyアプリも紹介 クレジットカードを保有できない若年層の獲得 ECサイトでの主要な支払い方法の1つにクレジットカード決済がありますが、多くのクレジットカード会社はカード発行対象年齢を18才〜20才以上と設定しています。そのため、クレジットカード支払いのみのストアでは未成年者が購入する事ができないケースが殆どですが、代引き決済を導入する事でこの問題は解消されます。 クレジットカードの使用を好まない層の獲得 成人済の方でもクレジットカード決済に抵抗感を持っている方は多く存在します。クレジットカード決済を避けたい方でもストアで購入ができるように、代引き決済を導入しておくことは双方にメリットが生まれます。 取引手数料が発生しない 出典：Shopifyペイメント｜Shopifyヘルプセンター Shopifyペイメント以外の決済方法を利用する場合、Shopifyで契約しているプランに応じて取引手数料が発生します。しかし、代引き決済に関しては取引手数料が発生しません。 Shopifyペイメントに関しては下記のブログ記事もご参考にしてください。 Shopifyペイメント徹底解説 - 決済手数料・メリット・デメリットまで 代引き決済のデメリット 代引き手数料が発生する...

    Shopifyで代引き決済を導入するメリット・デメリット｜設定方法や手数料もご紹介

    Tsunライターチーム

    みなさんはご自身のShopifyストアで代引き決済を導入していますか？ 本記事では代引き決済のメリットやデメリット、設定方法などをご紹介します。 代引き決済とは？ 代引き決済とは「代金引換決済」の略で、商品の配達時に配達員に代金を支払う決済方法です。代引き決済はクレジットカードを所有していないユーザーでも商品を購入できるメリットがある一方で、代引き手数料が発生するデメリットもあります。 代引き決済のメリット 安心して購入できる 商品を受け取ってから代金を支払うため、お客様にとっては詐欺や商品未着のリスクを回避できます。 カゴ落ち防止に繋がる 出典：Baymard Institute カゴ落ちの原因の上位に「クレジットカード情報を入力したくない」や「希望する決済種別がない」という理由があります。クレジットカードを保有していない方や、好まない方のカゴ落ちを防ぐためにも、代引き決済はある程度効果があるといえるでしょう。 出典：インターネットの利用状況｜総務省 令和3年版の総務省の調査結果では、「インターネットで購入する際の決済方法」として、代引き決済はクレジットカード決済やコンビニ決済に次いで３番目に利用されている決済方法です。決済方法を増やしたいと考えている方は、代引き決済を検討してみてはいかがでしょうか。 ２番目に多く利用されているコンビニ決済に関しては下記のブログ記事もご参考にしてください。 Shopifyストアにコンビニ決済を導入するメリットや導入方法 下記のブログ記事では「決済方法の拡充」以外にもShopifyで出来るカゴ落ち対策を紹介しています。ご参考になさってください。 Shopifyで出来るカゴ落ち対策｜原因やShopifyアプリも紹介 クレジットカードを保有できない若年層の獲得 ECサイトでの主要な支払い方法の1つにクレジットカード決済がありますが、多くのクレジットカード会社はカード発行対象年齢を18才〜20才以上と設定しています。そのため、クレジットカード支払いのみのストアでは未成年者が購入する事ができないケースが殆どですが、代引き決済を導入する事でこの問題は解消されます。 クレジットカードの使用を好まない層の獲得 成人済の方でもクレジットカード決済に抵抗感を持っている方は多く存在します。クレジットカード決済を避けたい方でもストアで購入ができるように、代引き決済を導入しておくことは双方にメリットが生まれます。 取引手数料が発生しない 出典：Shopifyペイメント｜Shopifyヘルプセンター Shopifyペイメント以外の決済方法を利用する場合、Shopifyで契約しているプランに応じて取引手数料が発生します。しかし、代引き決済に関しては取引手数料が発生しません。 Shopifyペイメントに関しては下記のブログ記事もご参考にしてください。 Shopifyペイメント徹底解説 - 決済手数料・メリット・デメリットまで 代引き決済のデメリット 代引き手数料が発生する...

  • 【完全ガイド】Shopifyコラボレーターになる方法：リクエストの送信から承認後の手順まで

    【完全ガイド】Shopifyコラボレーターになる方法：リクエストの送信から承認後の手順まで

    Tsunライターチーム

    Shopifyパートナーがクライアントのストアを管理するためには、コラボレーターとしてストアへのアクセス権が必要です。本記事では、コラボレーターリクエストの概要から申請方法、承認後の手順までを詳しく解説します。 コラボレーターとは 特定のShopifyストアへのアクセス権を持っているShopifyパートナーの事を指します。スタッフとは異なるため、スタッフの人数にカウントされることはありません。 コラボレーターになるには、ShopifyパートナーがアクセスしたいShopifyストアに対して、コラボレーターリクエストを送信し、リクエストを受け取ったShopifyストア側が承認する必要があります。 Shopifyパートナーに関しては、下記のブログ記事もご参考にしてください。 Shopify パートナーの4種類とShopify Partnerになるメッリトや収益獲得方法 コラボレーターリクエストとは Shopifyパートナーが特定のShopifyストアへコラボレーターになるため（アクセスするため）の申請のことを指します。 コラボレーターリクエストコードとは コラボレーターリクエストコードは、ストアへコラボレーターリクエストの申請を制御するための機能で、コラボレーターリクエストコードを知っている人しかコラボレーターリクエストの申請を出せないように制御することが出来ます。 コラボレーターリクエストコードを設定しているストアの場合は、Shopifyパートナーからストアへコラボレーターリクエストを申請するために、ストア側がコラボレーターリクエストコードをShopifyパートナーへ共有する必要があります。 （コラボレーターリクエストコードの取得方法） 前述の通り、コラボレーターリクエストコードはストア側が取得し、Shopifyパートナーへ共有する必要があります。本節では、コラボレーターリクエストコードを取得する方法を紹介します。 （１）Shopify管理画面の画面左下にある「設定」をクリック （２）「ユーザーと権限」をクリック （３）コラボレーターのセクションまで画面をスクロール （４）コラボレーターリクエストコードに記載のある4桁のコードをコピー コラボレーターリクエストの送信方法 コラボレーターリクエストの送信方法は下記の2種類があります。 パートナーダッシュボードからの送信方法 Shopifyアプリを使った送信方法 それぞれ詳しく紹介します パートナーダッシュボードからの送信方法 （１）左メニューのストア管理をクリック （２）ストアを追加をクリック （３）ストアへのアクセス権をリクエストを選択 （４）下記の情報を入力 ストアのURL（xxxxx.myshopify.com）...

    【完全ガイド】Shopifyコラボレーターになる方法：リクエストの送信から承認後の手順まで

    Tsunライターチーム

    Shopifyパートナーがクライアントのストアを管理するためには、コラボレーターとしてストアへのアクセス権が必要です。本記事では、コラボレーターリクエストの概要から申請方法、承認後の手順までを詳しく解説します。 コラボレーターとは 特定のShopifyストアへのアクセス権を持っているShopifyパートナーの事を指します。スタッフとは異なるため、スタッフの人数にカウントされることはありません。 コラボレーターになるには、ShopifyパートナーがアクセスしたいShopifyストアに対して、コラボレーターリクエストを送信し、リクエストを受け取ったShopifyストア側が承認する必要があります。 Shopifyパートナーに関しては、下記のブログ記事もご参考にしてください。 Shopify パートナーの4種類とShopify Partnerになるメッリトや収益獲得方法 コラボレーターリクエストとは Shopifyパートナーが特定のShopifyストアへコラボレーターになるため（アクセスするため）の申請のことを指します。 コラボレーターリクエストコードとは コラボレーターリクエストコードは、ストアへコラボレーターリクエストの申請を制御するための機能で、コラボレーターリクエストコードを知っている人しかコラボレーターリクエストの申請を出せないように制御することが出来ます。 コラボレーターリクエストコードを設定しているストアの場合は、Shopifyパートナーからストアへコラボレーターリクエストを申請するために、ストア側がコラボレーターリクエストコードをShopifyパートナーへ共有する必要があります。 （コラボレーターリクエストコードの取得方法） 前述の通り、コラボレーターリクエストコードはストア側が取得し、Shopifyパートナーへ共有する必要があります。本節では、コラボレーターリクエストコードを取得する方法を紹介します。 （１）Shopify管理画面の画面左下にある「設定」をクリック （２）「ユーザーと権限」をクリック （３）コラボレーターのセクションまで画面をスクロール （４）コラボレーターリクエストコードに記載のある4桁のコードをコピー コラボレーターリクエストの送信方法 コラボレーターリクエストの送信方法は下記の2種類があります。 パートナーダッシュボードからの送信方法 Shopifyアプリを使った送信方法 それぞれ詳しく紹介します パートナーダッシュボードからの送信方法 （１）左メニューのストア管理をクリック （２）ストアを追加をクリック （３）ストアへのアクセス権をリクエストを選択 （４）下記の情報を入力 ストアのURL（xxxxx.myshopify.com）...

  • ShopifyでLPを簡単に作成！ランディングページを作成する3つの方法とおすすめアプリ

    ShopifyでLPを簡単に作成！ランディングページを作成する3つの方法とおすすめアプリ

    Tsunライターチーム

    みなさんはご自身のShopifyストアでLP（ランディングページ）を作成していますか？ 本記事では、Shopifyでランディングページを作成する方法について詳しく解説します。Shopifyテーマを使用する方法、Shopifyアプリを使用する方法、ソースコードをカスタマイズする方法の3つに分けて、それぞれのメリットとデメリットを比較しながら説明していきます。 LP（ランディングページ）とは？ ランディングページ（Landing Page）は、言葉の通り直訳するとで「訪問者が最初にアクセスするページ」を指しますが、最近では最初にアクセスするページとは限らず、「特定の目的のために設計された単一のWebページ」を指すことが多いです。 本記事では、この「特定の目的のために設計された単一のWebページ」としてのランディングページについてご説明しています。 LPを作成する重要性 オンラインショップにおいて、ランディングページは非常に重要な役割を果たします。ランディングページは、商品やサービスの魅力を効果的に伝え、訪問者の購買意欲を高めるために設計されたWebページです。適切に設計されたランディングページは、コンバージョン率の向上につながり、売上アップに大きく貢献します。 Shopifyでは比較的安価で簡単に高品質のLPを作れます。後述の「ShopifyでLPを作成する3つの方法」を参考にご自身に適したLP作成の方法を選択しましょう。 ShopifyでLPを作成する3つの方法 Shopifyテーマで作成する はじめに、Shopifyテーマで作成する方法です。 Shopifyテーマのカスタマイズページにて、LP用のテンプレートを作成し、そのテンプレートを該当ページへ紐づける方法になります。 この方法のメリットは、 無料かつノーコードでカスタマイズできるため、初心者でも簡単に作成できます。また、Shopifyのテンプレートを活用することで、デザインのクオリティを保ちつつ、短時間でLPを作成できます。 デメリットは、ご利用中のShopifyテーマが提供しているセクションパーツのみでLPを作成するため、カスタマイズ性に限界がある点です。 Shopifyアプリで作成する 次に、Shopifyアプリを利用する方法です。 ページビルダーアプリやShopifyテーマのセクションパーツを拡張できるShopifyアプリを利用する方法です。 この方法のメリットは、デザインパーツも機能も豊富で、ドラッグ＆ドロップ形式のエディタで直感的に操作でき、初心者でも扱いやすく手軽に高品質なLPが作れる点です。 デメリットは、 アプリ利用料がかかる点です。月額課金制のアプリが多く、コストが積み重なる可能性があります。 下記のブログ記事では、おすすめのページビルダーアプリを紹介しています。ご参考にしてください。 Shopifyのページビルダーアプリ 3選｜PageFlyやGempageなどの特徴や料金も紹介 ソースコードをカスタマイズして作成する 最後に、ソースコードをカスタマイズする方法です。 この方法のメリットは、これまで紹介したShopifyテーマやShopifyアプリで作成する方法に比べて、自由度が高く、独自性のあるLPが作れる点です。 デメリットは、技術力が必要で、時間とコストがかかる点です。 LP作成におすすめのShopifyアプリ...

    ShopifyでLPを簡単に作成！ランディングページを作成する3つの方法とおすすめアプリ

    Tsunライターチーム

    みなさんはご自身のShopifyストアでLP（ランディングページ）を作成していますか？ 本記事では、Shopifyでランディングページを作成する方法について詳しく解説します。Shopifyテーマを使用する方法、Shopifyアプリを使用する方法、ソースコードをカスタマイズする方法の3つに分けて、それぞれのメリットとデメリットを比較しながら説明していきます。 LP（ランディングページ）とは？ ランディングページ（Landing Page）は、言葉の通り直訳するとで「訪問者が最初にアクセスするページ」を指しますが、最近では最初にアクセスするページとは限らず、「特定の目的のために設計された単一のWebページ」を指すことが多いです。 本記事では、この「特定の目的のために設計された単一のWebページ」としてのランディングページについてご説明しています。 LPを作成する重要性 オンラインショップにおいて、ランディングページは非常に重要な役割を果たします。ランディングページは、商品やサービスの魅力を効果的に伝え、訪問者の購買意欲を高めるために設計されたWebページです。適切に設計されたランディングページは、コンバージョン率の向上につながり、売上アップに大きく貢献します。 Shopifyでは比較的安価で簡単に高品質のLPを作れます。後述の「ShopifyでLPを作成する3つの方法」を参考にご自身に適したLP作成の方法を選択しましょう。 ShopifyでLPを作成する3つの方法 Shopifyテーマで作成する はじめに、Shopifyテーマで作成する方法です。 Shopifyテーマのカスタマイズページにて、LP用のテンプレートを作成し、そのテンプレートを該当ページへ紐づける方法になります。 この方法のメリットは、 無料かつノーコードでカスタマイズできるため、初心者でも簡単に作成できます。また、Shopifyのテンプレートを活用することで、デザインのクオリティを保ちつつ、短時間でLPを作成できます。 デメリットは、ご利用中のShopifyテーマが提供しているセクションパーツのみでLPを作成するため、カスタマイズ性に限界がある点です。 Shopifyアプリで作成する 次に、Shopifyアプリを利用する方法です。 ページビルダーアプリやShopifyテーマのセクションパーツを拡張できるShopifyアプリを利用する方法です。 この方法のメリットは、デザインパーツも機能も豊富で、ドラッグ＆ドロップ形式のエディタで直感的に操作でき、初心者でも扱いやすく手軽に高品質なLPが作れる点です。 デメリットは、 アプリ利用料がかかる点です。月額課金制のアプリが多く、コストが積み重なる可能性があります。 下記のブログ記事では、おすすめのページビルダーアプリを紹介しています。ご参考にしてください。 Shopifyのページビルダーアプリ 3選｜PageFlyやGempageなどの特徴や料金も紹介 ソースコードをカスタマイズして作成する 最後に、ソースコードをカスタマイズする方法です。 この方法のメリットは、これまで紹介したShopifyテーマやShopifyアプリで作成する方法に比べて、自由度が高く、独自性のあるLPが作れる点です。 デメリットは、技術力が必要で、時間とコストがかかる点です。 LP作成におすすめのShopifyアプリ...

  • Shopifyでポップアップを表示する方法｜ポップアップを表示できるShopifyアプリ5選

    Shopifyでポップアップを表示する方法｜ポップアップを表示できるShopifyアプリ5選

    Tsunライターチーム

    Shopifyストアを運営する上で、コンバージョン率の向上は重要な課題の一つです。その中でも、ポップアップは訪問者の注目を引き、アクションを促すために効果的な手段として知られています。本記事では、ポップアップを表示するメリットやポップアップを表示できるShopifyアプリの紹介について解説します。 ポップアップとは？ ポップアップとは、ウェブサイトを閲覧中に突然表示される小さな画面やウィンドウのことを指します。ポップアップは、メインのウェブページとは別に新しいウィンドウやタブで開き、多くの場合、広告や宣伝を目的としています。商品やサービスの販売促進、キャンペーンの告知などに使用されるのが一般的です。ポップアップは、適切に使用すれば効果的な情報提供や販促の手段となりますが、過度な表示はユーザー体験を損なう恐れがあるため注意が必要です。 ポップアップを表示するメリット 訪問者の注目を集められる ポップアップは、突然画面上に現れるため、訪問者の注目を強制的に集めることができます。通常のバナー広告などと比べて視認性が高く、重要なお知らせやキャンペーン情報を、確実に訪問者に伝えることが可能です。 下記のブログ記事ではShopifyにバナーを表示できるShopifyアプリを紹介しています。ご参考にしてください。 Shopifyストアにバナーを表示するアプリ3選 | フローティングバナーや送料無料バーなどもご紹介 メールアドレスの収集が容易になる ポップアップを使ってメルマガ購読の特典を訴求することで、メルマガへの購読数を高めることができ、多くのメールアドレスの収集を期待できます。収集したメールアドレスを活用すれば、効果的なメールマーケティングを展開できるでしょう。 下記のブログ記事ではShopifyでメールマーケティングを行うメリットやおすすめのメルマガ配信アプリを紹介しています。ご参考にしてください。 Shopifyでメールマーケティングを行うメリットは？メール配信（メルマガ配信）アプリも紹介 コンバージョン率の向上につながる 適切なタイミングで魅力的なポップアップを表示することで、商品の購入や資料請求など、様々なコンバージョンを促すことができます。例えば、カート落ちしそうな訪問者に対して、限定クーポンの配布を告知するポップアップを表示すれば、カート落ちを避けて購入率の向上が見込めます。 下記のブログ記事ではカゴ落ち対策の原因やおすすめのカゴ落ち対策アプリを紹介しています。ご参考にしてください。 Shopifyで出来るカゴ落ち対策｜原因やShopifyアプリも紹介｜カート離脱対策 Shopifyでポップアップを表示する方法 Shopifyテーマを利用する まずは、Shopifyテーマを利用する方法です。Shopifyテーマの中にはポップアップを表示できるセクションを提供しているテーマが存在します。Shopifyテーマでポップアップバナーを表示するメリットとしては、追加料金が発生しない点です。デメリットとしては、表示タイミングやデザインなどの細かなカスタマイズが出来ないことです。ご自身のご利用中のテーマでポップアップが表示できるか一度確認してみましょう！ Shopifyアプリを利用する 次に、Shopifyアプリを利用する方法です。Shopifyテーマに比べて表示タイミングやデザインなどのカスタマイズ性が高いメリットがあります。一方で、月額費用が発生するデメリットがあります。ご自身のやりたいことがShopifyアプリで実現できるか確認し、それに対していくらまで月額費用を払えるのかを検討しましょう。 ソースコードをカスタイマイズする Shopifyアプリを利用してもどうしてもやりたいことを実現できない場合があると思います。そういった場合は、Shopifyテーマのソースコードをカスタマイズする必要があります。 メリットとしては無料で作ることができ、自由にデザインをカスタマイズ出来ることです。デメリットとしては、HTMLやCSS、JavaScriptなどのプログラミング知識が必要になることです。また、開発だけでなく、意図したとおりに動くかテストする時間や別のバナーへの張替えなど継続的なメンテナンスが発生するのがデメリットです。 ポップアップにおすすめのShopifyアプリ Pop Convert ‑...

    Shopifyでポップアップを表示する方法｜ポップアップを表示できるShopifyアプリ5選

    Tsunライターチーム

    Shopifyストアを運営する上で、コンバージョン率の向上は重要な課題の一つです。その中でも、ポップアップは訪問者の注目を引き、アクションを促すために効果的な手段として知られています。本記事では、ポップアップを表示するメリットやポップアップを表示できるShopifyアプリの紹介について解説します。 ポップアップとは？ ポップアップとは、ウェブサイトを閲覧中に突然表示される小さな画面やウィンドウのことを指します。ポップアップは、メインのウェブページとは別に新しいウィンドウやタブで開き、多くの場合、広告や宣伝を目的としています。商品やサービスの販売促進、キャンペーンの告知などに使用されるのが一般的です。ポップアップは、適切に使用すれば効果的な情報提供や販促の手段となりますが、過度な表示はユーザー体験を損なう恐れがあるため注意が必要です。 ポップアップを表示するメリット 訪問者の注目を集められる ポップアップは、突然画面上に現れるため、訪問者の注目を強制的に集めることができます。通常のバナー広告などと比べて視認性が高く、重要なお知らせやキャンペーン情報を、確実に訪問者に伝えることが可能です。 下記のブログ記事ではShopifyにバナーを表示できるShopifyアプリを紹介しています。ご参考にしてください。 Shopifyストアにバナーを表示するアプリ3選 | フローティングバナーや送料無料バーなどもご紹介 メールアドレスの収集が容易になる ポップアップを使ってメルマガ購読の特典を訴求することで、メルマガへの購読数を高めることができ、多くのメールアドレスの収集を期待できます。収集したメールアドレスを活用すれば、効果的なメールマーケティングを展開できるでしょう。 下記のブログ記事ではShopifyでメールマーケティングを行うメリットやおすすめのメルマガ配信アプリを紹介しています。ご参考にしてください。 Shopifyでメールマーケティングを行うメリットは？メール配信（メルマガ配信）アプリも紹介 コンバージョン率の向上につながる 適切なタイミングで魅力的なポップアップを表示することで、商品の購入や資料請求など、様々なコンバージョンを促すことができます。例えば、カート落ちしそうな訪問者に対して、限定クーポンの配布を告知するポップアップを表示すれば、カート落ちを避けて購入率の向上が見込めます。 下記のブログ記事ではカゴ落ち対策の原因やおすすめのカゴ落ち対策アプリを紹介しています。ご参考にしてください。 Shopifyで出来るカゴ落ち対策｜原因やShopifyアプリも紹介｜カート離脱対策 Shopifyでポップアップを表示する方法 Shopifyテーマを利用する まずは、Shopifyテーマを利用する方法です。Shopifyテーマの中にはポップアップを表示できるセクションを提供しているテーマが存在します。Shopifyテーマでポップアップバナーを表示するメリットとしては、追加料金が発生しない点です。デメリットとしては、表示タイミングやデザインなどの細かなカスタマイズが出来ないことです。ご自身のご利用中のテーマでポップアップが表示できるか一度確認してみましょう！ Shopifyアプリを利用する 次に、Shopifyアプリを利用する方法です。Shopifyテーマに比べて表示タイミングやデザインなどのカスタマイズ性が高いメリットがあります。一方で、月額費用が発生するデメリットがあります。ご自身のやりたいことがShopifyアプリで実現できるか確認し、それに対していくらまで月額費用を払えるのかを検討しましょう。 ソースコードをカスタイマイズする Shopifyアプリを利用してもどうしてもやりたいことを実現できない場合があると思います。そういった場合は、Shopifyテーマのソースコードをカスタマイズする必要があります。 メリットとしては無料で作ることができ、自由にデザインをカスタマイズ出来ることです。デメリットとしては、HTMLやCSS、JavaScriptなどのプログラミング知識が必要になることです。また、開発だけでなく、意図したとおりに動くかテストする時間や別のバナーへの張替えなど継続的なメンテナンスが発生するのがデメリットです。 ポップアップにおすすめのShopifyアプリ Pop Convert ‑...

1 4
すべてを表示する

テックブログ

すべてを表示する
  • 【Tips】Shopify の GraphQL Admin API で顧客総数を取得する

    【Tips】Shopify の GraphQL Admin API で顧客総数を取得する

    小笠原 京平

    Shopifyの GraphQL Admin API の小ネタです。 Shopifyの顧客総数を取得したい場合のクエリは、いざ探そうと思ってもパッと見つからないのでメモしておきます。 対象読者 Shopify GraphQL Admin API を使ったことがある方 顧客総数を取得するクエリ 2023-07 バージョンから CustomerSegmentMemberConnection に変更があったため、2023-07より前と以降で若干クエリが異なります。 ※ changelog 2023-07以降 { customerSegmentMembers(first: 1, query: "") { totalCount } } 2023-07より前...

    【Tips】Shopify の GraphQL Admin API で顧客総数を取得する

    小笠原 京平

    Shopifyの GraphQL Admin API の小ネタです。 Shopifyの顧客総数を取得したい場合のクエリは、いざ探そうと思ってもパッと見つからないのでメモしておきます。 対象読者 Shopify GraphQL Admin API を使ったことがある方 顧客総数を取得するクエリ 2023-07 バージョンから CustomerSegmentMemberConnection に変更があったため、2023-07より前と以降で若干クエリが異なります。 ※ changelog 2023-07以降 { customerSegmentMembers(first: 1, query: "") { totalCount } } 2023-07より前...

  • Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    小笠原 京平

    今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...

    Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    小笠原 京平

    今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...

  • Shopify Admin API GraphiQLとは？ 使い方やメリット・デメリットを解説

    Shopify Admin API GraphiQLとは？ 使い方やメリット・デメリットを解説します

    小笠原 京平

    ShopifyのAdmin APIにはGraphQLを用いたAPIがあります。手軽に試す方法としてGraphiQL (GraphQLではなくGraphiQLなのに注意) というIDEがありますので、今回はShopify GraphiQLの使い方やメリット・デメリットを解説します。 GraphiQLとは GraphQL公式が運営しているオープンソースプロジェクトです。GraphQLをブラウザ上でインタラクティブに操作・実行することができます。 グラフィカル (/ˈɡrafək(ə)l/) と発音します。(graphicalと同じ発音) GraphQLとは GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。 GraphQLはAPI内のデータの完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、APIを長期的に進化させることを容易にし、強力な開発者ツールを可能にします。 引用: GraphQL | A query language for your API Shopify GraphiQLの使い方 Shopify GraphiQLは各ストアにアプリをインストールするだけで使えますが、Shopify Devサイト上でデモを触れるので、まずは触ってみましょう！ https://shopify.dev/docs/apps/tools/graphiql-admin-api Workshopをやってみよう！ Shopifyが作成した「Learn...

    Shopify Admin API GraphiQLとは？ 使い方やメリット・デメリットを解説します

    小笠原 京平

    ShopifyのAdmin APIにはGraphQLを用いたAPIがあります。手軽に試す方法としてGraphiQL (GraphQLではなくGraphiQLなのに注意) というIDEがありますので、今回はShopify GraphiQLの使い方やメリット・デメリットを解説します。 GraphiQLとは GraphQL公式が運営しているオープンソースプロジェクトです。GraphQLをブラウザ上でインタラクティブに操作・実行することができます。 グラフィカル (/ˈɡrafək(ə)l/) と発音します。(graphicalと同じ発音) GraphQLとは GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。 GraphQLはAPI内のデータの完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、APIを長期的に進化させることを容易にし、強力な開発者ツールを可能にします。 引用: GraphQL | A query language for your API Shopify GraphiQLの使い方 Shopify GraphiQLは各ストアにアプリをインストールするだけで使えますが、Shopify Devサイト上でデモを触れるので、まずは触ってみましょう！ https://shopify.dev/docs/apps/tools/graphiql-admin-api Workshopをやってみよう！ Shopifyが作成した「Learn...

  • ブログ記事 Shopifyの必須Webhooks (Mandatory Webhooks)とは？ GDPRや対応例など

    Shopifyの必須Webhooks (Mandatory Webhooks)とは？ GDPR...

    小笠原 京平

    今回はShopifyアプリ開発を始めたときに詰まるポイントの1つ「必須Webhooks」について解説します。実装をしていなかったり、実装が不十分なためにレビューが通らなかった経験をされた方は多いんじゃないでしょうか？レビューで詰まらないためにも、ぜひご確認ください！ Webhooksとは？ Shopifyの必須Webhooksを説明する前に、Webhooksについて理解しましょう。Webhooksとは、Webアプリケーションと連携するために用いられるイベント通知の仕組みです。Webhooksを使うことで、あるWebアプリケーションで特定のイベントが起きたときに、データを受け取ったり、何かしらの動作をすることが可能になります。 エンジニアにとって身近な例でいうと、GitHubにコードをプッシュしたときに自動でビルドやテストをするときにWebhooksが使われています。 ShopifyのWebhooks そんなWebhooksはShopifyでも使うことができます。Shopifyアプリ開発では、Shopify Admin APIからWebhooksを使うことができます。また、アプリ以外でもShopify管理画面からWebhookを作成することもできます。 ShopifyのWebhooksにはHTTPSのエンドポイントのほか、Amazon EventBridgeやGoogle Cloud Pub/Subといったメッセージングサービスを使うこともできます。購読するイベントやマーチャントによっては瞬間的に大量のWebhooksを処理する必要があるため、スケールさせやすいメッセージングサービスを使ってWebhooksを処理することをおすすめします。 必須Webhooks (Mandatory Webhooks) とは？ 必須Webhooksとは、Shopifyアプリを開発するときに必ず実装しなければならない3つのWebhooksのことです。この3つのWebhooksはGDPRに対応するために必要なWebhooksで、EU加盟国に関わらず、すべてのShopifyアプリはGDPRに準拠しなければなりません。必須Webhooksを実装していない場合、アプリレビューで却下されます。 (3つの必須Webhooks以外のWebhooksは任意で実装すればOKです。) また、必須Webhooksの3つはHTTPSのエンドポイントでのみ作成可能です。上述したEventBridgeやPub/Subを利用することはできません。 GDPRとは？ GDPR（General Data Protection Regulation：一般データ保護規則）は、ヨーロッパ連合（EU）の個人情報保護法規で、2018年5月25日から施行されています。これは、EU全域での個人情報のプライバシーを保護し、データの取り扱い方に関して個々の人々により多くの制御権を付与するためのものです。 GDPRは、EU市民または居住者の個人データを処理する全ての組織に適用されます。これには、EU内外の組織も含まれ、EUの市民や居住者のデータを処理する場合、世界のどこにその組織があろうともGDPRの規定を守る必要があります。 GDPRの主な目的は、個人が自分の個人データをどのように収集、保存、使用されるのかを知り、そしてその制御をする権利を持つべきであるという考え方を強化し、統一化することです。これは、個人情報の透明性、アクセスの権利、修正の権利、忘れられる権利（データ削除の権利）、データ移行の権利など、いくつかの重要な権利を個々の人々に付与します。 参考: ChatGPT 必須Webhooksの対応例 上記で説明したように、必須WebhooksとはGDPRに準拠するためのWebhooksなので、顧客情報、ストア情報をデータベースなどに保存しているかどうかで対応方法が変わります。...

    Shopifyの必須Webhooks (Mandatory Webhooks)とは？ GDPR...

    小笠原 京平

    今回はShopifyアプリ開発を始めたときに詰まるポイントの1つ「必須Webhooks」について解説します。実装をしていなかったり、実装が不十分なためにレビューが通らなかった経験をされた方は多いんじゃないでしょうか？レビューで詰まらないためにも、ぜひご確認ください！ Webhooksとは？ Shopifyの必須Webhooksを説明する前に、Webhooksについて理解しましょう。Webhooksとは、Webアプリケーションと連携するために用いられるイベント通知の仕組みです。Webhooksを使うことで、あるWebアプリケーションで特定のイベントが起きたときに、データを受け取ったり、何かしらの動作をすることが可能になります。 エンジニアにとって身近な例でいうと、GitHubにコードをプッシュしたときに自動でビルドやテストをするときにWebhooksが使われています。 ShopifyのWebhooks そんなWebhooksはShopifyでも使うことができます。Shopifyアプリ開発では、Shopify Admin APIからWebhooksを使うことができます。また、アプリ以外でもShopify管理画面からWebhookを作成することもできます。 ShopifyのWebhooksにはHTTPSのエンドポイントのほか、Amazon EventBridgeやGoogle Cloud Pub/Subといったメッセージングサービスを使うこともできます。購読するイベントやマーチャントによっては瞬間的に大量のWebhooksを処理する必要があるため、スケールさせやすいメッセージングサービスを使ってWebhooksを処理することをおすすめします。 必須Webhooks (Mandatory Webhooks) とは？ 必須Webhooksとは、Shopifyアプリを開発するときに必ず実装しなければならない3つのWebhooksのことです。この3つのWebhooksはGDPRに対応するために必要なWebhooksで、EU加盟国に関わらず、すべてのShopifyアプリはGDPRに準拠しなければなりません。必須Webhooksを実装していない場合、アプリレビューで却下されます。 (3つの必須Webhooks以外のWebhooksは任意で実装すればOKです。) また、必須Webhooksの3つはHTTPSのエンドポイントでのみ作成可能です。上述したEventBridgeやPub/Subを利用することはできません。 GDPRとは？ GDPR（General Data Protection Regulation：一般データ保護規則）は、ヨーロッパ連合（EU）の個人情報保護法規で、2018年5月25日から施行されています。これは、EU全域での個人情報のプライバシーを保護し、データの取り扱い方に関して個々の人々により多くの制御権を付与するためのものです。 GDPRは、EU市民または居住者の個人データを処理する全ての組織に適用されます。これには、EU内外の組織も含まれ、EUの市民や居住者のデータを処理する場合、世界のどこにその組織があろうともGDPRの規定を守る必要があります。 GDPRの主な目的は、個人が自分の個人データをどのように収集、保存、使用されるのかを知り、そしてその制御をする権利を持つべきであるという考え方を強化し、統一化することです。これは、個人情報の透明性、アクセスの権利、修正の権利、忘れられる権利（データ削除の権利）、データ移行の権利など、いくつかの重要な権利を個々の人々に付与します。 参考: ChatGPT 必須Webhooksの対応例 上記で説明したように、必須WebhooksとはGDPRに準拠するためのWebhooksなので、顧客情報、ストア情報をデータベースなどに保存しているかどうかで対応方法が変わります。...

1 4
すべてを表示する

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

詳しく見る →

掲載情報に関して

掲載している各種情報は、株式会社Tsunが経験および、調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。