Solved

Using Script Tags with Checkout UI Extensions

IQAir_Developer
Shopify Partner
8 0 0

I wanted to implement a third-party product to handle user consent with my website that uses Shopify.  This requires that I add a script tag to my website and Shopify store that loads the software to handle the user consent.  It's easy enough to get it working on my website and Shopify theme, but the checkout is a different story.

Old stores that use checkout.liquid are very easy to get it working, we simply can add the script tag to our checkout.liquid.  However, newer stores do not use checkout.liquid and I am having hard time finding resources online that describe how to inject a script into our checkout using Checkout UI Extensions/Checkout Extensibility.  

Does anyone have any guidance on how this would be done?  Or is it not currently possible?  Thanks

Accepted Solution (1)

SBD_
Shopify Staff
1829 270 412

This is an accepted solution.

Hey @IQAir_Developer 

 

This isn't supported with Checkout UI extensions - here are the available extension points

 

The workshop is a good place to start to see what's possible.

Scott | Developer Advocate @ Shopify 

View solution in original post

Replies 9 (9)

SBD_
Shopify Staff
1829 270 412

This is an accepted solution.

Hey @IQAir_Developer 

 

This isn't supported with Checkout UI extensions - here are the available extension points

 

The workshop is a good place to start to see what's possible.

Scott | Developer Advocate @ Shopify 

IQAir_Developer
Shopify Partner
8 0 0

@SBD_ Thanks for that input, would a Shopify App or something else be capable of adding behaviors of a third-party script tag to the checkout?  Im just trying to see if this is even possible on the new style stores regardless of the method.

SBD_
Shopify Staff
1829 270 412

Hey @IQAir_Developer 

 

Unfortunately not. Apps only have access to the same methods.

Scott | Developer Advocate @ Shopify 

IQAir_Developer
Shopify Partner
8 0 0

@SBD_ I see, no chance that using a Custom Pixel could accomplish something like this?  Couldn't I use a custom pixel to load the javascript I want onto the page?  Alternatively, couldn't someone load GTM onto the page with a custom pixel (Create a Google Tag Manager custom pixel · Shopify Help Center) and then GTM would load the script I want onto the page?  Again thanks for the help.

IQAir_Developer
Shopify Partner
8 0 0

If anyone was curious, due to the limitations of the sandbox environment of custom pixels, the custom pixel would not be suitable for my use case because I need user interface elements to be rendered.  However, this should work well for any 3rd party scripts that fit the intended use of the custom pixel, to hook into the analytics events provided by Shopify and report on those.
Pixels overview · Sandbox Limitations

BSC921
Visitor
2 0 0

hi @IQAir_Developer Did you find a way to implement this? I am also trying to figure out how to add a live chat snippet into the checkout extensibility. I don't find any instructions regarding how to add those...

sovendus_max
Shopify Partner
2 0 0

Just wanted to say that I would also need this, unfortunately custom pixel doesnt work for me either as I need access to the DOM

hasnainmalik
Shopify Partner
10 0 5

I have created shopify checkout extension and calculating recurring total, However there is question when I installing app on live store shopify automatically adding recurring subtotal which is I don't want to add it.

hasnainmalik_0-1701074367743.png

 

 

 

Anil_learner
Shopify Partner
6 0 0

Hello have you found any solution? I also want this to implement facebook meta pixel in my public app.