DOCS

Appearance settings

/

Manage appearance settings

Customize shopper-facing experiences with GraphQL.

GraphQL

The AppearanceSettings GraphQL object allows you to customize the look and feel of Zonos Checkout and Zonos Hello to match your brand. Read our appearance customization guide for more information.

Retrieve AppearanceSettings

COMING SOON

To retrieve saved appearance settings, you can use the appearanceSettings query. This will return the AppearanceSettings object associated with the Organization your API key is associated with.

Query

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
query {
  appearanceSettings {
    accentColor
    fontFamily
    logoUrl
    style
    theme
    createdAt
    createdBy
    id
    mode
    organization
    updatedAt
    updatedBy
  }
}

Response

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "data": {
    "appearanceSettings": {
      "accentColor": "#4285F4",
      "fontFamily": "Arial",
      "logoUrl": "https://example.com/logo.png",
      "style": "SHARP",
      "theme": "DARK",
      "createdAt": "2023-07-10T14:45:22Z",
      "createdBy": "user1234",
      "id": "67890",
      "mode": "LIVE",
      "organization": "org123",
      "updatedAt": "2023-07-12T14:45:22Z",
      "updatedBy": "user5678"
    }
  }
}

Update AppearanceSettings

COMING SOON

You can update AppearanceSettings with the appearanceSettingsUpdate mutation. You only need to include the fields you want to update.

Mutation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mutation {
  appearanceSettingsUpdate(
    input: {
      id: "12345"
      accentColor: "#4285F4"
      fontFamily: "Roboto"
      logoUrl: "https://example.com/logo.png"
      style: ROUNDED
      theme: LIGHT
    }
  ) {
    accentColor
    fontFamily
    id
    logoUrl
    style
    theme
    updatedAt
    updatedBy
  }
}

Response

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "data": {
    "appearanceSettingsUpdate": {
      "accentColor": "#4285F4",
      "fontFamily": "Roboto",
      "id": "12345",
      "logoUrl": "https://example.com/logo.png",
      "style": "ROUNDED",
      "theme": "LIGHT",
      "updatedAt": "2023-07-12T14:45:22Z",
      "updatedBy": "user5678"
    }
  }
}

Was this page helpful?