【Go Sub Tips】全プラン対応！サブスク選択・アカウント画面をオリジナル仕様にカスタマイズする方法を徹底解説

ShopifyのサブスクリプションアプリGo Sub を提供しているGO RIDEです！

今回は商品ページのサブスクリプション選択欄やお客様アカウント画面でのGo Subセクションをカスタマイズする方法をご紹介します。

今回ご紹介するカスタマイズは月額無料のスタータープランをお選びのマーチャント様含め、全てのプランでご利用が可能です！ ぜひ皆さまのストアのスタイルに合うカスタマイズをご利用ください。

この記事はGoSubをすでにインストールされているマーチャント様へ向けた記事となっています。

GoSubってなに？どんな機能があるの？という方はぜひ以下のボタンから資料をご請求ください！

Go Subの初期設定では商品ページのカラーは黒に設定されています。

こちらをストアのカラーに合うようにカスタマイズします。

例えばこのようなストア、全体的にネイビーで統一されている中ではGo Subのデフォルトカラーである黒が馴染んでいないですよね。

こちらを変更してきます！

ストアで使用しているカラーを確認する方法を2種類ご案内します。

すでにストアで使用しているカラーを把握されている場合はこちらは飛ばしていただいてOKです！

Shopify管理画面＞オンラインストア＞カスタマイザ を開きます。

画面左側の歯車マークからテーマ設定を開き、そこから色の設定項目を開きます。

テーマ内で合わせたい要素にどの色が使われているか確認し、そのコードを控えます。

#で始まる文字列がHEXと言われる色コードです。

商品ページのカラーピッカーで、先ほど確認した色コードを入力します。

画面右側に表示されるサンプル画像がリアルタイムで変わっていることも確認いただけます。

必要に応じて、割引ラベルのカラーもこちらでご変更ください。

設定が完了したら保存します。

ストアに戻って表示を確認すると、ボタンカラーとGo Subのカラーが統一され、全体的にとてもスッキリ整った印象になりました！

追加Tipsとしてボタンスタイルを変更する方法をお伝えします！

ただし、この方法はGo Subアプリから設定するのではなくテーマカスタマイザからスタイルを追加します。

Go Subアプリ公式推奨の方法ではなく、私個人からの非公式Tipsです 🤫

テーマカスタマイザから商品ページの設定を開き、商品情報のセクションをクリックします。

※ご利用中のテーマによっては表示が異なる場合があります。

画面下にあるカスタムCSS欄に下記のコードを入力し、保存します。

.Go Sub-widget__wrapper .Go Sub-widget__group label {

border-radius: 40px;

}

※40pxという数値はご利用中のテーマに沿って変更してください。

そうすると、Go Subのボタンにも角丸が適用され、ぐっと統一感が出ました！

先述の通り、こちらはGo Subアプリ公式のカスタマイズではないため、アプリにアップデートがかかった場合などはスタイルが元の四角に戻る可能性があります。予めご了承の上ご利用くださいませ。

テーマファイルを編集するのはちょっと怖い…もっと自由にカスタマイズしたい！という方はぜひGO RIDEまでお問い合わせくださいませ！

お客様アカウントページでお客様が直接サブスクリプションを管理できるセクションです。こちらの色設定もご自由に変更が可能です。

Go Sub管理画面＞設定＞カラー を開き、商品ページと同様のカラーを設定していきます。

今回はボタンカラーを合わせ、追加でステータスバーのカラーも変更しました。

一度ボタンカラーのコードを入力し、カラー選択画面内でドラッグしながら色を変更することも可能です。

実際にストアで表示した場合も背景に馴染んでスッキリした印象になりました！

定期購入のプランに独自の名前をつけていらっしゃるマーチャント様も少なくありません。

Go Subの初期設定では、商品ページ内のボタンは「定期購入」「通常購入」となっています。こちらをオリジナルの名前「お得な定期便」「お試し購入」に変えてみましょう。

Go Sub管理画面＞設定＞翻訳、テキスト変更 を開きます。

利用できる言語が多いため、こちらでは「翻訳の編集」という表記となっていますが日本語のみをご利用の場合は「テキストの編集」と捉えていただいて構いません。

越境でご利用の場合はこちらで様々な言語のテキスト設定が可能です！

こちらの入力欄で「定期購入」→「お得な定期便」に、「通常購入」→「お試し購入」というテキストに変更しました。完了したら保存します。

さらにオリジナル感が出るようになりました！

同様に、お客様アカウントページのテキストも変更してみましょう！

変更は即時反映されます。ストアの命名ルールやメインターゲットのお客様に合わせてぜひカスタマイズしてみてくださいね。

いかがでしたか？今回はGo Subのセクションをストアのテーマに合わせてカスタマイズする方法についてご説明しました。

月額無料のスタータープラン含む全てのプランでご利用いただけますので、ぜひ皆様のストアにあったカスタマイズをご設定ください！

カスタマイズまで手が回らない、できる人がいない、もっとテーマに沿って細かくカスタマイズしてほしいなどのご相談がありましたらぜひGO RIDEまでお問い合わせくださいませ！

今後のGo Sub Tipsもお楽しみに！