Skip to main content

Add the favicon

Plus

Checkout styling customizations are available only to Shopify Plus merchants.

You can use the GraphQL Admin API to add the favicon that displays at checkout, for a visual representation of your brand.

The checkout page favicon displaying a stylized Monstera Deliciosa plant leaf
Tip

You can reset styles to their defaults by writing parent fields to null with the GraphQL Admin API. Refer to examples of resetting some and all values to the defaults.

Anchor to What you'll learnWhat you'll learn

In this tutorial, you'll learn how to do the following tasks:

  • Upload an image for the favicon that displays at checkout.
  • Retrieve a list of your store's checkout profile IDs.
  • Apply the favicon and view it in checkout.

Anchor to RequirementsRequirements

Anchor to Step 1: Upload the iconStep 1: Upload the icon

Customizing the checkout favicon requires you to first upload the icon to Shopify as a staged upload or your own hosting.

Anchor to Step 2: Create the file assetStep 2: Create the file asset

Make a request to the GraphQL Admin API's fileCreate mutation, passing an external URL or a staged upload URL as the originalSource. You'll use the id value when you add the image as the favicon.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL mutation

mutation fileCreate($files: [FileCreateInput!]!) {
fileCreate(files: $files) {
files {
id
alt
createdAt
}
}
}

Query variables

{
"files": [
{
"alt": "Our logo, a leaf from the Monstera Deliciosa plant",
"filename": "favicon-image",
"originalSource": "https://{example}.com/custom-favicon-for-checkout"
}
]
}

JSON response

{
"data": {
"fileCreate": {
"files": [
{
"id": "gid://shopify/MediaImage/34829967327254",
"alt": "Our logo, a leaf from the Monstera Deliciosa plant",
"filename": "favicon-image",
"createdAt": "2023-11-107T02:44:06Z"
}
]
}
},
}

Anchor to Step 3: Retrieve the store's published checkout profile IDStep 3: Retrieve the store's published checkout profile ID

Checkout styling properties apply to a checkout profile ID. In this step, you'll retrieve the checkout profile to which you'll apply favicon changes.

  1. Query checkoutProfiles to retrieve a list of checkout profile IDs.

    The is_published parameter indicates which checkout profile is currently applied to your store's live checkout.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL query

query checkoutProfiles {
checkoutProfiles(first: 1, query: "is_published:true") {
edges {
node {
id
name
}
}
}
}

JSON response

{
"data": {
"checkoutProfiles": {
"edges": [
{
"node": {
"id": "gid://shopify/CheckoutProfile/1",
"name": "Default checkout profile"
}
}
]
}
}
}
  1. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.

Anchor to Step 4: Set the favicon imageStep 4: Set the favicon image

Call the checkoutBrandingUpsert mutation, passing the mediaImageId. This is the id value that the fileCreate mutation returned.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL mutation

mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
checkoutBrandingUpsert(
checkoutBrandingInput: $checkoutBrandingInput
checkoutProfileId: $checkoutProfileId
) {
checkoutBranding {
customizations {
favicon {
image {
id
}
}
}
}
userErrors {
field
message
}
}
}

Query variables

{
"checkoutProfileId": "gid://shopify/CheckoutProfile/{profile_ID}",
"checkoutBrandingInput": {
"customizations": {
"favicon": {
"mediaImageId": "gid://shopify/MediaImage/34829967327254"
}
}
}
}

JSON response

{
"data": {
"checkoutBrandingUpsert": {
"checkoutBranding": {
"customizations": {
"favicon": {
"image": {
"id": "gid://shopify/ImageSource/34839857299478"
}
}
}
},
"userErrors": []
}
},
}

Anchor to Step 5: View the favicon in checkoutStep 5: View the favicon in checkout

You can view the favicon in its draft and published state. You might need to refresh the page to see changes.

  1. In the Shopify admin, click Settings.

  2. Click Checkout.

  3. In the Checkout page, click ....

  4. Select one of the following:

  • If your checkout profile is live, select View.
  • If your checkout profile is in draft, select Preview.

Anchor to Next stepsNext steps

Was this page helpful?