How to add favicon at shopify plus checkout pages

Step 1: Upload the Favicon Image

First, upload your favicon image to Shopify and get the image ID.

curl -X POST \
  "https://your-shop-name.myshopify.com/admin/api/2021-01/graphql.json" \
  -H "X-Shopify-Access-Token: your-access-token" \
  -H "Content-Type: application/json" \
  -d '{
    "query": "mutation {
      stagedUploadsCreate(input: { resource: BULK_MUTATION, filename: \"favicon.png\", mimeType: \"image/png\" }) {
        stagedTargets {
          url
          resourceUrl
        }
      }
    }"
  }'

Replace "your-access-token" and "your-shop-name" with your actual Shopify store details.

Step 2: Set Up the Project

Create a new Node.js project and install the necessary packages.

mkdir shopify-checkout-favicon
cd shopify-checkout-favicon
npm init -y
npm install node-fetch dotenv

Step 3: Create the Script

Create a file named updateFavicon.js and add the following code:

const fetch = require('node-fetch');
require('dotenv').config();

const SHOPIFY_API_URL = `https://${process.env.SHOPIFY_SHOP_NAME}.myshopify.com/admin/api/2021-01/graphql.json`;
const ACCESS_TOKEN = process.env.SHOPIFY_API_KEY;

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

const faviconImageId = "gid://shopify/MediaImage/1234567890"; // Replace with your actual favicon image ID

const variables = {
  checkoutBrandingInput: {
    customizations: {
      favicon: {
        image: faviconImageId,
      },
    },
  },
  checkoutProfileId: "gid://shopify/CheckoutProfile/1", // Replace with your actual checkout profile ID
};

async function updateFavicon() {
  const response = await fetch(SHOPIFY_API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Access-Token': ACCESS_TOKEN,
    },
    body: JSON.stringify({
      query: updateFaviconMutation,
      variables,
    }),
  });

  const data = await response.json();
  if (data.errors) {
    console.error('Error updating favicon:', data.errors);
  } else {
    console.log('Favicon updated successfully:', data.data);
  }
}

updateFavicon();

Step 4: Set Up Environment Variables

Create a .env file in the root of your project and add your Shopify credentials:

SHOPIFY_SHOP_NAME=your-shop-name
SHOPIFY_API_KEY=your-access-token

Step 5: Run the Script

Run the Node.js script to update the favicon:

node updateFavicon.js

Summary

By following these steps, you can add a favicon to your Shopify Plus checkout pages using the Shopify Admin API and GraphQL. Ensure you have the correct image ID and checkout profile ID, and securely manage your Shopify API credentials. This process allows you to customize your checkout experience with branded elements such as a favicon.