What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Shopify App Ui Extension not showing in Mobile Devices

Solved

Shopify App Ui Extension not showing in Mobile Devices

tyuzu
Shopify Partner
26 0 0

Hello, I'm developing a custom Shopify app with a UI extension. I'm currently attempting to implement a simple UI extension following this documentation: https://shopify.dev/docs/apps/checkout/custom/banners/add?extension=react.

 

It was displaying correctly on desktop devices (desktop view and responsive view). However, it's not showing on mobile devices which I tried on iPhone and Android device.

tyuzu_0-1715245023295.png

tyuzu_1-1715245037626.png

Target: purchase.checkout.block.render

Theme: Dawn (also tried on theme Test data)

 

Has anyone encountered this issue and found a fix? I've been troubleshooting this for the entire day but haven't been able to identify the cause.

 

Additionally, I'm currently using NGROK. I'm unsure if this might be affecting the mobile view."

Accepted Solution (1)
Huptech-Web
Shopify Partner
1010 204 217

This is an accepted solution.

Hello @tyuzu  Could you please confirm whether your store is a development store and that you have enabled Checkout Extensibility?

Screenshot_8.png

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 4 (4)

Huptech-Web
Shopify Partner
1010 204 217

Hello @tyuzu  Please ensure that your extension has been deployed. If you have not yet deployed your extension, please run the following command:

 

npm run deploy

 

Please note that this command is applicable for Shopify Node or a Remix template.

After deploying the extension, follow these steps:
1. Navigate to the Shopify checkout settings at

Screenshot_3.png
2. Add the app block as shown in

Screenshot_4.png
3. Select your extension and save the changes.

 Note - This solution is specifically for Shopify Node and Remix templates. Let me know if you're using a different template so I can assist you accordingly.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
tyuzu
Shopify Partner
26 0 0

Hello @Huptech-Web  , Thank you for the reply.


Yes, I'm currently using Remix template. I also deployed my app.

But as for your fix it is not possible for me to add app block.

tyuzu_3-1715311339620.png

 

Currently, I'm testing my UI Extension via Preview URL console.

tyuzu_1-1715311276248.png


I don't have issue testing it in desktop, my only problem is in mobile devices which the UI Extension is not showing. Please see screenshot below showing my UI Extension in desktop devices.

tyuzu_2-1715311316719.png

 

Huptech-Web
Shopify Partner
1010 204 217

This is an accepted solution.

Hello @tyuzu  Could you please confirm whether your store is a development store and that you have enabled Checkout Extensibility?

Screenshot_8.png

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
tyuzu
Shopify Partner
26 0 0

Worked! Thank you so much @Huptech-Web