Products

This article explains how to configure, add content to and publish Products in Hygraph.

Creation

Products must first be created in commercetools. See Create a Product.

Only after the product has been created does it become visible in Hygraph, where content can be added, localization configured, and where it must then be published from. Do not create products in Hygraph.

How to configure

To navigate to the Product section, via the left menu pane select Content, and in the secondary left menu pane under the DEFAULT VIEWS section, select Product. A list of all existing products, from all tenants, in the selected Environment, will be displayed.

Selecting a product from the list will automatically redirect you to the Edit Product page where the product’s components and content can viewed, edited, added and removed.

Components

Like most objects in Hygraph, a Product is made up of multiple components. The nature of the components varies between objects, and is determined by the configurations in the Schema sections. You cannot simply add components; this must be done in consultation with the development teams and may even require a feature request to be submitted.

The available components for a Product are displayed on the left pane (next to the main navigation pane), and by clicking them they can be navigated to.

Tenant

As Hygraph is multi-tenant, the first and most important selection is the tenant. Selecting a tenant different than the one that product was created in is not recommended. Only make changes in this field if you are instructed to, and otherwise leave it as is.

Products are not filtered by a Hygraph Storefront field the way blogs are. Variants are filtered by the shop segment in commercetools (variants where segmentKey matches the shop).

URL Path

Autogenerated field based on the URL identifier in the SEO component and, if applicable, the relation with parent or child entities.

SEO

The Search Engine Optimization (SEO) component is made up of multiple sub-components. The same fields are documented in more detail in SEO.

URL Identifier

This is a required field. The part of the URL placed after the domain name and locale (i.e. the slug). For example: hilife-kids-multivitamin. It has to be unique, meaning that it cannot be the same as the urlIdentifier of another blog, brand, category, product etc. This is what will be displayed to the customer in the website, and how the URL link will look that can be provided to customers.

It is important that the default locale field has a value, it serves as a fallback in certain scenarios.

URL Path

The URL path is autogenerated based on the URL identifier and relation with parent or child entities.

SEO Title

Meta title for this page in search engines. Google typically displays the first 50-60 characters of a title tag.

SEO Description

Meta description for this page in search engines. Google generally truncates snippets to ~155-160 characters.

No Index

Use this field to not show this page, media, or resource in search results. By default this should be on False. Only when you are creating a temporary page, for instance for campaign, should this be set to true.

No follow

Use this field to allow search engines to index this page, but ask crawlers not to follow links on the current page. By default this should be on False. Only when you are creating a temporary page, for instance for campaign, should this be set to true.

Canonical URL

Optional. Only use in case of duplicate page content. A canonical URL is the URL of the page that Google thinks is most representative from a set of duplicate pages on your site.

Keywords

Use this fields for Keywords that are not allowed to be displayed on the page, but a user might use in the search bar to find this category on the website. Add keywords by clicking + Add to list and remove them by clicking the three dots on an existing one and the clicking remove.

Exclude from search

This field is required. Exclude this page from Algolia search results and recommendations. This is useful for pages that are not meant to be indexed, such as a certain tryout product. By default this should be on False. Only when you are creating a temporary page, for instance for campaign, should this be set to true.

This flag is honoured for blogs, products, and categories, as well as Pages, Content pages, and Authors.

Open Graph Image

Please provide an image with the size 1200 x 630px. Fallback to main image of the page if existing.

Name

The name of the product is managed in commercetools. This Hygraph name field is for search-purposes only and always reflects the product name in commercetools.

Product Key

Required Field The Product Key is the unique identifier shared between commercetools and Hygraph products. Upon product creation in commercetools, products are automatically synced to Hygraph with a Product Key.

Main Asset

The main asset (image or video) for this product. By default, the image shown, will be coming from commercetools, but can be overridden by the asset set here.

Images

These images serve as supplementary content for the product. The primary images are sourced from commercetools. Please do not upload duplicates of primary images here, as it may result in the image being displayed twice on the product detail page (PDP).

Tile image and override usage asset

Tile image (tileImage) is optional. Override usage asset (overrideUsageAsset) is an optional image for usage content.

Brand

Select the brand of the product, not the website where it will be sold.

Color

Used for none consumable products when applicable.

Material

Specify the filling material used beside the ingredients.

Country of Origin

Enter a country of origin, where the product is manufactured.

Generic Term

The generic term for this product, previously known as the SeoCategory.

Tags

Tags belong to filtersets, adding tags to a product allows them to be used in the filters section visible on the search pages and category pages. See Tags, Product Badges and Labels and Filtersets.

Badges

Selected tags will show as badges on product tiles and the PDP. Order in Hygraph is order on the shop.

Labels

Selected tags will be displayed as labels on product tiles.

Add existing Tags or create a new one using the buttons.

Collection labels (collectionLabels) is a further relation on the model.

Properties

Note: that the translations shown on the website belonging to these labels are managed in the Static Word model, all starting with product_property_label_ Add Properties by clicking + Add to list and remove them by clicking the three dots on an existing one and the clicking remove. See Product Properties and Static words.

Enable in Feeds

Select to which feed you want to publish this product. Feeds refresh every half hour. Also make sure to fill in mandatory fields for example EAN. Add Feeds by clicking + Add to list and remove them by clicking the three dots on an existing one and the clicking remove.

Not Sold in Countries

If a product is not sold for entire an shop, then please unpublish the product. Only if product is not sold for specific countries, then list them here. For list of countries with codes, see ISO 3166-1 To add a country click + Add to list A searchable dropdown field then appears. Each country must be selected individually.

To remove a country, click the three dots on an existing one and the clicking remove.

New to Date

If this date is in the future, then this product will be shown in new products section. When the date expires, the product is no longer visible in the new products section. As well as being displayed on the auto-generated category page the product will also be featured on the New product Carousels through out various pages on the website.

Is Recommended

If true, a recommended label shows on the product tile and the product detail page. This can be left empty.

Tip

Enter text that will be displayed above the buybox on the PDP to give a specific indication related to the product. Like so

The field on the model is Tips (tips). Variants can have their own tips.

Cart notifications

Cart notifications (cartNotifications) — messages in cart context.

Attachments

You can upload pamphlets or brochures relating to the product.

Headline

The h1 of the page. If this is not provided, the product name will be used instead. The headline is displayed directly under the product images. Headlines are used in product feeds.

Unique Selling Points

In this component enter short Bullet point summaries highlighting the properties of the product. USPs are displayed next to the product images. It is best practice to add 3 to 5, on mobile devices only 3 are shown and desktop up to 6. In a mobile view any more than 3 will be hidden from view.

Short Description

As the name of the component suggests, this is a short description of the product and should be as brief as and informative. Further detailed information should be contained in other components. Short description is displayed under the headline. Short descriptions are used in product feeds.

Benefits

If filled in, the benefit(s) show as a content tab on the PDP. Text width should always be 7. Upload the appropriate image and toggle on which side of the text the image should be displayed on. On the website it looks like this.

Ingredients Hero Content

This section has multiple components that belong to it. Here everything about the ingredients of the product is listed. Text width is always 7. Upload the appropriate image and toggle on which side of the text the image should be displayed on. This is what it looks like on the website

Ingredients

List the ingredients contained in the product, this list should reflect what is on the label of the physical product. It is displayed on the left side of the Nutrition table under the Ingredients Hero Content section.

Nutrition Table

Table needs to be created manually but should be copied from an existing product to maintain consistency throughout the website. Of course, changing the relevant information to reflect the product. This is what it looks like on the website.

Allergens

If the product contains any allergens, they must be listed in this component. Which is displayed under the ingredients. If nothing is filled in the localized text will be visible that the product does not contain any allergens.

Clean Labels

This is an optional section and can be left empty. When the product falls under the criteria you can add the clean labe section by clicking + Add new Text and Image Text width is always 7. Upload the appropriate image and toggle on which side of the text the image should be displayed on. On the PDP the Clean Label section will become visible, and looks like this.

Quality

If filled in, then Quality shows as a tab on the PDP. Text width is always 7. Upload the appropriate image and toggle on which side of the text the image should be displayed on. On the website it looks like this.

Suggested use

Usage Blocks

With content like "Warnings" and "Food supplement disclaimer" in the Usage section on the PDP. This is displayed under the text in the Suggested use section

Frequently asked questions

It is displayed on the PDP as a tab when one or more FAQ are filled in. This product FAQ section is meant specifically for the product. There is also a store wide FAQ section in the settings object in Hygraph. See Settings (generalProductFaq).

GDP compliance and unit range

GDP compliance information (gdpComplianceInformation) — for GDP/medicine products, shown before add-to-cart. If empty, a static word is used.

Unit range (unitRange) — custom intake line (for example 1-2 capsules) when commercetools unit fields are not enough.

Ratings

Average rating, review count, review count per rating, recently bought count — maintained by the review pipeline. Review aggregate group id (reviewAggregateGroupId) is set when reviews are shared; do not edit. See Product Review Groups.

Product reviews (productReviews) / Product review group (productReviewGroup) — relations. Prefer groups for sharing; overlapping manual links will not double-count on the shop.

Bestseller query terms

The specific search criteria employed in the determination of the "Bestseller" badge. By entering search terms in this component, will on the website show the product with a bestseller badge.

Our choice query terms

The specific search criteria employed in the determination of the "Our Choice" badge. By entering search terms in this component, will on the website show the product with a Our choice badge.

Related Blog recommended Product

Select existing or create blogs that will feature this product. When viewing one of the specified blogs in this component the product will be featured as a recommended product when scrolling down the blog page.

Related ProductLandingPage Product

Using this component you can link to other products that are directly related to the current one. Usually this is used for premium upsell purposes. This product will then be displayed under the unique selling points.

Recommended in product listings

Choose product listings, categories or brands, where this product is highlighted as recommended

Bestseller in product listings

Choose product listings, categories or brands, where this product is highlighted as bestseller

Is consumable

Set to true if the product is consumable (edible). Example: a book is not consumable. Use this component to show or hide components on the website.

Show supply duration in days

If true, the supply duration will be shown in the PDP subtitle

External marketplace URLs

The External Marketplace URLs will be shown as images under the buybox on the PDP of the product. This is a localized field, and as such each locale must be configured individually; you must add entries to the list of each locale. URL entries must be formatted as [marketplace] URL of product in marketplace, for example [Amazon] https://www.amazon.com/dp/example. A Static Image must exist with a matching key: the name in the brackets plus marketplace_ in lowercase, so [Amazon] uses marketplace_amazon. See External Market Places.

Country targeting within a locale works by appending the marketplace with a dash and the country code (2 letter). Refer to the following list for country codes: List of ISO 3166 country codes This must be configured for each locale where you want external marketplace options to exist.

Now you ensure that a customer is linked to the correct region marketplace regardless of which storefront locale they are using.

Default buybox quantity

Sets the default tier quantity shown in the buybox on the PDP. If this field is not set, then the storefront’s default tier quantity is used.

Override Created At

Overrides the default creation timestamp. If not provided, the "createdAt" field will be used.

Recommended Bundle Upsell

Specific messagebar for this page

Links the message bar that lists this product. The global bar still shows unless Hide messagebar is on. See Messagebar.

Hide messagebar

Option to hide the global messagebar for this product page

Save & Publish

When a product is created in commercetools, it will not be visible on the website until it has been manually published. However, after publishing a product in Hygraph for the first time, a build must run before it will be visible on the live website for customers.

Whereas updating a product after it has already been published previously does not require a build, any changes that are made will be visible after the product is published. You may save and publish at a later date or concurrently save and publish using the buttons on the top right section of the screen. A pop-up will appear where specific stages or localizations can be selected and toggled.

Builds will run automatically at night, and if needed it can be requested via the slack channel: #help-commercetools-hygraph You need to specify specifically if its for staging, otherwise the dev team will assume the build request is for production. You may also configure schedule event to publish the product by clicking the drop down arrow on the right of the Save & publish button.

A pop-up will appear where you can toggle to either only schedule the product, or add it to an existing release. A secondary pop-up will be displayed where you must configure the schedule entry. This configuration will be visible in the info panel on the right-hand side of the product. See also Save, Publish & Schedule and Page revalidation.