Google Login

Step 1: Creating a Google API Console Project & Client ID

To get started you will have to have to create a Google API Console project and client ID. To do this click this link and then click 'Credentials page.' and follow the steps given.



Next, click "Create Project" at the top and follow the steps to configure your project. 

create project

For Project Name, you can choose whatever you want (example: Christine's Test Project'). Leave the organization and location tabs on the default and click "Create".


You may not see organization listed, which is okay. Just change the project name to whatever you like, and then click "Create". The rest are just default and refer to the location the API credential is stored.

project name

Now press the "Configure Consent Screen" button.


Select 'External' your user type and then select "Create"


Next, add the product name that will be shown on the consent screen (example: Christine's Test Project' or 'Commerce7'). Click save.

To get a client ID click "Create credentials" on the credentials page and then click "OAuth client ID".

create credentials-1

Under Application Type, use the drop down menu and select "Web Application".

web app

Under the header "Authorized JavaScript origins" select "+ ADD URI" and copy and paste your website and then select "Create".


After configuration is complete, copy Your Client ID that is created, you will need this to complete the next steps.

clinet IS

Step 2: Adding Your Client ID to Commerce7

Now that you have created your client ID, you can add this to Commerce7. To do this, click on Apps > Google Login App.


Toggle the App to Active and add your client ID (created and copied the step above). Click Save.

You should now see the Google Login available on your website.

Can I Style the Google Login Badge?

The Google login badge can somewhat be styled. We have wrapped it in a class so that a developer can do more with it; However, it's a bit limited as you're supposed to follow branding guidelines. We recommend designers/developers look into branding before making edits.