Product Page overview
#Overview
In this section, you will find recipes that you can use to create Product Page models using different field configurations.
| Recipe | Description |
|---|---|
| Product Page eCommerce | This guide shows how to create a Product model for eCommerce with Product information stored in the CMS. |
| Product Page with Akeneo app | This guide shows how to create a Product model in Hygraph that fetches product information from an external PIM (Akeneo) via app integrations. |
| Product Page with Remote Source | This guide shows how to create a Product model in Hygraph that fetches product information from an external PIM via Remote Sources. |
| Related Product Pages | This guide shows how to create interconnected Product models for an online bookstore with Product information stored in the CMS. |
#Product pages cookbook
Cloning the entire cookbook is a great option if you're curious about the content of the Product Pages but don't want to follow the step-by-step creation process.
Clone this projectThis clonable project contains the entire Product Page Cookbook, so you can compare recipes or examine their contents.
- Take plan limits into consideration when adding a recipe to your own project.
- Are you new to Hygraph? You may want to check out our Getting Started Tutorial!
#Limitations
Since apps are not cloned when you clone a project, you will need to install the Remote Source Data Picker and the Akeneo app to use them when you clone the project. Here, you'll find a section for each app, explaining how to install them and how to enable them in your cloned project.
To follow these steps, you must first clone the cookbook project.
#Remote source data picker
After cloning the cookbook project, install the app following step 2 of our step-by-step guide. Make sure to install the app in the cookbook project you've cloned by selecting it in the installation dropdown.
Next, navigate to the Schema builder and select the Product Page remote source model. In it, you will find the Product Picker RS field, which we need to associate with the app again:
Remote source data picker
To link this field to the app again, click on the Edit button on the card to access the edit view, and select GraphQL data Picker from the dropdown menu to the left of the modal title:
Associate field to the app
Click Update to save.
After saving, access the edit view of the field again, select the Custom tab that now displays at the top, and fill in the fields using the following information:
| Field | Input |
|---|---|
| ID Field ID | id |
| API ID | topLevelProduct |
| Title Field ID | name |
Click Update to save.
Our step-by-step guide contains detailed information on what these fields are.
The app should work now. If you now to go the Content editor and create an entry for the Product Page remote source view, you should find a dropdown menu in the content form that allows you to select an item from a list:
Remote Source Data Picker in the content editor
#Akeneo app
After cloning the cookbook project, install the app following step 1 of our step-by-step guide. Make sure to install the app in the cookbook project you've cloned by selecting it in the installation dropdown.
Next, navigate to the Schema builder and select the Product Page Akeneo model. In it, you will find the Product Information field, which we need to associate with the app again:
Akeneo app field
To link this field to the app again, click on the Edit button on the card to access the edit view, and select Akeneo Field from the dropdown menu to the left of the modal title:
Link field to the Akeneo app
Click Update to save.
The app should work now. If you now to go the Content editor and create an entry for the Product Page Akeneo view, you should find the Akeneo product picker in the content form that allows you to select an item from the connected PIM:
Akeneo field in the content editor