Reading list Switch to dark mode

    Multivendor marketplace app for Shopify – Social Media login app

    Updated 1 November 2022

    Want to make the seller login & sign up process quick? Then here comes the featured app called SOCIAL MEDIA LOGIN through which sellers can login to their Multivendor Marketplace seller panel using Gmail and Facebook accounts.

    Let’s understand this featured app step by step:-

    Step 1:- Installation

    Go to the multivendor admin panel >> hover on three dots >> click on feature apps.

    Dashboard-Admin-1

    Now, scroll down and Click on enable to pay for Social media login feature app.

    Screenshot1-1

    Step 2:- Configure the Social sign in the multivendor marketplace app

    Once the admin has paid for this featured app then a sub menu named “SOCIAL MEDIA CONFIGURATION is added under the configuration dropdown.

    Start your headless eCommerce
    now.
    Find out More

    i.e. Marketplace admin panel>>Configuration>>Social media configuration

    Dashboard-Admin

    Click on social media login configuration and the admin have to enable the LOGIN WITH FACEBOOK and fill in their Facebook API app ID and click SAVE CHANGES.

    Similarly, enable the LOGIN WITH GMAIL and fill in their Gmail API client ID and Gmail API secret key click SAVE CHANGES.

    Screenshot-9

    Step 3:- How to get Facebook API App ID

    1. Login to your developer account of Facebook through this link – https://developers.facebook.com/
    2. Click on “Create app” button.
    Annotate-a-local-image

    3. Now, select the type of account and click on the “Next” button below.
    Note: App type can’t be changed after you created this app.

    Annotate-a-local-image1

    4. After this, enter your marketplace shop name in the “display name” field, your email in-app contact email field, and Click on create app button.

    Annotate-a-local-image2

    5. Now, you will be redirected to the dashboard page of your Facebook developer account where you will see the application ID.

    But before you copy and paste the App ID in the social media login configuration, first you have to follow some steps to make the app development mode live.

    Annotate-a-local-image3

    6. To make app development mode live, click on Setup buton on the Facebook login section and then click on Basic Settings.

    Annotate-a-local-image4
    Annotate-a-local-image5

    Now, fill in your admin panel URL in the App domain field, enter the privacy policy URL, enter the terms of service URL and select the category.

    Annotate-a-local-image6

    After the above steps then click on the Start verification button for the verification.

    Annotate-a-local-image7

    Scroll down to fill “Data protection officer contact information” section i.e. Name, email, Street Address, City/district, country, etc.

    Annotate-a-local-image8

    Now, click on “Add platform” button to select the platform of your multivendor marketplace app that you have currently and then Click “Next” & “SAVE CHANGES” buttons.

    Annotate-a-local-image9
    image7

    7. Now, some permission is needed for email and the public_profile.
    Go to App review >> Permissions & features >> click the “Get advanced access” button in front of the Email and public_profile.

    Annotate-a-local-image10
    Annotate-a-local-image11

    8. Now, the final steps to make App development mode live.

    Go to Facebook login section >> Settings >> Enable “Login with the javascript SDK” and click “SAVE CHANGES” button below.
    After this, you will see that the APP development mode is live.

    Annotate-a-local-image13

    9. Lastly you can paste the Facebook API App ID in the social media login configuration.

    Annotate-a-local-image14

    4. How to get the API client ID and secret keys for Gmail.

    1. Log in to your Gmail developer account through this link – https://console.developers.google.com
    2. Go to your Enabled APIs & services section >> Click on the “Create Project” button.
    Screenshot1-2

    Now, write your project name and give the organisation location and click on “Create” button.

    Annotate-a-local-image23

    3. Now, Go to “OAuth consent screen” >> check your app name and user support email >> add your website URL in the Authorized domain and Click the “SAVE & CONTINUE” button.

    Annotate-a-local-image15
    Annotate-a-local-image16

    4. Now, Go to Credential >> click on “Create Credential” >> then Click on OAuth clientID

    Annotate-a-local-image17

    5. After, clicking on OAuth client ID, you have to fill in your admin panel URL in the Authorized Javascript origins field and Click “SAVE” button below.

    Annotate-a-local-image18

    6. Again go to the OAuth consent section >> finally click on “publish app” button.

    Annotate-a-local-image19

    Now, you can get the client ID and secret key from the Credential section >> click on that app name and copy the Client ID and secret key. >> copy this client ID and secret in the social login configuration of the marketplace app.

    Annotate-a-local-image20
    Annotate-a-local-image21

    As soon as you have pasted this client ID and secret in the social login configuration of the marketplace app.
    Then your seller login page will look like the below:-

    Annotate-a-local-image22

    Need help?

    If you need any kind of support, just raise a ticket at https://webkul.uvdesk.com/en/. You can also contact [email protected] to get proper assistance.

    Thank You for reading this Blog!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content