[GO SUB TIPS] Compatible with all plans! Thorough explanation of how to customize the sub -school selection / account screen to the original specification

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

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

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

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

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

In the initial setting of Go Sub, the color of the product page is set in black.

Customize this to match the color of the store.

For example, such a store is unified in navy as a whole, the default color of GO SUB is not familiar.

I will change this!

Here are two types of ways to check the colors used in the store.

If you already know the color you are using in the store, you can skip here!

SHOPIFY management screen> Online store> Open customizer.

Open the theme setting from the gear mark on the left side of the screen, and then open the color setting item.

Check which colors are used in the elements you want to match in the theme, and refrain from that code.

The character string that starts with #is a color code called HEX.

Enter the color code you just checked with the color picker on the product page.

You can also confirm that the sample image displayed on the right side of the screen has changed in real time.

If necessary, please change the color of the discount label here.

Save once the setting is completed.

Returning to the store and checking the display, the button color and the GO SUB color were unified, giving a very refreshing impression overall!

I will tell you how to change the button style as an additional tips!

However, this method adds a style from the theme customizer instead of setting it from the Go Sub app.

GO SUB App, not officially recommended method, but an unofficial TIPS from my personal 🤫

Open the product page settings from the theme customizer and click the product information section.

* The display may differ depending on the theme you are using.

Enter the following code in the custom CSS column at the bottom of the screen and save it.

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

border-radius: 40px;

}

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

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

As mentioned earlier, this is not the official customization of the GO SUB app, so if the application is updated, the style may return to the original square. Please use it beforehand.

It's a bit scary to edit the theme file ... I want to customize it more freely! Please contact Go Ride!

It is a section where customers can directly manage the subscription on the customer account page. You can also change this color setting freely.

GO SUB management screen> Settings> Open the color and set the same color as the product page.

This time, the button color was combined, and the color of the status bar was also changed.

It is also possible to enter the button -colored code once and change the color while dragging on the color selection screen.

Even if it was actually displayed in the store, it became familiar to the background and gave a refreshing impression!

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

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

Open the Go Sub management screen > Settings > Translation, Text Change.

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

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

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

In addition, the original feeling has come out!

Similarly, let's change the text page textbook!

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

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

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

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

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