Custom Line Item attribute display in checkout

Shopify Plus
1

I have a client that builds custom products. This has caused us issues in the past since the product thumbnail that is displayed in cart/checkout is not accurate to what the user had customized. I have gotten around this in the past by adding a custom thumbnail URL as a line item attribute that I then used instead of the product image. I can do this in the cart super easy however the checkout is a bit trickier.

Since this store is Shopify Plus, I have able to create a custom checkout.liquid file. In this file, I created a cart items list using some custom liquid code which works great and then I just hid the default item list that is already in the checkout with CSS. That’s been working.

Since Shopify is sunsetting the checkout.liquid, I’ve been looking into creating a checkout extension. I was able to create one using the Banner example on Shopify’s site but I’m very new to React and not sure how to use this the way I want. If it helps, below is my initial react code

import React from "react";
import "//cdn.shopify.com/s/files/1/2551/4172/t/78/assets/theme.min.css";
import {
  render,
  Banner,
  useSettings,
} from "@shopify/checkout-ui-extensions-react";
// Set the entry points for the extension
render("Checkout::Dynamic::Render", () => <App />);
render("Checkout::DeliveryAddress::RenderBefore", () => <App />);
function App() {
  const {title, description, collapsible, status: merchantStatus} = useSettings();
  const status = merchantStatus ?? 'info';
  return (
    <Banner title={title} status={status} collapsible={collapsible} className="main">
      {description}
      Just testing to see if this works
    </Banner>
  );
}

I see being able to get what I want in one of two ways:

  1. I use this extension to list the items in the cart the way I want and then hide the existing item list with CSS (like I did before). I can’t seem to include styling using the extension so not sure if this is an option.
  2. Find away to set a custom thumbnail image on the line items so Shopify displays this image as the product image in checkout.

I haven’t been able to figure out how to do either and would welcome any input from the community