Is there such a thing as Shopify App Development assistance? I am building my first app to sell on Shopify for merchants to use. I am currently familiarizing myself with the API and multiple endpoints. It makes sense so far.
But here are my questions:
When my app is downloaded by a merchant, how do I configure their specific environment variables so my app links to their specific merchant instance / shopify store? I am still confused on this part.
How do I handle styles (CSS) and to what extent can I style my app? If a merchant downloads my app from the Shopify store, what does that actually look like.
When the app launches how does the merchant access it, is it iFramed within their Shopify instance? Is it another browser window that opens?
I am new to this process and wondering if there is assistance I could pay for within Shopify for some type of solutioning / architecting call where I can get some advice on best practices. Please advise, thanks!
Great to hear you’re getting started with Shopify app development - I’ll answer your questions below:
When a merchant installs your app, they are typically directed to an OAuth authentication flow. This is the standard process for authorizing your app to access a specific Shopify store. During this flow, your app will receive temporary access tokens from Shopify. These tokens are unique to each merchant’s store and are used to authenticate API requests. Once you receive the access token, you should store it securely in your application’s backend, often in a database. In your app, environment variables are typically used to store global settings, such as your app’s API keys or other non-merchant-specific configurations. For merchant-specific data like access tokens, it’s more appropriate to use a database. Environment variables aren’t suitable for this because they are not dynamic – they’re set when your application starts and are the same for every instance of your app. When your app makes an API call to Shopify, it should dynamically retrieve the correct access token for the merchant’s store from your database.
Handling styling depends on whether your app is embedded or non-embedded (lives externally to the Shopify Admin). If your app is embedded with the admin you can use Shopify’s Polaris design framework for consistent styling with the Shopify UI. Polaris provides a set of React components and styles that ensure your app has a look and feel consistent with Shopify’s admin. You can customize these components to some extent, but you should adhere to the app design guidelines to maintain consistency within the Shopify admin.
If your app is non-embedded you have complete freedom to use any CSS framework or custom styles.
Embedded apps are iframes within the Shopify admin and for non-embedded apps, when a merchant accesses a non-embedded app, it typically opens in a new browser tab or window.