Using the Shopify component, you can link your Shopify store with your Beezer app and display/sell your products using your app.
To connect your Shopify website with your Beezer app, please follow the steps given below:
Step 1: Login to your Shopify store's admin dashboard and click on Apps. Once inside the Apps section, click on "Develop apps for your store" button.
Step 2: You will be redirected to a new page, where you can create a new private app for your business. Click on 'Create an app' to create a new storefront for your Shopify store.
Step 3: Give a name to this app and click on Create app button.
Step 4: Under Overview tab, click on the Configure Storefront API scopes button.
Step 5: Check mark all options to allow access to your store and click on Save button.
Step 6: Now click on API credentials tab and then click on Install app button.
Step 7: Click Install button on the pop-up message box.
Step 8: Once you install the app, you will receive the Storefront API access token, which will be needed to access your Shopify store from your Beezer app. Copy this code and paste it in a notepad.
Step 9: Now lets add the Shopify component to your Beezer Dashboard. Please click on the Build section of your Beezer Dashboard and click on Pages section.
Create a new page by clicking the + sign next to Pages option.
Step 10: Once you have added or selected the page on which you want to add the Shopify component, click on the + sign next to your page title.
Step 11: Select the Shopify component from the Ecommerce tab and click on Add Shopify Component button to add it to your selected page.
Note: If the Shopify component is locked out, you can upgrade your Beezer subscription plan by clicking on the Upgrade button at the bottom left-hand-side of your Beezer Dashboard and selecting Everything plan.
Step 12: Now copy your Shopify domain name and Storefront API key of your Shopify store (which you stored in a notepad from Step 8) and paste inside the Shopify component content tab on your Beezer Dashboard.
Step 13: You can setup the Shopify component as per your needs. If you do not want to display "out of stock" products in your Beezer app, you can disable it using the toggle button.
You can also display specific products on your Beezer app by selecting the category of products from the Shopify component settings.
Step 14: If you are adding custom colors to your shopping cart from the design section of the Shopify component, please ensure that you enable the "Overide Design" toggle for all other Shopify pages (if you have added Shopify on multiple pages of your app). This will ensure that your shopping cart colors are matching with the previously added Shopify pages.
Note: You can use a Tab page or Nested page option if you want to display multiple related categories.
Please Publish your app once you have made all the changes, so they get reflected on your mobile app successfully.