PageFly x GO SUB記事バナー画像

【PageFly x GO SUB】Shopifyでデザイン性の高いサブスク販売ページを作る方法

2025年10月27日

ECサイトの売上を安定させる手段として注目されているのが、サブスクリプション(定期購入)の仕組み。

Shopifyでサブスク販売を始めるなら「GO SUB」が便利ですが、同時に「お客様を惹きつける魅力的なページ」も重要ですよね。


そこで活躍するのが、ノーコードで自由自在にページをデザインできる「PageFly」というページビルダーアプリ。ここで多くの方が気になるのが、「PageFlyで作ったページで、GO SUBのサブスク機能って使えるの?」という疑問です。

今回は、PageFlyで作成したページにGO SUBの定期購入機能を組み込む方法を、初心者の方でもわかるようにステップバイステップで解説します。実際の運用で注意すべきポイントもしっかりお伝えしますので、ぜひ最後まで読んでみてくださいね。

作業概要

🎨
STEP 1
PageFlyでカスタムテンプレートを作成
⚙️
STEP 2
アプリブロックを商品テンプレートに追加
👁️
STEP 3
テーマカスタマイザでデフォルト情報を非表示
📦
STEP 4
PageFlyテンプレートにGO SUBブロックを配置
STEP 5
追加のスタイルカスタマイズ
STEP 6
最終動作確認

本記事はPageFlyページでのGO SUB利用方法に特化した説明記事となっています。設定方法等は以下をご参照ください。


GO SUB ヘルプページ

PageFly公式サイト

サクッと手順確認

画像だけでサクッと手順を確認したい場合はこちらをご覧ください!
詳細手順についてはこの下で細かく説明しますのでじっくり読みたい方は続きをご覧ください。

STEP1
STEP2
STEP3
STEP3 注意事項
STEP4
STEP5

STEP 1. PageFlyでカスタムテンプレートを作成

まずはテンプレートを作成していきます。

PageFlyには様々なテンプレートが用意されています。今回はその中の一つを選び、カスタマイズしていきます。皆さんが作成される際はイチからお好きにページを作成することもできますので、いろいろ試してみてくださいね。

商品テンプレートを作成する

Create from templatesからProductを選択し、表示されるテンプレートからお好きなものを選び「Select」を押します。

PageFly Create page from templates
Select a template

GO SUBブロックを挿入できるのは商品テンプレートのみです。
ホームページ、ページテンプレート、コレクションテンプレートにはブロックを追加できません。

LPなどの商品ページ以外で定期購入を促したい場合は、GO SUBの購入リンク機能をご利用ください


詳細はこちらから

LPに「今すぐサブスク」ボタンを設置しよう!Shopifyの定期購入アプリGO SUBでCTAボタンを作成する手順と設置方法を解説

テンプレートに商品を紐付ける

Page assignmentから紐付けたい商品を選択します。合わせて、テンプレート内での表示を確認するため、Product detailsセクションのContentにてAutoを設定します。

そうすることでPageFlyのビルダー内で対象商品を表示させ内容確認することができます。

Page assingment

STEP 2. アプリブロックを商品テンプレートに追加

画面左のメニューから「Third-party elemets」を開き、App blocksを任意の場所にドラッグ&ドロップします。

場所はバリエーション選択の下、購入ボタンの上がおすすめです!

Add a app block

合わせて、アプリブロックのStylingタブでブロックの幅(Width)を Fillに設定しておくことをおすすめします。デフォルトではHugになっており、この後追加するGO SUBブロックの幅が狭く表示されてしまいます。

Modify block size

そのほかのデザインなどはお好きに設定してくださいね!

後から追加変更なども可能なので、ある程度完了したら名前をつけてテンプレートを保存し、Publishします。

STEP 3. テーマカスタマイザでテーマデフォルトの商品情報を非表示にする

次にShopifyのテーマカスタマイザで少し編集していきます。その前に、PageFlyのアプリ上でテンプレート名を確認しておきましょう。

Check the template name

Shopifyのテーマカスタマイザで上記で確認したテンプレートを表示させます。

Select the template on theme customizer

Shopifyのテーマで作成されている商品情報は不要なので目のマークをクリックして非表示にします。

Hide Shopify default product details

重要:デフォルトの商品情報セクションにはGO SUBブロックが含まれていないことを必ず確認

非表示にしたShopifyの商品情報の中にGO SUBブロックが入っている場合は必ず削除してください。この中にGO SUBブロックが残っている場合はサブスクリプション購入が正しく動作しません。

Remove GO SUB block from default product details section

STEP 4. PageFlyテンプレートにGO SUBブロックを配置

テンプレート内にあるPageFlyで作成されているセクション内のブロックを追加から、GO SUBブロックを追加します。

Add GO SUB block to PageFly section

すると、STEP2で設定したアプリブロックの位置にGO SUBブロックが挿入されます。

Display GO SUB block

STEP 5. 追加のスタイルカスタマイズ

GO SUBのカラー変更機能を使い、テーマに合うカラーに変えていきます。

GO SUB設定画面の設定から、カラーを選択します。

GO SUB color settings

お好きなカラーに変更し、保存します。

GO SUB color settings

他もPageFly・テーマカスタマイザ等で微調整を行なってくださいね。

STEP 6. 表示と動作確認

STEP 5まで完了したら、表示と動作確認を行なっていきます。

実際のページにGO SUBブロックが表示されているか、定期購入オプションを選択しカートに入れた場合、サブスクリプションとしての購入となっているかなどを確認してください。


STEP 3の重要事項としてお伝えした他のセクションにGO SUBブロックが重複して入っている場合などは定期購入のオプションが正しく機能しません。

カートの確認や実際のテスト購入を行い、定期購入契約が作成されていない場合はセクション内のブロックを確認してみてください。

Result page

おまけ:ShopifyのAI「Sidekick」を味方にしよう

今回、テスト商品としてフェイシャルクリームをShopify上で作成しました。

その際、ShopifyのAI「Sidekick」に写真を生成してもらい、商品情報も書いてもらいました。もちろん実際の商品の細かい情報に合わせて写真や詳細情報を記載する必要はありますが、かなり手助けになると思いますのでぜひ試してみてくださいね!

まとめ:PageFly × GO SUBで理想のサブスクストアを実現しよう

お疲れさまでした!

ここまでの手順を踏めば、PageFlyで自由に作成したカスタムページで、GO SUBの定期購入機能をしっかり動かすことができます。

デザインの自由度と、安定した定期購入の仕組み。この2つを組み合わせることで「見た目も良く、売上も安定する」という理想的な状態に近づけるはずです。


そして PageFlyは、コーディング不要で自由度の高いページデザインを実現できるページビルダー。豊富なテンプレートとドラッグ&ドロップの直感的な操作で、コンバージョン率の高い魅力的なページを簡単に作成できます。


GO SUBは、初めてサブスク販売に挑戦する方でも気軽に始められるシンプルさを持ちながら、本格的なビジネスにも対応できる高機能なサブスクアプリです。

さらに、多言語・多通貨にも対応しているので、国内向けのサブスク販売はもちろん、越境ECで海外のお客様に定期購入を提供したいストアにもぴったり。 「まずは小さく始めたい」という方から「グローバルに展開したい」という方まで、幅広いニーズに応えるサブスクアプリになっています!


「サブスクを始めたいけど、デザインにもこだわりたい」

「お客様に選ばれるページを作りながら、安定収益も得たい」

そんな想いをお持ちのストア運営者の皆さま、ぜひPageFlyとGO SUBの組み合わせをお試しください!

【GoSubについて】

  GoSubについて詳しく知りたい方はこちら  

  GoSubのヘルプページはこちら  

  GoSubのインストールはこちら  


弊社ではGoSubの新機能や活用法についても日々記事を更新中です!

GoSub関連記事一覧はこちら 

Kanayo

Kanayo Uehara

GO RIDE Engineer

Fukuoka -> Yokohama -> Vancouver, Canada


GO SUB Tips お役立ち情報