Connect your Hygraph project to Shopify
Shopify is a SaaS provider for merchants running online businesses. The company's platform includes online store creation, search engine optimization, hosting, marketing, payment, fulfillment, and security for small to enterprise sized businesses.
#What you can do with the Hygraph-Shopify integration
With this app you can continue to use Shopify as your preferred headless commerce solution for products and eCommerce assets. By installing the Shopify app, you can bring your Shopify products into Hygraph projects with the rest of your content.
#Prerequisites to use this integration
- You must have a Hygraph account. If you don't have one, you can create one here.
- You must have a Hygraph project with at least one model.
- You must have a Shopify account. If you don't have one yet, you can get one here.
- You must have created a storefront in your Shopify account. Here is some information on how to get started.
Apps are environment specific. This means their configuration is applied per environment. Take this into consideration if you're working with a project using more than one environment.
#Install the Shopify app
Click here to install the Shopify App on Hygraph, then follow these steps:
- In the dropdown, select which project you want to install the app in, then click on the
Add Appbutton. You should be redirected to the Configure Shopify section of your Hygraph project dashboard.
- Fill in the
Storefront tokenand the
Store domain. You will find a link next to each of these fields with details on how to get this information.
- Click on the
Savebutton. A pop-up notification in the lower right corner of the screen will indicate that the changes have been saved.
#Add the Shopify product field to your model
- Navigate to the Schema builder.
- Select the model that you would like to add the Shopify product picker field to and click on it.
- Select the Shopify product picker field from the Add fields right sidebar.
- Complete the
Display namefield, and the
API IDwill be auto-filled by the system. Optionally, you can also add a
Description. This screen allows you to control different properties of your Shopify product picker field: you can allow multiple values, or you can localize the field, by selecting the checkboxes under the
Field optionssection of the screen.
- Click on the
#Use Shopify in your Hygraph project
- Navigate to the Content editor.
- Select the view that you configured the Shopify product picker field for.
- Click on the
+ Create entrybutton or, alternatively, edit an existing entry.
- Locate the Shopify product picker section of the screen and click on
Select product from Shopify. As a result, a new screen will display, showing the products available in your Shopify store.
- Select the product you wish to add to the entry, then click on the
- Now that the product has been added to the entry, you can click on
Save & Publish, as needed.