Sharing assets between Hydrogen and checkout.liquid

[ramiroazar]

The project we're currently working on is under a Shopify Plus subscription.

It requires some checkout customisations, so we're working with a checkout.liquid file.

A lot of the visual customisations are inherited from the rest of the site, which in this case is a Hydrogen frontend.

It seems like a no brainer to generate the stylesheet required for the checkout within Hydrogen, where all of our style utilities and build processes already are.

Vite hashes everything by default, which is desired behaviour, but makes it impossible to reliably reference a file.

This seems like it can be disabled using rollupOptions, but for all files instead of just specific ones?

https://vitejs.dev/guide/build.html#customizing-the-build

Does anyone have any suggestions on how to use Hydrogen assets within the checkout?

[davidhousedev]

We also use checkout.liquid customizations, but haven't tried bridging the gap between Hydrogen and checkout. Seems like what you suggest could work though it would require a lot of very precise CSS overrides (so much BEM!).

Is your merchant open to migrating to Checkout Extensibility (i.e. Checkout UI Extensions, Web Pixels, and the Checkout Branding API)? I can't speak for Shopify here, but given what I'm seeing I'd be very surprised if any new development occurs in Hydrogen that's backwards compatible with checkout.liquid when Checkout Extensibility is so far along.

[ramiroazar]

Haha, lots of overrides for sure. It seems like they might as well get done alongside the rest of the styles. I think it could work as well, but still not sure how to make it happen.

We're definitely open to using the Checkout UI Extensions and the Checkout Branding API, they both fit our use case nicely and I think you're right about them being the more futureproof solution.

We reached out to Shopify about that approach, but they said it's difficult for them to provide certainty that they will be out of developer preview in time.

I'm actually finding the Checkout Branding API documentation a bit lacking so far, the concept and visual examples are promising, but not really seeing how to achieve a similar result with what's there currently. It might not end up offering the level of control typically needed, in which case custom CSS in checkout.liquid could still be required and finding a way to bridge the gap with the frontend like you said would be ideal.

[davidhousedev]

I'm actually finding the Checkout Branding API documentation a bit lacking so far, the concept and visual examples are promising, but not really seeing how to achieve a similar result with what's there currently.

Yeah, this was exactly our experience as well. The API docs are current with what is available in the developer preview, but I get the impression that there will be a lot of iterative work on this API moving forward. Perhaps some cause for hope: pretty much everything in the new Checkout is backed by CSS custom properties so while we might not be able to make the customizations we need now I'm optimistic that we will be able to soon :)

Something to flag though: if your clients are using analytics tracking in checkout that relies on mouse events (e.g. we use Heap), they'll receive a lot less data in Checkout Extendibility than they will in checkout.liquid. To learn more, check out the Web Pixel docs.