• What you'll learn
  • Requirements
  • Step 1: Upload the icon
  • Step 2: Create the file asset
  • Step 3: Retrieve the store's published checkout profile ID
  • Step 4: Set the favicon image
  • Step 5: View the favicon in checkout
  • Next steps

Add the favicon

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

What you'll learn

Anchor link to section titled "What 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

Requirements

Anchor link to section titled "Requirements"
  • The store that you're modifying must be on a Shopify Plus plan.
  • You've created a new development store with the Checkout and Customer Accounts Extensibility developer preview enabled.
  • You can make authenticated requests to the GraphQL Admin API.
  • You've either installed the GraphiQL app on your store or created an app, with the read_checkout_branding_settings and write_checkout_branding_settings access scopes.
  • You're using API version 2023-10 or higher.
  • You're familiar with the GraphQL Admin API's branding types.

Step 1: Upload the icon

Anchor link to section titled "Step 1: Upload the icon"

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

Step 2: Create the file asset

Anchor link to section titled "Step 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.

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

Anchor link to section titled "Step 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.

  2. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.

Step 4: Set the favicon image

Anchor link to section titled "Step 4: Set the favicon image"

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

Step 5: View the favicon in checkout

Anchor link to section titled "Step 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.

Next steps

Anchor link to section titled "Next steps"
  • Explore the GraphQL Admin API to learn more about customizing checkout's favicon.

On this page

  • What you'll learn
  • Requirements
  • Step 1: Upload the icon
  • Step 2: Create the file asset
  • Step 3: Retrieve the store's published checkout profile ID
  • Step 4: Set the favicon image
  • Step 5: View the favicon in checkout
  • Next steps