Publich app with a widget for order thank you page

[virtualit]

 I need to develop a Shopify public app with a simple widget that would display a message by calling an API on the order status thank you page.

Can someone point me to a GitHub example repo that shows how to create a Shopify widget as part of a public app that could be installed from the Shopify app store? OR some step-by-step instructions for doing so.

[Moeed]

Hey @virtualit 

Certainly! Developing a Shopify public app with a widget involves a few steps. Here's a general overview, along with resources to help you get started:

1. Set up your development environment: Install a code editor and set up a local development environment for building Shopify apps. You'll need a working knowledge of web development technologies such as HTML, CSS, JavaScript, and a server-side language like Node.js or Ruby.

2. Create a new Shopify app: Start by creating a new app in your Shopify Partner account. This will generate API credentials (API key and secret) that you'll use to authenticate your app with Shopify. You can follow Shopify's documentation on creating a new app for detailed instructions.

3. Build the widget: Create the widget component that will display the message on the order status thank you page. You can use HTML, CSS, and JavaScript to create the desired UI and functionality. Ensure your widget adheres to Shopify's design guidelines for a consistent user experience.

4. Handle API calls: Set up a server-side endpoint that your widget can call to retrieve the necessary data. This endpoint should be able to receive requests and respond with the appropriate message based on the order status. You can use a web framework like Express (for Node.js) or Ruby on Rails (for Ruby) to handle the API calls.

5. Authenticate with Shopify: Implement the OAuth flow to allow merchants to install your app and authorize access to their store. Shopify provides libraries and SDKs for various programming languages that simplify the OAuth process. You can find sample code and libraries in Shopify's GitHub repositories.

6. Test and debug: Test your app locally and ensure that the widget is functioning as expected. Use the Shopify development environment (e.g., Shopify Partner Dashboard or Shopify development stores) to simulate the app installation and order status flow.

7. Deploy and submit to Shopify App Store: Once your app is fully tested and functional, deploy it to a hosting platform or service. Shopify recommends deploying your app to a secure and reliable hosting provider. Review Shopify's App Store submission guidelines and submit your app for review. If approved, it can be listed in the Shopify App Store.

Regarding a specific GitHub example repository, Shopify has a collection of sample apps and code examples on their GitHub organization page: https://github.com/Shopify

You can explore the available repositories to find examples that match your requirements. Look for projects related to Shopify app development, widgets, or order-related functionalities.

For more detailed step-by-step instructions and in-depth guidance, I recommend referring to Shopify's extensive developer documentation. Their guides cover various aspects of app development and provide code examples and best practices: https://shopify.dev/docs

Good luck with your Shopify app development!
Best Regards,
Moeed