Posts by Mangit

Update: To make this process even easier, I’ve created a simple app that lets you upload a custom favicon to your Shopify checkout without any coding. This tool is perfect for store owners who want a quick solution. Check it out here (replace with your app link).

🛒 How to Add a Custom Favicon to Shopify Checkout (Shopify Plus Guide)

A favicon is a small but powerful branding element that appears in the browser tab, reinforcing your store’s identity during the checkout process. For Shopify Plus merchants, customizing the checkout favicon can enhance brand consistency and customer trust. This guide walks you through the process of adding a custom favicon to your Shopify checkout using the GraphQL Admin API.(Shopify, Shopify)

✅ Prerequisites

Before you begin, ensure the following:

• Your store is on the Shopify Plus plan.
• You have access to the GraphQL Admin API with the necessary permissions.
• You’re using API version 2023-10 or higher.
• You have the read_checkout_branding_settings and write_checkout_branding_settings access scopes.
• You have the GraphiQL app installed or have created a custom app to interact with the API.(Shopify)

🖼️ Step 1: Upload Your Favicon Image

First, upload your favicon image to Shopify or an external hosting service. If uploading to Shopify, use the stagedUploadsCreate mutation to upload the image and obtain a URL.

📁 Step 2: Create a File Asset in Shopify

Use the fileCreate mutation to create a file asset in Shopify. Provide the URL of your uploaded image as the originalSource. This mutation will return a mediaImageId, which you’ll use in the next step.(Shopify)

mutation fileCreate($files: [FileCreateInput!]!) {
  fileCreate(files: $files) {
    files {
      id
    }
    userErrors {
      field
      message
    }
  }
}

Variables:

{
  "files": [
    {
      "originalSource": "https://your-hosted-image-url.com/favicon.png",
      "contentType": "IMAGE",
      "alt": "Checkout Favicon"
    }
  ]
}

🆔 Step 3: Retrieve Your Checkout Profile ID

Checkout customizations are applied to specific checkout profiles. Retrieve your store’s checkout profile ID using the checkoutProfiles query.(Shopify)

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

Note the id of the published checkout profile for use in the next step.

🖌️ Step 4: Apply the Favicon to Checkout

Use the checkoutBrandingUpsert mutation to set the favicon for your checkout. Provide the mediaImageId from Step 2 and the checkoutProfileId from Step 3.(Shopify)

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

Variables:

{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/your_profile_id",
  "checkoutBrandingInput": {
    "customizations": {
      "favicon": {
        "mediaImageId": "gid://shopify/MediaImage/your_media_image_id"
      }
    }
  }
}

👀 Step 5: Preview the Favicon in Checkout

To view your new favicon:

1. In your Shopify admin, go to Settings > Checkout.
2. Click on the … button next to your checkout profile.
3. Select View if your profile is live or Preview if it’s in draft.
4. Refresh the page to see the updated favicon.(Shopify)

🔄 Resetting to Default

If you need to revert to the default favicon, you can reset the customization by setting the favicon field to null using the checkoutBrandingUpsert mutation.(Shopify)

📚 Additional Resources

• Shopify Checkout Styling Documentation
• GraphQL Admin API Reference

By following these steps, you can effectively add a custom favicon to your Shopify checkout, enhancing your store’s branding and providing a consistent experience for your customers.

Shopify just made storefront customization easier! With the new copy-and-paste feature in the Theme Customizer, you can quickly duplicate sections across pages—saving time and effort while keeping your design consistent.