How to setup a customer Bigcommerce login page

Therefore, in this article, we will instruct How to set up a customer login page for BigCommerce store relating to customer account preferences and account creation notifications via emails.

What is a Bigcommerce customer login page?

Overview

A customer account login page is where a customer can have their store accounts by clicking on “Log in” for entering their existing account or “Register” for making a new account.

Customer account creation allows your customers to manage orders, create wish lists, and even save an address book for a quicker checkout. In an attempt to increase the recognition of your branding, this setup also provides you the easy approach to view individual order data, give store credits, send order messages, and segment your customers into specific groups for discounts and tax purposes whenever having a purchase.

How a login page is necessary

Unlike guest checkouts - a purchase without logging into or creating a store account, customer accounts retain customers’ information they enter during the buying process. Although the guest checkout boosts faster checkouts, reduces abandoned cart notifications, or lower-level engagement with customers, customer accounts prompts your store to elevate revenue gradually.

Let us show you main advantages if you set up this section for your store:

• Repeat purchase with ease

• Automatic loyalty enrollment

• Manage order history

When you need a customer account page

Your site can offer customers to sign up at any time during the accessing process. You don’t force them to create an account because they have their own decisions that you cannot change. Just explain the benefits they get when creating an account consisting of loyalty programs, coupons, or gifts.

We will bring you some conditions to install a customer account page:

• Business-to-Business e-Commerce website

• Recurring purchase offer

• Discount offers for individual preferences

• Loyalty program

It is really necessary to install the “Login” and “Register” sections on e-Commerce sites since those conditions are the need for most businesses.

Here is the typical template of customer login pages in BigCommerce stores.

How to set up a Bigcommerce customer login page

Step 1: Log in your store and click “View Store”

When you have a look at your store, you can check if “Login and Register” exists or not on the top corner of the website.

If no, you can enable customer accounts or if yes, you can edit the SignUp form that we will break down meticulously in the next 2 steps.

Step 2: Enable or disable customer accounts in the Settings

When checking the “Login” page on your homepage, it does not appear, maybe because you removed or disable customer accounts in your settings.

Mentioning customer accounts before knowing when you set up a customer page for your store is necessary for anyone who just gets started on an e-Commerce website. Customers are redirected to a separate account creation page.

There are 3 customer account options in total to consider when you set up a signin page in your store:

Accounts are disabled: Customers won’t see the option to create an account or to log in during checkout, thus, they’ll have to enter their details at checkout manually. If the customer checks the “Save this information for next time” box, then a browser cookie saves the customer’s information for that store only.

Accounts are optional: Customers can choose to create an account, but it’s not compulsory to create an account to check out. If customers have an account and logged in, their address fields are pre-filled when they have an order. Customers have the option to log in through the Already have an account? Log in link above the email entry field. Clicking this link prompts a user to either enter their email address and password, create a new account, or continue to check out as a guest.

Accounts are required: Customers need to create an account or account and be logged in to complete the checkout. This setting is useful if you’re running a wholesale or members-only store. Address fields are pre-filled when the customer places an order. Remember that required accounts don’t remove the option for your customers to create accounts.

To edit customer accounts and other functions in the “Settings”, select “Store Setup”, after that choose “Store Settings” like below we guide you.

On the bar of that section, click the “ Display”, then tick on “Enable Account Creation” in “Display Settings” to activate the function. Finally, save your changes.

“Login” page will be on the corner of the website’s homepage, allowing customers to create new accounts or access to their accounts.

Step 3: Go back your store account, select “Advanced Settings” to edit signup form

If you already have a customer login page on your website that BigCommerce platform automatically sets up, you may edit Signup form segments by following these steps.

Select “Advanced Settings”, next choose “Account Signup Form”.

In the “Account Signup Fields”, there are some built-in fields that are on both “Login” and “Register” pages.

Click on the symbol “…” correlative with the chosen field to edit the information.

Furthermore, you also can create more fields as you need to get them to appear on the login page by clicking “Create a new field”. There are several sorts of fields to create, remember to read the BigCommerce instructions carefully before and while doing it.

Step 4: Go to “Marketing” in Dashboard, then click on “Transactional emails”

Setting email notifications when customer accounts have any changes. You should enable the options relating to the “account” term such as “Account Settings Edited”, “Password reset”, “Guest Account Created”, or “Account Created”.

Don’t worry that the BigCommerce platform has enabled all of them for you as you started creating your store account. Check and decide which ones you want to edit templates or disable, depending on your operation.

How to set up BigCommerce login with Facebook for your online business?

It is stated that the number of people using Facebook as one of their main sources for social networking has increased up to 2.85 billion across the globe. For this reason, a plethora of eCommerce retailers has updated their website with Facebook logins for convenient purposes.

More specifically, logging in with Facebook gives users the ability to utilize their current information to sign in to third-party sites. In this way, they do not have to fill in the form one more time and quickly track these websites from Facebook. Additionally, they may skip the password creation process, and it is totally fine not memorizing it.

OAuth, a mechanism used for granting third-party apps a “session token” so they may post to providers on behalf of the user, is often implemented when Facebook logins are employed.

There are reasons leading to the common use of BigCommerce login with Facebook. Some of its outstanding benefits could be listed below:

• Easy to use: within only one button, your visitors can quickly sign in for an account and start using or shipping at your store. There is no need to think of a new account name or password and start typing the information repeatedly. This decreases the friction that customers experience while they are onboarding or returning to your site.
• Gain permission to access private information: The moment your customers start integrating their Facebook account with your BigCommerce store, you are allowed to gather valuable information about their demographics and social circumstances. These contain everything from address, hometown, date of birth, phone number or email address. Apparently, most people tend to have only one account at a time, which has proven the authenticity of this data.
• Growth in registration rate: The data has illustrated that nearly 90% of users choose to exit from a website instead of finishing a standard registration form. Thanks to this innovation, the average conversion rate for eCommerce stores has been around 50% greater. Now that you have already gained a full understanding of the definition, how it works and the advantages that BigCommerce login with Facebook can bring to your business, let’s make it real. We will guide you through the setting up process for Facebook login button to your website in the easiest way possible, steps by steps:

Step 1: Fulfill requirements

Several things you need to have in order to have access to setting up your BigCommerce login with Facebook button appearing on the signup page:

• A account as Facebook Developer
• A Facebook App customized with basic settings
• The Facebook JavaScript SDK

If you have not signed up for this account, make sure that you have it all well-prepared before the journey begins!

On the other hand, once you have fulfilled all the mentioned requirements, you are ready to move on to the next step.

Step 2: Fill in your URL link

First of all, go to your Facebook App Dashboard, you can see in the center of the screen there is a section called “Facebook Login” and a “Set up” button under that, click on it:

On the left-hand side, choose the “Settings” under the “Facebook Login” text:

Scroll down and then you will see a box asking you to fill in your URL links under the line “Valid OAuth Redirect URls”, copy and paste in your link:

Don’t forget to “Save” your work!

Step 3: Checking a visitor’s status

This is where you can identify if someone is logged into Facebook with their username and password before entering your website or not. Therefore, FB.getLoginStatus will begin a call to Facebook to check the status of your customer. Once Facebook has retrieved the results, it invokes your callback function.

This is how your code for the calling part will look like:

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

The “Status” might change depending on your customers’, there are three types of them in total:

If they appeared as “connected”, the system will automatically answer with one of these authResponse parameters, such as:

Step 4: Inserting the Login with Facebook button

Setting up the BigCommerce login with Facebook might look difficult and require a lot of technical knowledge to finish them. However, we have simplified the process to solve your problems. Just ensure that you follow every single step carefully:

Facebook will provide you with a Plugin Configurator, where you can adjust the size and the text for your BigCommerce log in with the Facebook button. If you are done, choose “Get code” underneath the table:

You insert the following code after the content script:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v10.0&appId=2946661078949907&autoLogAppEvents=1" nonce="YoflBAAn"></script>

And this one at anywhere you want it to be available on your site:

<div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="false"></div>

Step 5: Additional settings (if necessary)

Furthermore, you can also update a box asking for the permission of your customers to use their private information by adding this set of code:

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Also, rather than logging a person Facebook account in, your customers can log out from your website within this call:

FB.logout(function(response) {
   // Person is now logged out
});

Another recommended way is to customize your BigCommerce login with Facebook button into “Continue as Name”, it’s something looks like this:

All you have to do is change a little bit in your original login button code by adding data-use-continue-as=”true”. The downside here is that it is impossible to adjust the button size based on your preference. This has been a default setting designed by Facebook:

Bigcommerce Customer Login Page Setup: Final thought

In conclusion, the customer login page plays an essential role in eCommerce stores, helping the owners run the system effectively and smoothly. You have loyal customers, optimize the sales by collecting customer information and other benefits discussed above.

This article clarified all basic questions about the customer login page and necessary steps of How to set up a customer login page for BigCommerce page. We hope that it is helpful enough for you to practice and if you are still not clear, please feel free to leave a comment to get further support from us.