Checkout Design System

Apply Gotham Fonts to Checkout

GraphQL Post

mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
  checkoutBrandingUpsert(
    checkoutBrandingInput: $checkoutBrandingInput
    checkoutProfileId: $checkoutProfileId
  ) {
    checkoutBranding {
      designSystem {
        typography {
          primary {
            base {
              sources
            }
            bold {
              sources
            }
            name
          }
          secondary {
            base {
              sources
            }
            bold {
              sources
            }
            name
          }
        }
      }
      customizations {
        control {
          border
        }
        headingLevel1 {
          typography {
            size
            letterCase
            weight
          }
        }
        headingLevel2 {
          typography {
            size
            letterCase
            weight
          }
        }
        headingLevel3 {
          typography {
            size
            letterCase
            weight
          }
        }
      }
    }
    userErrors {
      code
      field
      message
    }
  }
}

Variables

{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/11698258",
  "checkoutBrandingInput": {
    "customizations":{
      "control": {
        "border": "FULL"
      },
      	"headingLevel1": {
          "typography": {
            "size": "MEDIUM",
            "letterCase": "UPPER",
            "weight": "BOLD"
          }
        },
      "headingLevel2": {
          "typography": {
            "size": "MEDIUM",
            "letterCase": "UPPER",
            "weight": "BOLD"
          }
      },
      "headingLevel3": {
          "typography": {
            "size": "BASE",
            "letterCase": "UPPER",
            "weight": "BOLD"
          }
        }
    },
    "designSystem": {
      "typography": {
         "primary": {
          "customFontGroup": {
            "base": {
              "genericFileId": "gid://shopify/GenericFile/23314434752594",
              "weight" :300
            },
            "bold": {
              "genericFileId": "gid://shopify/GenericFile/23314432491602",
              "weight" : 400
            }
          }
        },
        "secondary": {
          "customFontGroup": {
            "base": {
              "genericFileId": "gid://shopify/GenericFile/23314434752594",
              "weight" :300
            },
            "bold": {
              "genericFileId": "gid://shopify/GenericFile/23314432491602",
              "weight" : 400
            }
          }
        }
      }
    }
  }
}