【Shopify】有料ブログ記事を販売するストアを構築する方法

1. はじめに

デジタルコンテンツの需要が高まる中、ブログ記事やニュースレター、専門知識などの有料コンテンツを販売するビジネスモデルが注目されています。Shopifyは物理的な商品の販売に特化したプラットフォームですが、適切な設定とカスタマイズを行うことで、有料ブログ記事の販売システムを構築することができます。
本記事では、Shopifyの標準機能とShopify Flowを活用して、購入者のみが閲覧できる有料ブログ記事システムを構築する方法を詳しく解説します。この仕組みにより、質の高いコンテンツを収益化し、購入者との長期的な関係構築が可能になります。

2. 構築方法

手順① ライセンス商品の登録

まず、有料ブログ記事へのアクセス権である「ライセンス商品」を作成します。

商品作成手順

▼ Shopify管理画面にログイン

• 管理画面左メニューから「商品管理」→「商品」を選択

▼ 新しい商品を追加

• 「商品を追加する」ボタンをクリック

▼ 基本情報の入力

商品名：「有料記事購読」
説明文：購入者限定の有料記事コンテンツにアクセスできるライセンスです。一度購入すれば、いつでも記事をお読みいただけます。
価格：お好みの価格を設定（例：2,980円）

▼ 関連する設定項目

• 商品タイプ：「デジタル商品」または「サービス」
• 販売者：該当するベンダー名
• 商品の組織：適切なコレクションに追加

在庫と配送の設定

▼ 在庫管理設定

• 「この商品の在庫を追跡する」のチェックを外す
  
  ⚠️ この設定により在庫切れの心配がないデジタル商品として扱うことができます。

▼ 配送設定

• 「この商品は配送が必要です」のチェックを外す
  
  ⚠️ これにより物理的な発送プロセスをスキップできます。

▼ SEO設定

• 検索エンジン最適化のためのタイトルと説明を設定してください。

▼ 商品を保存

• 設定内容を確認し、商品を保存してください。

手順② Shopify Flowでの自動タグ付け設定

商品購入時に自動的に顧客タグを付与するためのワークフローを作成します。

Shopify Flowの設定手順

▼ Shopify Flowアプリのインストール

• Shopifyアプリストアから「Shopify Flow」を検索・インストール
• 基本プランでも利用可能な標準機能です

▼ 新しいワークフローの作成

• Flowダッシュボードから「ワークフローを作成」を選択
• ワークフロー名：「有料記事購入者タグ付け」

▼ トリガーの設定

トリガー：Order paid（注文支払い完了）
条件：「変数を追加」によりOrder > lineItems > product > idを選択し、条件は「次のものと一致する」、商品idは「商品を選択する」により手順① で登録した商品をチェックして完了を押してください。

▼ アクションの設定

アクション：Add customer tag（顧客タグを追加）
タグ名：「購読者」
対象：Order customer（注文した顧客）

▼ ワークフローの有効化

• 設定内容を確認し、ワークフローを有効化

フロー設定の詳細サンプル

手順③ ブログテンプレートのカスタマイズ

ブログ記事テンプレートに有料コンテンツ表示制御機能を追加します。ここではテーマ「Dawn」を例に修正方法をお伝えします。

⚠️ 重要: テーマファイルの修正を行う際は、必ずテーマのバックアップを取ってから作業を行ってください。

テーマファイルの編集

▼ テーマエディターへのアクセス

• 管理画面から「オンラインストア」→「テーマ」
• 現在のテーマの「アクション」→「コードを編集」

▼ main-article.liquidファイルの編集

• sections/main-article.liquidファイルを開いてください。

▼ 有料コンテンツブロックの追加
{%- when 'share' -%}の上の行（73行目）に下記を追加します。

      {%- when 'paid-content' -%}
        <div
          class="article-template__content page-width page-width--narrow rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {{ block.shopify_attributes }}
        >
        {% if customer and customer.tags contains '購読者' %}
          {{ article.content | split: '<p>&lt;-----&gt;</p>' | last }}
        {% else %}
          {{ article.content | split: '<p>&lt;-----&gt;</p>' | first }}
          {% unless customer %}
            <p>続きを読むには購読ライセンスを購入の上、ログインしてください。</p>
            <p>購読ライセンスは<a href="/products/{有料記事購読商品のハンドル}">こちら</a></p>
            <p>ログインページは<a href="/account/login">こちら</a></p>          
          {% else %}
            <p>購読ライセンスを購入してください。</p>
            <p>購読ライセンスは<a href="/account/{有料記事購読商品のハンドル}">こちら</a></p>          
          {% endunless %}
        {% endif %}
      </div>

schemaに有料コンテンツブロックを追加します。「{"type": "share",」の上の行（359行目）に下記を追加してください。

    {
      "type": "paid-content",
      "name": "有料コンテンツ",
      "limit": 1
    },

🔍 コードの仕組み：

■ ブロックタイプの定義

{%- when 'paid-content' -%}

• Shopifyテーマのブロック機能を使用
• 記事編集画面で「有料コンテンツ」ブロックとして表示される

■ コンテンツの分割処理

{{ article.content | split: '<p>&lt;-----&gt;</p>' | first }}
{{ article.content | split: '<p>&lt;-----&gt;</p>' | last }}

• 記事内容を<p><-----></p>で区切ります。
• first：区切り文字より前の部分（無料プレビュー）となります。
• last：区切り文字より後の部分（有料コンテンツ）となります。

■ 購読者判定ロジック

{% if customer and customer.tags contains '購読者' %}

• ログイン済み（customerが存在）かつ顧客タグに「購読者」が含まれている場合に有料コンテンツを表示します。

■ 未購入者向け表示分岐

{% unless customer %}
  <!-- 未ログインユーザー向け -->
{% else %}
  <!-- ログイン済み未購入ユーザー向け -->
{% endunless %}

• 未ログイン：購読ライセンス購入 + ログインを促します。
• ログイン済み未購入：購読ライセンス購入のみ促します。

■ schema設定の意味：

• type: 上記のwhenブロックと対応する識別子
• name: 記事編集画面でブロック追加時に表示される名前
• limit: 記事内で使用可能な個数制限（1つまで）

▼ ブログ記事テンプレートの作成
次に管理画面から「オンラインストア」→「テーマ」→「カスタマイズ」からカスタマイズ画面を開き、画面中央からブログ記事→「テンプレートを作成する」を選択し、名前はアルファベットで入力してください。ここでは「paid」とします。


そして、paidテンプレートのブログ記事セクションのコンテンツを非表示にし、有料コンテンツを追加します。

最後に右上の「保存する」ボタンを押下してください。

手順④ ブログ記事作成例

実際に有料コンテンツを含むブログ記事を作成してみましょう。

記事作成の手順

▼ ブログ記事の新規作成

• 管理画面から「コンテンツ」→「ブログ記事」を選択してください。
• 「ブログ記事を作成する」をクリックしてください。

▼ 基本情報の入力

記事タイトル：お好きなタイトルを付けてください。ここでは「【有料記事サンプル】テスト記事」とします。
著者：お好みの著者名
ブログ：該当するブログを選択してください。
テーマテンプレート：paidを選択してください。

▼ 記事コンテンツは「<----->」により無料コンテンツと有料コンテンツを同じブログ記事内に記載してください。
下図は記入例となります。

記事コンテンツの解説

• 「<----->」は無料部分と有料部分を区切るためのHTML要素となります。手順③により、この文字列を境界として、コンテンツが自動的に分割されます。
• 無料プレビュー部分：「<----->」より上の部分は、誰でも閲覧可能な部分です。適切な文量（300-500文字程度）で読者の興味を引き、読者が「続きを読みたい」と思える、有料コンテンツへの購入意欲を高める内容で終えることができれば効果的です。
• 有料コンテンツ：「<----->」より下の部分は、購入者のみが閲覧可能な部分です。

最後に、記事の公開設定を行い、「記事を保存する」をクリックしてください。設定に問題がなければ記事が公開されます。

3. 動作確認

購入前の状態または非ログイン時の状態は下のようになります。

無料コンテンツ部分のみが表示されていることがわかります。
次に商品購入およびログインアカウントを作成して再度記事にアクセスします。


有料コンテンツ部分のみが表示されていることが分かります。この仕組みにより、質の高いコンテンツを収益化し、購入者との長期的な関係構築が可能になります。

気を付けるポイント

❌ 有料コンテンツブロックが表示されない→ 解決法：

• schemaに正しくブロック定義が追加されているか確認
• ブロックのtypeとwhen文の値が一致しているか確認
• テーマファイルを保存後、記事編集画面を再読み込み

❌ コンテンツが正しく分割されない→ 解決法：

• 区切り文字が正確に入力されているか確認（スペースや改行に注意）
• HTMLエディターで区切り文字の前後に不要なタグがないか確認
• 区切り文字は記事内で1つだけ使用する

❌ 商品リンクが機能しない→ 解決法：

• 商品ハンドルが正しく設定されているか確認
• 商品が公開状態になっているか確認
• URLの形式が/products/商品ハンドルになっているか確認

❌ サンプル記事で有料部分が表示されない→ 解決法：

• ブログ記事テンプレートに「有料コンテンツ」ブロックが正しく追加されているか確認
• 区切り文字<----->が正確に記載されているか確認
• 購読者タグが正しく付与されているか顧客管理画面で確認

4. 終わりに

本記事では、Shopifyの標準機能を活用して有料ブログ記事の販売システムを構築する方法を詳しく解説しました。このシステムを導入することで、購入から権限付与まで完全に自動化された購入管理が可能になります。記事内で簡単に有料・無料エリアを区別できる直感的なコンテンツ管理機能により、運営者は効率的にコンテンツを作成・更新できます。またテーマカスタマイズからの簡単な管理を実現する柔軟なブロック設計により、技術的な知識が少なくても継続的な運用が行えます。

このシステムを基盤として、段階的な商品展開を進めることもできます。単体記事の販売から始まり、複数記事をセットにした記事パックの販売や、特定カテゴリ専用のアクセスライセンス設定、期間限定の特別価格での販売など、多様な販売戦略を展開できます。コンテンツの充実面では、従来のテキストベースの記事に加えて、動画コンテンツの埋め込みやPDFダウンロード機能の追加、購入者限定の特典コンテンツ提供など、より価値の高いコンテンツ体験を創造できるでしょう。

✅ 購入者限定の特典コンテンツ提供に関しては、こちらの記事も参考にしてください。

この記事を参考に、是非Shopifyでの有料ブログ記事販売システムの構築に取り組んでみてください。
株式会社Tsuzucleでは、Shopifyに関する技術サポートを提供しています。ご相談は、下記のリンクよりお気軽にお問い合わせください。
お問い合わせ：https://tsuzucle.com/pages/contact
メールアドレス：[e-mail]
Xアカウント：https://x.com/tsuzucle