How can I manipulate the DOM with checkout extensibility?

emarzo
Shopify Partner
1 0 6

I am currently migrating from Liquid checkout to checkout extensibility and haven't found a way to manipulate the DOM with the new checkout extensibility. With checkout liquid, for instance, we could easily hide the cart nav item in the menu, as our store doesn't use a conventional cart and doesn't have a /cart page.

 

So, we were able to hide the breadcrumb cart and the cart return button, but I couldn't find a way to do it with the new extensibility approach. For example, I tried creating an app to reach the DOM, but it didn't work. Does anyone know how to achieve this with the new checkout extensibility?

Replies 5 (5)

Mudasir7
Shopify Partner
1 0 1

I also want to do same please replay @Shopify i want to modify the gift code field is possible

adamcharvat
Shopify Partner
9 1 5

It is impossible, seems like Shopify will no longer support DOM manipulation

JeremyDefyned
Shopify Partner
4 0 2

Came looking to see if there any options, and it seems like they've completely locked down your ability to customize your checkout. Very annoying 😞

MariasQuestions
Tourist
6 2 0

I have the same question. Even the cart icon in my case is not the same as I have in a snippet section, but some default svg...
I see that your post from June 2023. Did you found any solution?

JeremyDefyned
Shopify Partner
4 0 2

So some good news for those of you looking for a solution to this issue, it looks like they're adding the option to hide the cart icon to the unstable release. I tried hiding it via the GraphiQL app and it worked: https://shopify.dev/docs/api/admin-graphql/unstable/objects/CheckoutBrandingCartLink

And for those of you who want to change your cart icon, take a look at this (I haven't tried it though): https://shopify.dev/docs/api/admin-graphql/2024-04/objects/CheckoutBrandingHeaderCartLink

 

Now I'm just waiting on a way to edit the checkout login/logout url so that I can finally upgrade!