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

SHOPIFY Subscription App GO SUB GO RIDE that offers!

This time, we will introduce how to customize the subscription selection column of the product page and the GO SUB section on the customer account screen.

The customization introduced this time can be used for all plans, including the Martant who chooses a free star plan! Please use customization that suits your store style.

This article is an article for the merchant who has already installed Gosub.

What is gosub? What functions do you have? Please request materials from the following buttons!

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.

GO SUB management screen> Setting> Open color.

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!

If a round button is used throughout the store, there is not much unity that only the regular buttons are square.

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;

}

* Please change the number of 40px according to the theme you are using.

Then, the Kakomaru was applied to the Go Sub button, and a sense of unity came out!

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!

There are many merchanters who have their own name on the regular purchase plan.

According to the initial settings of Go Sub, the buttons in the product page are "regular purchases" and "normal purchases". Let's change this to the original name "Great regular flight" and "trial purchase".

GO SUB Management Screen> Settings> Translate, Text Change Open.

Because there are many languages ​​that can be used, it is written here "editing translation", but if you use only Japanese, you can consider it as "edit of text".

If you use it at the crossing, you can set various languages ​​here!

In this input field, it was changed to "regular purchase" → "affordable regular flight", and "normal purchase" → "trial purchase". Save it once it is completed.

In addition, the original feeling has come out!

Similarly, let's change the text page textbook!

Changes are reflected immediately. Please customize it according to the naming rules of the store and the main target customers.

How was it? This time, I explained how to customize the GO SUB section according to the theme of the store.

You can use it for all plans including the monthly free star plan, so please set the customization that suits your store!

Please contact Go Ride if you have any consultations such as not being able to customize, no one can do it, and we want you to customize it in detail according to the theme!

Look forward to the future GO SUB TIPS!