Last Authored: 3/7/2024

Setup and Instructions for Clouver's Customer Metafield Update application

End Result

In your theme (Customizable via CSS)
Customer Colors Preview
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 if you have any questions regarding this tutorial.


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)
  1. To generate credentials, log into AWS and search for IAM
    Search IAM

  2. Click Users in the left menu and click Create User button in the top right corner

  3. Give user a name preferably clouver-sync and click Next

  4. Click Attach Policies Directly option and check off AdministratorAccess

  5. Click Next and finally Create User

  6. From the dashboard click on the created user and Navigate to the Security credentials tab

  7. Scroll down to the Access Keys section and click Create Access Key

  8. Check the Application running outside AWS option and click Next

  9. Lastly click Create access key button

  10. Copy the credentials and keep them somewhere safe. We are going to need them in Shopify Clouver admin app.

  11. Once saved click Done and now you have your AWS Credentials

Deployment Steps

  1. Start by adding AWS Credentials inside the Admin User Interface
    Add AWS Credentials

    AWS Credentials entered

  2. 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.
    Deploy enabled button
    Deploy Application

  3. 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.
    Clouver metafield app settings


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

  1. 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.

  2. If your Shopify storefront is built using the Headless approach or you just want more customization, we recommend using the Code Approach.

Theme Approach

  1. 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.
    Enable App button
    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.

    View form id of login form

  2. 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.

  3. 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.

  4. Similarly for Step 4, click Add "Save" Button, which should add the save button to the selected theme.
    Succesfull installation of Clouver

  5. 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.

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 // Replace with your shop url ending with const shopUrl = ""; // 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(, ), ); } else { console.log(`error setCustomerAccessToken() - ${}`); } } 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:

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 // Replace the following with Webhook value found in Admin Apps > Clouver (Available when status indicator is ready) const webhookUrl = ""; // 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();