How to Model a Product Page
Product pages on e-shops can be boring. Adding inspiration content and storytelling on your PDPs boosts SEO and conversion rates. Let's see how to enrich a product page with content components managed in Prismic.
Page structure
This section displays the core product data. Let's assume that the source of truth for this data is an external e-commerce backend, we then use one Integration Field in the fixed section of the custom type.
From here content editors will be able to select the product from the product catalog.
The core product data will be pulled from the source of truth, embedded in Prismic API response and will keep synced with the data source.
1 of 4The Slice Zone will be used by content editors to enhance this basic Product page with rich content.
This first Slice is a simple Video component allowing to control the section title and input a video URL:
- Title field for the section title, restricted to "h2"
- Embed field for pasting the video URL
We just need 3 fields in the non-repeatable zone of this editorial Slice:
- Image field
- Title field for the section title, restricted to "h2"
- Rich text field restricted to "p", for the paragraph text
Additionally, we need to configure 2 "labels" for this Slice so that content editors can control the image alignment.
To populate this example, content editors will use two Slices and will switch the label to get the expected alignment.
3 of 4We need 2 things for this featured product Slice
In the non-repeatable zone
- Title field for the section title, restricted to "h2"
In the repeatable zone
- Content Relationship field restricted to the "product" Custom Type - so that only documents of the "product" type can be linked here
How to set it up in Prismic
- Set up a new repeatable Custom Type
- Copy the JSON below and paste it under the JSON editor of this new custom type
You need to have Integration Fields enable on your repository for this JSON to work. This Custom Type definition below uses an Integration Field for pulling and syncing Product data from an external system. To get Integration Fields enabled on your repository, just ask on the chat. Also, in the following example, the "product" Integration Field is pulling data from a demo endpoint. See how to replace this data source with yours in this video.
{ "Main" : { "display_name" : { "type" : "StructuredText", "config" : { "single" : "heading1", "label" : "Display name", "placeholder" : "Product display name for the CMS list" } }, "product" : { "type" : "IntegrationFields", "config" : { "catalog" : "content-modelling-samples--products", "label" : "Product", "placeholder" : "Pick a product from the catalog" } }, "body" : { "type" : "Slices", "fieldset" : "Slice zone", "config" : { "labels" : { "related_products" : [ ], "video_stories_" : [ ], "editorial_section" : [ { "name" : "image-right", "display" : "image-right" }, { "name" : "image-left", "display" : "image-left" } ] }, "choices" : { "related_products" : { "type" : "Slice", "fieldset" : "Related products", "description" : "Related products section", "icon" : "shopping_basket", "display" : "list", "non-repeat" : { "section_title" : { "type" : "StructuredText", "config" : { "single" : "heading2", "label" : "Section title", "placeholder" : "Section title" } } }, "repeat" : { "related_products" : { "type" : "Link", "config" : { "select" : "document", "customtypes" : [ "ecommerce-product" ], "label" : "Related products", "placeholder" : "Pick a product" } } } }, "video_stories_" : { "type" : "Slice", "fieldset" : "Video section ", "description" : "A section title and a video", "icon" : "video_library", "display" : "grid", "non-repeat" : { "video_title" : { "type" : "StructuredText", "config" : { "single" : "heading2", "label" : "Video title", "placeholder" : "Type your video's title" } }, "embed_field" : { "type" : "Embed", "config" : { "label" : "Embed field", "placeholder" : "Paste a URL" } } }, "repeat" : { } }, "editorial_section" : { "type" : "Slice", "fieldset" : "Editorial section", "description" : "An image and some paragraph text", "icon" : "art_track", "display" : "list", "non-repeat" : { "image" : { "type" : "Image", "config" : { "constraint" : { }, "thumbnails" : [ ], "label" : "Image" } }, "section_title" : { "type" : "StructuredText", "config" : { "single" : "heading2", "label" : "Section title", "placeholder" : "Section title" } }, "text" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Text", "placeholder" : "Paragraph text" } } }, "repeat" : { } } } } } }, "SEO & Social" : { "uid" : { "type" : "UID", "config" : { "label" : "URL Slug", "placeholder" : "Type your unique URL name" } }, "meta_title" : { "type" : "Text", "config" : { "label" : "Meta title", "placeholder" : "Type your SEO meta title" } }, "meta_description" : { "type" : "Text", "config" : { "label" : "Meta description", "placeholder" : "Type your SEO meta description" } }, "body1" : { "type" : "Slices", "fieldset" : "Slice zone", "config" : { "labels" : { }, "choices" : { "twitter_card" : { "type" : "Slice", "fieldset" : "Twitter Card", "description" : "Fields to customize Twitter Card (Summary Card with Large Image)", "icon" : "credit_card", "display" : "list", "non-repeat" : { "twitter_title" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Title", "placeholder" : "Title for Twitter Card" } }, "twitter_description" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Description", "placeholder" : "Description for Twitter Card" } }, "twitter_image" : { "type" : "Image", "config" : { "constraint" : { "width" : 1200, "height" : 675 }, "thumbnails" : [ ], "label" : "Image" } } }, "repeat" : { } }, "open_graph" : { "type" : "Slice", "fieldset" : "Open Graph", "description" : "Fields to customize Open Graph", "icon" : "thumb_up", "display" : "list", "non-repeat" : { "og_title" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Title", "placeholder" : "Title for Open Graph" } }, "og_description" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Description", "placeholder" : "Description for Open Graph" } }, "og_image" : { "type" : "Image", "config" : { "constraint" : { "width" : 1200, "height" : 628 }, "thumbnails" : [ ], "label" : "Image" } } }, "repeat" : { } } } } } } }See More