Last Authored: 3/7/2024

Setup and Instructions for Clouver's Customer Metafield Update application

End Result

In your theme (Customizable via CSS)

In Shopify Admin Customers view

Customers view in Admin

Who is this for?

Ideally any Shopify store (Basic, Shopify for Small Business, Advanced, Starter or Plus plans) that want to give their users the ability to store additional information about themselves
For example, if you sell makeup and you would like your customers to record their skintone color or their favourite color for blush when they log in, then this tutorial is for you

Reach out to team@clouver.app if you have any questions regarding this tutorial.

Requirements

You only need to do this once, if you already have your AWS Access Key and Access Secret you can avoid this step

AWS Credentials (Access Key and Access Secret)

To generate credentials, log into AWS and search for IAM
Click Users in the left menu and click Create User button in the top right corner
Give user a name preferably clouver-sync and click Next
Click Attach Policies Directly option and check off AdministratorAccess
Click Next and finally Create User
From the dashboard click on the created user and Navigate to the Security credentials tab
Scroll down to the Access Keys section and click Create Access Key
Check the Application running outside AWS option and click Next
Lastly click Create access key button
Copy the credentials and keep them somewhere safe. We are going to need them in Shopify Clouver admin app.
Once saved click Done and now you have your AWS Credentials

Deployment Steps

Start by adding AWS Credentials inside the Admin User Interface
Once the credentials are there, the Deploy button should be enabled for the Customer Metafield Update application. Click the Deploy button which drops down a Select and Checkboxes input. Confirm the selection of inputs and click on the green Deploy button.
Application should take 1-2 minutes to deploy and once deployed you should be able to see all the required values needed to make this integration available in your storefront.

Integration

There are two possible ways to integrate the Shopify Customer Metafield Update app for your store customers.

If you would like to implement it via theme editor, follow the Theme Approach. We have done our best to provide you with theme blocks that can be brought in via admin app or just by editing your theme.
If your Shopify storefront is built using the Headless approach or you just want more customization, we recommend using the Code Approach.

Theme Approach

The first thing we need to do is enable the Clouver script in your theme. Simply select the theme you want to use the Customer Metafield Update app on and click Enable App.

This should open up the theme editor and should enable the Clouver app.

By default the form id value in the app settings will be set to customer_login which is shipped natively with most Shopify themes. However, if you need to confirm the form id value, simply open the customer account page on your store (ensure you are logged out) > Right click between email and password inputs > Click inspect element and hover over the form tag to view the id of the form.
Navigate back to the admin page and click on the Refresh button. Step 2 in admin, should change to a green check icon indicating the app has been enabled.
For Step 3, select the metafield you would like to insert for your customers to edit. If there are no options listed simply click the Create New Metafield button which will lead you to create customer based metafield.

Currently we only support modification of COLOR, BOOLEAN, SINGLE_LINE_TEXT_FIELD and DATE metafields.

Clicking Add Metafield to customer account page adds the metafield to the selected theme.
Similarly for Step 4, click Add "Save" Button, which should add the save button to the selected theme.
Clicking View Customer Account Page (you will need to login as a customer) should take you to the account page that your customers see when they log in. The application blocks will allow you to modify settings if needed as well as add CSS to style the page based on your needs.

Code Approach

For the code approach the first thing you need to do is create a customer access token using storefront token displayed in the app. For this you need the customer's email and password and simply need to call the customerAccessTokenCreate mutation when they login into their account.


// Replace with your shop url ending with myshopify.com
const shopUrl = "clouver.myshopify.com";

// API Version
const apiVersion = "2024-01"

// Paste Storefront token from Admin into the doublequotes
const storeFrontToken = "_____________";

// Use the variable as key to save token in local storage
const accessTokenNamespace = "ShopCustomerMetafieldUpdate";

// Create Customer Access token
const storeFrontQueryMutation = `
mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
  customerAccessTokenCreate(input: $input) {
    customerAccessToken {
      accessToken
      expiresAt
    }
    customerUserErrors {
      code
      field
      message
    }
  }
}
`;

// Store CusomterAccessToken in localstorage
const setCustomerAccessToken = async ({ email, password }) => {
  try {
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("X-Shopify-Storefront-Access-Token", storeFrontToken);

    const graphql = JSON.stringify({
      query: storeFrontQueryMutation,
      variables: { input: { email, password } },
    });
    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: graphql,
    };

    const req = await fetch(`https://${shopUrl}/api/${apiVersion}/graphql.json`, requestOptions);
    const customer = await req.json();
    if (
      customer?.data?.customerAccessTokenCreate?.customerAccessToken
        ?.accessToken
    ) {
      localStorage.setItem(
        accessTokenNamespace,
        JSON.stringify(
          customer.data.customerAccessTokenCreate.customerAccessToken,
        ),
      );
    } else {
      console.log(`error setCustomerAccessToken() - ${customer.data}`);
    }
  } catch (err) {
    console.log(`setCustomerAccessToken() - ${err.message}`);
  } finally {
    return;
  }
};

/*
 * Call function in your login logic:
 * 
 * setCustomerAccessToken({ email: emailValue, password: passwordValue })
*/


/* Check if token is being stored in localstorage:
 *
 * localStorage.getItem(accessTokenNamespace)
*/

Once you have added the logic to store the token, then you just need to call the Webhook URL value via POST request with the customer token in the body or data object:


// Replace the following with Webhook value found in Admin Apps > Clouver (Available when status indicator is ready)
const webhookUrl = "https://amazonaws.com/prod/v1/webhook/";

// Create Headers to update metafield value
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

// Retrieve access token that was saved in local storage
const customerAccessToken = localStorage.getItem("ShopCustomerMetafieldUpdate");

// Generate input data
const inputData = [
  { key: "custom", namespace: "favouriteColour", value: "#7504FF" }, // Customer Selection
  { key: "custom", namespace: "leastFavouriteColour", value: "#E6B400" } // Cusomter Selection 
];

// Create Request Parameters
const requestOptions = {
  method: "POST",
  headers: myHeaders,
  body: JSON.stringify({
    customerAccessToken: customerAccessToken.accessToken,
    metafields: inputData,
  }),
};

// Send Request with parameters
const req = await fetch(webhookUrl, requestOptions);

// Wait for request response
await req.json();