A graphsql query and Checkout extension that brands the checkout header as described in Episode 20 of the Liquid Weekly Podcast

Checkout.jsx

import {reactExtension, Image, InlineStack, InlineLayout, BlockStack, Button, View, Link} from '@shopify/ui-extensions-react/checkout';


export default reactExtension('purchase.checkout.header.render-after', () => (
   return (
    <InlineLayout columns={['fill','30%']} spacing="base">
      <Image source="https://cdn.shopify.com/s/files/xxxxxxxx" />
      <InlineLayout inlineAlignment="end" columns={["60%","fill"]} spacing="tight">
        <Image source="https://cdn.shopify.com/s/files/xxxxxxx" />
        <BlockStack inlineAlignment="start" spacing="extraTight">
          <Link to="tel:xxx-xxx-xxxx">
              <Image source="https://cdn.shopify.com/s/files/xxxxxxx" />
          </Link>
          <Link to="https://xxxxxxxx/pages/email-us">
              <Image source="https://cdn.shopify.com/s/files/xxxxxxxxxx" />
          </Link>
        </BlockStack>
      </InlineLayout>
    </InlineLayout>
  );
));

graphql.json

// Set colorScheme3 background color to a dark green
// Set the checkout header color scheme to scheme3 so we can make modifications without 
// impacting other parts of the checkout (which use scheme1 and scheme2 by default)
// also set the logo image to null since we will be bringing in an image in the extension
// and set logo visibility to HIDDEN to hide any logo text from displaying

mutation updateCheckoutBranding($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId:ID!) {
  checkoutBrandingUpsert(checkoutBrandingInput:$checkoutBrandingInput, checkoutProfileId:$checkoutProfileId) {
    checkoutBranding {
      designSystem {
        colors {
          schemes {
            scheme3 {
              base {
                background                
              }
            }
          }
        }
      },
      customizations {
        header {
          colorScheme,
          position,
          padding,
          alignment,
          logo {
            image {
              url
            },
            visibility
          }
        }
      }
    }
  }
}

// Variables

{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/XXXXXXX",
  "checkoutBrandingInput": {
    "designSystem": {
      "colors": {
        "schemes": {
          "scheme3": {
            "base": {
              "background": "#2C6118"
            }
          }
        }
      }
    },
    "customizations": {
  		"header": {
        "colorScheme": "COLOR_SCHEME3",
        "position":"START",
        "padding": "LARGE_500",
        "alignment": "START",
        "logo": {
        	"image":{
            "mediaImageId": null
          },
          "visibility": "HIDDEN"
        }
      }
        
      }    
    }
  }