For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
I have a checkout extension that targets pickup. I need to hide the pickup location (circled in green) if someone checks the box in the image (orange text).
I don't know the best way to achieve this. I am thinking if there was a prop I could pass to my extension for this then I could do this but this is just a stab since I don't know if one exists.
Guidance appreciated!
Hi - there's no ability to access the window object or other methods of DOM manipulation with checkout extensions, so hiding this field may not be possible. The new extensibility model is designed to be more secure and reliable, and as such, it restricts certain types of customizations that were possible with checkout.liquid and script tags. Have you looked into Shopify Functions to see if your use case would be supported by them?
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
I didn't see a way to use shopify functions to hide the pick up location but I have not created a function yet.
Do you know of a way to hide or not show the location pickup banner that I have circled in my screenshot when someone selects pickup?
I don't think this would be possible with a checkout extension as you're trying to hide/ interact with a default checkout element, which is out of scope for checkout extensions (as you can't select elements and interfere with the DOM). The best bet would be to explore if it's possible with functions.
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog