Customize the favicon
You can use the GraphQL Admin API to customize the favicon that displays at checkout, for a visual representation of your brand.
What you'll learnAnchor 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
RequirementsAnchor 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 Extensibility preview enabled.
- You've completed the GraphQL and REST Admin API getting started guide.
- You've either installed the GraphiQL app on your store or created an app, with the
- You're using API version
- You're familiar with the GraphQL Admin API's branding types.
Step 1: Upload the iconAnchor 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 assetAnchor link to section titled "Step 2: Create the file asset"
Step 3: Retrieve the store's checkout profile IDsAnchor link to section titled "Step 3: Retrieve the store's checkout profile IDs"
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.
checkoutProfilesto retrieve a list of checkout profile IDs.
is_publishedparameter indicates which checkout profile is currently applied to your store's live checkout.
Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.
Step 4: Set the favicon imageAnchor link to section titled "Step 4: Set the favicon image"
Step 5: View the favicon in checkoutAnchor 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.
In the Shopify admin, click Settings.
In the Checkout page, click ....
Select one of the following:
- If your checkout profile is live, select View.
- If your checkout profile is in draft, select Preview.
- Explore the GraphQL Admin API to learn more about customizing checkout's favicon.