【PageFly x GO SUB】Shopifyでデザイン性の高いサブスク販売ページを作る方法
ECサイトの売上を安定させる手段として注目されているのが、サブスクリプション(定期購入)の仕組み。
Shopifyでサブスク販売を始めるなら「GO SUB」が便利ですが、同時に「お客様を惹きつける魅力的なページ」も重要ですよね。
そこで活躍するのが、ノーコードで自由自在にページをデザインできる「PageFly」というページビルダーアプリ。ここで多くの方が気になるのが、「PageFlyで作ったページで、GO SUBのサブスク機能って使えるの?」という疑問です。
今回は、PageFlyで作成したページにGO SUBの定期購入機能を組み込む方法を、初心者の方でもわかるようにステップバイステップで解説します。実際の運用で注意すべきポイントもしっかりお伝えしますので、ぜひ最後まで読んでみてくださいね。
作業概要
サクッと手順確認
画像だけでサクッと手順を確認したい場合はこちらをご覧ください!
詳細手順についてはこの下で細かく説明しますのでじっくり読みたい方は続きをご覧ください。
STEP 1. PageFlyでカスタムテンプレートを作成
まずはテンプレートを作成していきます。
PageFlyには様々なテンプレートが用意されています。今回はその中の一つを選び、カスタマイズしていきます。皆さんが作成される際はイチからお好きにページを作成することもできますので、いろいろ試してみてくださいね。
商品テンプレートを作成する
Create from templatesからProductを選択し、表示されるテンプレートからお好きなものを選び「Select」を押します。
GO SUBブロックを挿入できるのは商品テンプレートのみです。
ホームページ、ページテンプレート、コレクションテンプレートにはブロックを追加できません。
LPなどの商品ページ以外で定期購入を促したい場合は、GO SUBの購入リンク機能をご利用ください。
詳細はこちらから
LPに「今すぐサブスク」ボタンを設置しよう!Shopifyの定期購入アプリGO SUBでCTAボタンを作成する手順と設置方法を解説
テンプレートに商品を紐付ける
Page assignmentから紐付けたい商品を選択します。合わせて、テンプレート内での表示を確認するため、Product detailsセクションのContentにてAutoを設定します。
そうすることでPageFlyのビルダー内で対象商品を表示させ内容確認することができます。
STEP 2. アプリブロックを商品テンプレートに追加
画面左のメニューから「Third-party elemets」を開き、App blocksを任意の場所にドラッグ&ドロップします。
場所はバリエーション選択の下、購入ボタンの上がおすすめです!
合わせて、アプリブロックのStylingタブでブロックの幅(Width)を Fillに設定しておくことをおすすめします。デフォルトではHugになっており、この後追加するGO SUBブロックの幅が狭く表示されてしまいます。
そのほかのデザインなどはお好きに設定してくださいね!
後から追加変更なども可能なので、ある程度完了したら名前をつけてテンプレートを保存し、Publishします。
STEP 3. テーマカスタマイザでテーマデフォルトの商品情報を非表示にする
次にShopifyのテーマカスタマイザで少し編集していきます。その前に、PageFlyのアプリ上でテンプレート名を確認しておきましょう。
Shopifyのテーマカスタマイザで上記で確認したテンプレートを表示させます。
Shopifyのテーマで作成されている商品情報は不要なので目のマークをクリックして非表示にします。
重要:デフォルトの商品情報セクションにはGO SUBブロックが含まれていないことを必ず確認
非表示にしたShopifyの商品情報の中にGO SUBブロックが入っている場合は必ず削除してください。この中にGO SUBブロックが残っている場合はサブスクリプション購入が正しく動作しません。
STEP 4. PageFlyテンプレートにGO SUBブロックを配置
テンプレート内にあるPageFlyで作成されているセクション内のブロックを追加から、GO SUBブロックを追加します。
すると、STEP2で設定したアプリブロックの位置にGO SUBブロックが挿入されます。
STEP 5. 追加のスタイルカスタマイズ
GO SUBのカラー変更機能を使い、テーマに合うカラーに変えていきます。
GO SUB設定画面の設定から、カラーを選択します。
お好きなカラーに変更し、保存します。
他もPageFly・テーマカスタマイザ等で微調整を行なってくださいね。
STEP 6. 表示と動作確認
STEP 5まで完了したら、表示と動作確認を行なっていきます。
実際のページにGO SUBブロックが表示されているか、定期購入オプションを選択しカートに入れた場合、サブスクリプションとしての購入となっているかなどを確認してください。
STEP 3の重要事項としてお伝えした他のセクションにGO SUBブロックが重複して入っている場合などは定期購入のオプションが正しく機能しません。
カートの確認や実際のテスト購入を行い、定期購入契約が作成されていない場合はセクション内のブロックを確認してみてください。
おまけ:ShopifyのAI「Sidekick」を味方にしよう
今回、テスト商品としてフェイシャルクリームをShopify上で作成しました。
その際、ShopifyのAI「Sidekick」に写真を生成してもらい、商品情報も書いてもらいました。もちろん実際の商品の細かい情報に合わせて写真や詳細情報を記載する必要はありますが、かなり手助けになると思いますのでぜひ試してみてくださいね!
まとめ:PageFly × GO SUBで理想のサブスクストアを実現しよう
お疲れさまでした!
ここまでの手順を踏めば、PageFlyで自由に作成したカスタムページで、GO SUBの定期購入機能をしっかり動かすことができます。
デザインの自由度と、安定した定期購入の仕組み。この2つを組み合わせることで「見た目も良く、売上も安定する」という理想的な状態に近づけるはずです。
そして PageFlyは、コーディング不要で自由度の高いページデザインを実現できるページビルダー。豊富なテンプレートとドラッグ&ドロップの直感的な操作で、コンバージョン率の高い魅力的なページを簡単に作成できます。
GO SUBは、初めてサブスク販売に挑戦する方でも気軽に始められるシンプルさを持ちながら、本格的なビジネスにも対応できる高機能なサブスクアプリです。
さらに、多言語・多通貨にも対応しているので、国内向けのサブスク販売はもちろん、越境ECで海外のお客様に定期購入を提供したいストアにもぴったり。 「まずは小さく始めたい」という方から「グローバルに展開したい」という方まで、幅広いニーズに応えるサブスクアプリになっています!
「サブスクを始めたいけど、デザインにもこだわりたい」
「お客様に選ばれるページを作りながら、安定収益も得たい」
そんな想いをお持ちのストア運営者の皆さま、ぜひPageFlyとGO SUBの組み合わせをお試しください!
【GoSubについて】
弊社ではGoSubの新機能や活用法についても日々記事を更新中です!
