Sections, Components and Elements
This article explains sections, components & elements which can be configured on various models in Hygraph. Naming conventions of Sections, Components and Elements in Hygraph can be a little confusing, hopefully this sheds some light on it:
- Models — Refers to pages and various other types of content found throughout the websites.
- Sections — The larger building blocks of a page—each represents a full content area like a hero banner, a carousel gallery, or FAQ section.
- Components — The reusable schema units that define the structure and fields used to build sections or other content pieces.
- Elements — the individual content instances or items created from those components that make up the actual page.
Add sections with + Add component. Order in Hygraph is order on the shop. Every section has Section Settings. Blogs support a smaller set (CTA, FAQ, text, product blocks, iframe, and similar — not the full landing-page list).
Models
Models in Hygraph may refer to pages on the website, or specific sections within pages on a website. They are composed of various sections, components, and elements. Typically, Models are used to configure and display content, and the various models can be viewed in the content section via the left menu pane.
Models are then split up into Schema. This make-up is configured in the Schema section in hygraph.
Please do not make changes to the schemas of models without consulting the DEV team. That said, it is useful to know that some fields may use validations, and that there are number of possible validations that can be configured. To view the validation conditions of such a field, navigate to the Model's schema in Hygraph and select it.
A more complicated validation is ‘Match a specific pattern’ validation. which is typically written in a syntax called ‘Regular Expression’, also known as ‘Regex’. Regex looks for specific characters, patterns, orders, etc., and is essentially a Boolean logic gate.
This means that if a value entered in a field with a validation that uses Regex fulfills the conditions it will be accepted, and if not, an error will be triggered, and the value cannot be saved or published. To reiterate, DO NOT MAKE UNAUTHORIZED CHANGES to any of the validations or fields in a Schema. Hygraph is a multi-tenant environment. All changes must be discussed with the Development team. Adding fields, components, sections or elements to a model constitutes as a feature request. Please use the Aha portal to submit such requests. If you are, however, trying to enter a value to a field that you feel should be accepted, you may raise a ticket in the IT Support portal. Depending on the specifics of the ticket, the Development team may be requested to fix the validation.
Section Settings
Every section has a Section Settings which allow the section to be configured in a number of ways.
Hide Section on mobile
True or false toggle to hide the section on mobile.
Hide Section on desktop
True or false toggle to hide the section on desktop.
Background Type
Select a background type.
Color — Set the background of the section to display a color, select the color in the Background Color field.
Image — Set the background of the section to display an Image, if the images does not cover the entire section the background color can be selected in the Background Color field.
None — Set the background of the section to display nothing, essentially it will be transparent and the default website background color will thus be visible.
Background color
Set a fixed color for the background of the section, depending on the selection of previous setting ‘Background Type’.
Background image (desktop)
Upload an image that will be displayed as the background of the section on the desktop version, depending on the selection of the previous section ‘Background Type’.
Background image (mobile)
Upload an image that will be displayed as the background of the section on the mobile version, depending on the selection of the previous section ‘Background Type’. Asset crop uses zoom focus. Same fields as on Pages.
Section ID
If filled, the ID is added to the section on the shop, so it can be used as a reference (for example when another part of the shop should jump to or target this section).
Tailwind class name
See Tailwind documentation: https://tailwindcss.com/docs/styling-with-utility-classes Example: m-4 py-3 lg:py-6. Note: classes will only work if they are already used once on the shop. Use this field to enter specific syntax that will determine customized spacing behaviour. For instance, is a section overlapping with another section?
By entering syntax, you can increase the space between the sections so that they do not overlap. This syntax can be difficult to understand if you are not familiar with it. Refer to the provided documentation, you may use AI, request assistance via the #help-commercetools-hygraph slack channel or raise a ticket in the support portal. Please don’t hesitate to ask for help!
https://tailwindcss.com/docs/padding
https://tailwindcss.com/docs/margin
Hide section for locales
You can toggle to hide the section in specific locales, and as such create locale specific sections by using this toggle accordingly.
Author Section
Display information about authors of content on the page.
Layout
Choose whether the author tiles are displayed in a grid or slider (on desktop only applicable if +4 authors).
Authors
Add existing or create new author profiles to add to the section. Adding an existing author will open a searchable author pop-up. Whereas opting to create a new author will redirect you to the Author object in Hygraph, allowing you to create a new author profile from scratch.
See Authors.
Blog Article Slider
Blog Slider Type
Choose whether to show latest articles from a blog type or manually select specific articles.
Selecting the Latest articles from blog type will automatically display the latest blogs, dynamically generated every time the page is loaded. When the Manually select articles is selected however you have the option to chose existing Blogs or create new ones. Adding an existing blog will open a selection pop-up where one or more existing blogs can be selected.
Opting to create a new blog will redirect you to the Blog object in Hygraph where you can create a blog from scratch.
Number of articles
How many articles the slider should show.
Blog Type
Optional. Used when the slider should pull latest articles from a blog type.
Blog Articles
Pinned articles to show in the slider when you are selecting articles manually.
Slider Type
Choose a slider type from the dropdown field.
When selecting Background, you must configure this in the section settings. Otherwise Plain, will simply display the default website background for this section.
Category Slider
A section where a set of categories can be featured.
Slider Type
Choose a slider type from the dropdown field. When selecting Background, you must configure this in the section settings. Otherwise Plain, will simply display the default website background for this section.
Title
Give the section a localized title.
Categories
Add existing categories or create a new one. When adding existing categories a searchable category selection pop-up will appear display all existing categories in Hygraph.
Where you may select multiple categories that will be displayed in this section. Opting to create a new Category is not recommended. It is best practice to create a Category in commercetools, from where it will be synced to Hygraph, and then it can be selected as an existing category. See Create a Category.
Background Image
Overwrite default background image for slider type "background”.
Tile type
Choose how category tiles (category cards) should look in this section.
CTA
Call To Action; A multipurpose section typically used to draw a users attention and initiate an action or elicit a response.
Title
Enter a title for the CTA section, using a simple text field.
Text
Enter the main body of text for the CTA, using a rich text field, that supports tables and images as well as code.
Link
Enter a URL that, when the CTA is clicked upon on the website, will redirect the user to the specified webpage. This is localized field, view the website from a locale that is not specified will revert to the default value.
Background Image
Upload an image that the CTA section will display on the website, this refers to the desktop image referenced as fall back for the image mobile field hereunder.
Image Mobile
Upload an image to display on mobile, if nothing is uploaded will fallback to "Background image".
Button
Use the + Add new button button to add a button. Doing so will open button configuration fields.
Button type
Select from a searchable drop down which button type you would like to add.
CTA — And we heard you like CTA so we put a CTA in your CTA, then you can CTA while you CTA.
Link — Select this option when specifying a link.
Outline — A button that takes up the entirety of the CTA.
Primary — Intended to serve as the main focal point of the CTA.
Secondary — A less focal button, but still a button, none the less.
Click Type
Determine what happens when a user clicks on the CTA.
Button Text
Enter the text that will be displayed on the button. This is a localized field.
Action
There are two options available when selecting Action. Note you may only add one Discount or product with the action.
Add Discount Code Action
When selecting discount code a field appears to enter the discount code. note that this a localized field, and thus for each locale a code can be entered.
Add Product to Cart action
When selecting Add product to cart two buttons appear, Add existing Product and + Create new product.
Do not select + Create new Product, Products should be created in commercetools, which will then be synced to Hygraph, where they can be selected using the Add existing Product button. which opens a searchable product selection pop-up. Keep in mind, the product must be in the correct tenant and assigned and configured correctly otherwise it will not be possible for the customer to add it using the CTA.
If you wanted to add multiple products, you must create a Bundle where the products are contained within.
Link (click type)
When the Click type Link is selected, a field appears to enter a URL. This is a localized field, when a field is not filled in for a locale the default value will be used as fallback.
Button Settings
Give the button some special functionality, use the + Add component button to add a setting. A dropdown will appear with two options.
Data Attribute
Allows you to enter a Key and value that the button will trigger in the shop when pressed. Note that the value field is localized, when a field is not filled in for a locale the default value will be used as fallback.
Icon
Enables an Icon or image to be inserted in the button.
Font Awesome Icon — You can use any icon from: https://fontawesome.com/v5.15/icons
When using Font Awesome Icons, only include the last part of the URL. Full URL from the above example: https://fontawesome.com/v5/icons/classic/light/stomach Use only the last part after the ...classic/light/. In this case is: stomach
Icon Image — Alternatively upload a custom icon image.
Please note that the image contained in the button should not be very large.
Layout settings
Layout settings to define how the CTA should be displayed within the parent grid section. Use the + Add component button to add layout settings. Doing so will display a dropdown where either desktop or mobile layout settings can be selected.
All four of these will each, when selected, create a field where a value can be entered which determines the span of the section. Be sure to test the page when entering settings, depending on the layering of various sections, there might be unexpected outcomes when using the layout settings for a nested section.
Buttons inside Grid, Info Card, Highlights, and nested CTAs use the same Button type, Click Type, Action, Button Settings, Font Awesome, and Layout settings as this section.
CTA Slider
The section allows multiple CTAs to be displayed in a slider. The individual CTAs are configured the same as the above CTA section. The contained CTAs will be displayed in a list and new ones can be added using the button.
To change the order of the CTAs, drag and drop by clicking the six dots on the left-hand side of the CTA block.
Autoplay
There is an Autoplay feature, which when toggled to true will change slide every 5 seconds.
Divider
A section used for spacing on a webpage, which on the website appear as a line.
Title
it can be given a title, which is only used internally in Hygraph to indicate which divider it is. Namely, customized spacing properties can be created in the section settings of the divider which would create the need to be able to differentiate.
FAQ section
Allows a FAQ section to be created. https://www.vitamaze.com/faq
Typically, similar FAQs are grouped into their own FAQ section and separated by Text sections, as shown above on the Vitamaze page. Each FAQ section can in turn contain multiple individual FAQs. And each FAQ section in turn has its own localized Question and Answer text sections where the appropriate text must be entered.
Title
Give the FAQ section a title that is referenced within Hygraph, it is not displayed on the website.
Question
Displayed as a subheading, and when the individual FAQ is not selected and minimized, the text that is displayed. Localized field, when locale has no value fallback is default entry.
Answer
The main body of text, when the FAQ is not selected this will be hidden, and only when the FAQ is selected does the section expand and the text is displayed. Localized field, when locale has no value fallback is default entry.
Grid
This section allows you to create content displayed in columns.
Number of Columns on Desktop
The number of columns the grid should have on desktop 0 to hide the grid. Maximum value 12.
Number of Columns on Mobile
The number of columns the grid should take on mobile 0 to hide the grid. Maximum value 12.
Take note that the rows are automatically determined by the amount of content that will fit into columns, the above desktop display on mobile with 3 content sections on a mobile view with one column will in turn create 3 rows.
Gap
Gap between components in tailwind spacing units see https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale Requires a value between 1 and 10.
Components
Determine the content that will be displayed in the grid, use the button to add them and by doing so open a searchable dropdown.
Column
Use this component create columns in the grid, within the columns several elements can be added. Here is what this can look like on the website.
Elements
Any number of elements can be added to a column. Using the above example:
Button
Add a configurable button. Button type, Click Type, Button Text, Action (Add Discount Code / Add Product to Cart), Link, Button Settings (Data Attribute and Icon / Font Awesome / Icon Image), and Layout settings are the same fields as documented under CTA. Do not select + Create new Product.
Divider
A section used for spacing on a webpage, which on the website appear as a line. It can be given a title, which is only used internally in Hygraph to indicate which divider it is. Customized spacing properties can be created in the section settings of the divider which would create the need to be able to differentiate.
Icon
Enables an Icon or image to be inserted in the Grid. Font Awesome: use any icon from https://fontawesome.com/v5.15/icons. When using Font Awesome Icons, only include the last part of the URL after classic/light/ (example: stomach from https://fontawesome.com/v5/icons/classic/light/stomach). Alternatively upload a custom icon image. Please note that the image contained in the button should not be very large.
Icon Text Component
Enables an Icon or image with a clickable title to be inserted in the Grid.
Title — Add a title that will be displayed on the top part of the Icon text component.
Font Awesome Icon / Icon Image — same rules as Icon above.
Link URL — Insert a URL that the user will be redirected to upon clicking the title and image in the icon text component.
Image
Add an image component to the Grid, please note that the scaling of the image are determined by the allotted grid and column configuration, be sure to test the display of the image in the grid on both desktop and mobile versions.
Typically, an image component is underneath or in between other components. Like below an image component on the website is displayed underneath a Title and Rich Text component.
In this specific example, with the intention of creating a specific type of spacing and page layout, the Title, Text and Image components have been allocated their own Column component.
Link
Allows you to add a component which can link to other pages within the tenant’s website.
Text — Enter text that will be displayed on the website as a clickable.
URL — The part of the URL placed after the domain name and locale (i.e. the slug). For example: hilife-kids-multivitamin.
A localized field that must reference another page within the tenant’s website.
Product Review Component
Allows specific reviews to be displayed.
Review — Make a choice to choose from existing client reviews, or create a new one.
When choosing an existing one, a pop-up will appear and a selection can be made. All product reviews from all tenants will be available, it is a good idea to use filters, or find the review you want to use before making a selection. Use the link icon to select it.
Show Rating — A true false toggle, that determines whether the rating of the review will be displayed.
See Product Review. Typically adding new reviews is only done for new products or for testing purposes.
Rich Text
A standard rich text section, which supports images and has a built in code/html editor. A localised field.
Title
A simple text field where a title can be entered.
Countdown
Size — Select the size of the countdown timer.
Number Color — If the color is not filled it, then the number color will be black.
Countdown Date and Time — Countdown to specific date and time. You can enter the date and time manually or use the date picker.
Countdown Complete Text — This text will be shown after the countdown is completed. A localized rich text field that supports tables, images and code.
CTA (nested)
Title, Text, Link, Background Image, Image Mobile, and Button fields are the same as the page-level CTA section.
Icon Richtext Block
Corner Icon — If left blank, it is not shown. See https://fontawesome.com/search. Example: "arrow-right".
Title — Shown as card title. If left blank, it is not shown. Localized simple text field.
Icon Texts — Add individual Icon Richtext sections to the component by clicking the button.
Icon — Add an icon to the section. The image to display if the icon is not using a font awesome icon. Font Awesome: https://fontawesome.com/v5.15/icons, last path segment only (example stomach).
Icon Image — Add an icon from the existing content in Hygraph by pressing Add Icon Image. Doing so will open the Asset selection pop-up where you can search filter and select an asset. Or upload a new one, keeping in mind an icon should not have large dimensions and to test how it is displayed on the desktop as well as the mobile version of the page.
Text — A localized rich text field that supports Images, tables and code.
Link and Text — Shown as at the bottom right of the card. If left blank, it is not shown. Click the + Add new Link button to configure the link and text. You may only add one Link per Icon Richtext Block.
Link Text is a localized simple text field. URL is a localized simple text field where the part of the URL placed after the domain name and locale (i.e. the slug) is entered. For example: hilife-kids-multivitamin. This must be an internal link within the website’s domain.
Info Card Component
A multipurpose component widely used to contain an emphasizes specific content. Commonly used to show discounts. Or detail relevant products.
Card type — Select between Background or classic.
Background — The image is used as the complete background and the text is displayed as an overlay.
Classic — The image and text have separate areas.
Title — A localized simple text field that is displayed above the text.
Image — Please use an image with a 16 x 9 ratio. Differently proportioned images will be cut to fit this ratio. Example of a correctly sized image: 320px width and 180px height.
Description — A localized simple text field where the main text of the info card is entered.
URL — Enter a URL slug of a page from within the website domain.
Button — Add a configurable button with the same Button type, Click Type, Action, Link, and Button Settings as CTA.
In a Menu, title, description, image, URL, icon, and button are shown.
Infobox
Use this component to emphasize a section of text.
Content — A required rich text field that supports tables, images and code.
Show icon on the left — If checked, the icon will be shown on the left side of the infobox, otherwise it will be on the right.
Icon — Make a selection from the list that will be displayed when the earlier option is set to true.
Layout Settings — Layout settings to define how the Infobox should be displayed within the parent grid section.
Product Tile
Display a single product as tile in the grid.
Product — Select an existing product from the list. A pop-up will appear where a product can be searched, filtered and selected. You may only select one product per product tile.
Hero
A Hero refers to a banner that can contain text and buttons.
Hero Type
There are several Hero types to pick from with their own specific layout and functions.
CTA — Configure a hero in a style CTA.
Full width asset — As the name suggest, the hero type section will take up the full width of the page.
Split block (image left, text right) — Configure the Image to the left and the text to the right.
Split block (text left, image right) — Configure the Image to the right and the text to the left.
Asset Desktop
As the way the webpage is displayed on the website differs greatly than the mobile version, there is the possibility to upload assets with dimensions specifically for desktop.
As seen above, it is best practice to have the specific dimensions of the asset in the title of the file. Use the buttons to replace the existing asset. Take note on the state of the asset, in the example it is noted as published. Refer to the Stages sub section in the right info panel to compare stages where there might have been changes made to an asset.
Asset Mobile
Upload the mobile specific asset just as the desktop version.
Link Url
The URL the whole section should link to, buttons in the overlay can override this.
Overlay Desktop
Allows configuration of objects to appear above the hero asset, such as titles or buttons.
Use the +Add new Overlay button to open the overlay configuration fields.
Overlay Type
Make a choice how you want the overlay to be displayed.
Box — has an outline.
Dark Transparent — A dark tinted overlay.
Full Transparent — The background behind the overlay is completely visible.
Primary Transparent — Transparent but different.
White Transparent — A white tinted overlay.
Alignment
Determine the alignment of the overlay, pick between center, left or right.
Components
The text blocks that the overlay can contain a number of configurable components.
Countdown — Size, Number Color, Countdown Date and Time, Countdown Complete Text (localized rich text). Same fields as Grid Countdown.
Icon — Font Awesome or Icon Image, same rules as CTA Icon.
Image
Rich Text — A localized rich text field that support tables, images and code.
Title — Display small section of text. Title is a localized simple text field. Variant refers to the HTML heading tag, amongst other things it affects the size and color of the text. Text Alignment — Determine the alignment of the title. Color — Select the color that the text should be.
Overlay Mobile
Configure an overlay for the hero asset specifically for mobile devices. Same configuration options as overlay desktop.
Highlights Section
A multifunctional section that supports emphasizing specific products.
Title
A localized simple text field to enter the title of the section.
Description
A localized rich text field that supports code, images and tables.
Title Type
Choose between Horizontal or vertical.
Image
Add an existing image or upload a new one to display next to the text.
Products
Manually select one or more products to be displayed in the carousel sections of this component.
Use the Add existing Product button and a pop-up will open where the desired products can be search for, filtered and selected. Do not create new products in Hygraph, products must be created in commercetools.
Category
Likewise you can also select a Category to display in the carousel, where all the products contained in the category will be displayed.
Use the Add existing Category button and a pop-up will appear where you can search, filter and select a category you want to display. Do not create categories in Hygraph, categories must be created in commercetools.
Button
Add a configurable button. Same Button type (CTA, Link, Outline, Primary, Secondary), Click Type, Button Text, Action, Link, and Button Settings as CTA. Do not select + Create new Product. If you wanted to add multiple products, you must create a Bundle where the products are contained within.
Full Width
A true or false toggle that determines whether the component takes up the full width of the screen on the website. Empty Highlighted Product slots can reserve a slot in a Menu grid.
Icon Text Section
A simple way to display text with icon.
Background Color
Select what kind of background this section will have.
Icon Text Components
The icon text components that the section can contain. Use the button to add the individual sections.
Which will in turn allow each one to be configured, each component contains:
Title — A simple localized text field for the title of the component.
Font Awesome Icon — https://fontawesome.com/v5.15/icons, last path segment only.
Icon Image — Select an existing image from Hygraph or upload a new to be displayed above the title of the Icon Text Component.
Link URL — Enter a URL that clicking the icon will lead the user to, this is localised field.
Image Text
A simple component that displays text next to an image.
Image
Insert an image for the desktop version of the website from the existing content in Hygraph or upload a new image.
Image Mobile
Insert an image for the mobile version of the website from the existing content in Hygraph or upload a new image.
Text
A rich text field that supports images, tables and code.
Text Left
If true, the text shows left on desktop, and the image right. If false, the other way around.
Text Color
Configure the color of the text using a color picker.
Button Text
Allows a button to be display in this component, when it is left blank there will be no button.
Button Url
The URL that the button will lead to.
Background gradient
Configure a gradient that is displayed in the background of this component.
Info Banner
A component that displays an image and a section of text.
Image
Add an image from existing content in Hygraph or upload a new one. A pop-up will open where all images and be searched and filtered.
Full Width
In a full width version, the Image takes the full width of the screen in the desktop version of the website. Otherwise, it occupies a maximum of half the screen.
Text
Text is shown in a text box. The text box is on top of the image in case the full width option is toggled to true. This is a localized rich text field that support images, tables and code.
Icon
If uploaded, this overwrites the default icon shown at the edge of the text box.
Text box alignment
Position of the text box on desktop. For info banners that are not full width, it's either left or right.
Info Banner List
Use this component to display multiple Info banners consecutively.
The configuration of the individual Info Banner components is the same as the Info Banner component described previously. You can add as many info banner components as you like by clicking + Add new info banner, and re-order them by dragging and dropping.
Show Progress Line
If true a dashed progress line will be shown between each of the Info banner components contained in the info banner list component.
Link List
A list of links, including optional icons. The same component is used in mega menus.
Text
A required localized simple text field that is displayed on the website.
URL
The part of the URL placed after the domain name and locale (i.e. the slug). For example: hilife-kids-multivitamin. Must link to a page within the websites domain.
Icon
Optional, shows in front of the text. Press the + Add new Icon button to open the configuration fields.
Font Awesome — https://fontawesome.com/v5.15/icons, last path segment only.
Icon Image — The image to display if the icon is not using a font awesome icon. You can choose from an existing Icon in Hygraph by clicking Add Icon Image. An Icon should not be too large, check how it is displayed on both the desktop and mobile version.
Links
In a Menu, every link is shown, in the order you add them. Add links by clicking the + Add new Link button. Doing so will open link configuration fields. Text is a localized simple text field. URL is the slug, for example hilife-kids-multivitamin. The URL must link to a page within the websites Domain.
Newsletter Signup
Displays a section where the client can enter their email address to subscribe to a newsletter.
Background Image
Select an image that will be displayed in the background of this section. Choose from an existing image or upload a new one.
Product Details Section
This component is used to emphasize all of product’s specific information. The information in this component is inherited from the selected product’s content in Hygraph.
Product
Manually select a product from the available products. Note: please do not create products in Hygraph, products must be created in commercetools. A pop-up will open, where you can search and filter all available products. Select the desired product by clicking the link icon. Note: you can only select one product in this component.
When you want to feature multiple products, you will need to create additional components.
Asset
Overwrite the product image with an custom image or video. You may add an existing asset, which will open a asset selection pop-up. Or you may upload a new asset. Please carefully test both on the desktop version as well as the mobile version of the website to ensure that the asset is displayed well.
Product Features Slider
Displays the secondary images of a product in a slider.
Product
Manually select a product from the available products. Note: please do not create products in Hygraph, products must be created in commercetools. A pop-up will open, where you can search and filter all available products. Select the desired product by clicking the link icon. Note: you can only select one product in this component.
When you want to feature multiple products, you will need to create additional components.
Product Hero
A preconfigured component used to display a single product, similar to how it is on the PDP. The information displayed here is inherited from the selected product’s content in Hygraph.
Type
Currently there is only one option available, simple. The shop uses the linked product for what is shown.
Product
Manually select a product from the available products. Note: please do not create products in Hygraph, products must be created in commercetools. A pop-up will open, where you can search and filter all available products. Select the desired product by clicking the link icon. Note: you can only select one product in this component.
When you want to feature multiple products, you will need to create additional components.
Products Block
Displays a selection of products relevant to the page.
Slider Type
Background — Give the section a specific background.
Plain — Give the section a plain background.
Tile Type
Horizontal — Align the tiles horizontally.
Vertical — Align the tiles vertically.
Title
A title for the section that will be displayed on the page.
Product selection
What kind of products are displayed in this block. Search or select an option.
Category — Select a category for which all the contained products will be displayed.
Custom products — Select each individual product that is to be displayed.
Product Listing — Use an existing Product Listing (its filter presets, filter query, and sort).
Recommended products — Display products that have the Recommended tag associated with them.
Background Image
Overwrite default background image for slider type "background".
Hide view more
Hide the “view more” button on this block.
Product block type
Choose the product block type for this section.
Recently Viewed Slider
Displays a list of recently viewed products, determined by the history of the user.
Slider Type
There are two options.
Plain — As shown in the example above, this type is displayed as an overlay.
Background
Review Block
A section that displays reviews from customers.
Review Type
Pick how this block should display reviews: Store (Trusted shops/ Trustpilot) or Product specific.
When no selection is made, by default the store review along with three recent reviews will be displayed.
Product — Changes the layout of the Review Block component to focus on a specific product.
Store — Changes the layout of the Review Block component to display only the total review of the store.
Product
Optional. Used when the block should focus on a specific product.
Image
Optional image for the block.
CTA button
Optional call-to-action button on the review block.
Text Section
Use this section for simple text with a title.
Alignment
Specify the alignment of the text section.
Text Components
Use the + Add component.
When there is already an existing Text component the text changes to + Add another component. Either way a drop down will appear with two options. Existing Text components can be reordered by dragging and dropping when clicking and holding the six dots.
Title — A simple text field for the heading of the text section.
Variant — Select from the heading tags which refer to the HTML counter part which in turn is targeted by the CSS styling on the website.
Text Alignment — Specify the alignment for the title within the text section.
Color — Select a color the title will have.
This may be overwritten by page-specific styling on the shop.
Rich text — A rich text field, that supports placeholders and images.
The intention of the text section is however to enter simple text, there are other components which are better suited to displaying images.
Tier Offer Section
This component allows for a specific tier of a product to be featured on a page.
Product
Manually select a product from the available products. Note: please do not create products in Hygraph, products must be created in commercetools. A pop-up will open, where you can search and filter all available products. Select the desired product by clicking the link icon. Note: you can only select one product in this component.
When you want to feature multiple products, you will need to create additional components.
Tier Offer Type
There are two options that can be selected.
Default — will use the tenants Variant Preselection to target the standard tier for the product.
Subscription — Will instead target the subscription variant.
Display type
Choose how the tier offer is displayed on the shop.
Trial Offer Form
Configure a form to be displayed where a customer can sign up to participate in an offer.
Product
The form is only displayed if the product has a trial offer configured in commercetools. Manually select a product from the available products. Note: please do not create products in Hygraph, products must be created in commercetools. A pop-up will open, where you can search and filter all available products. Select the desired product by clicking the link icon.
Note: you can only select one product in this component. When you want to feature multiple products, you will need to create additional components.
Title
A localized simple text field to enter a title for the section.
Terms and Conditions
A localized rich text field that supports tables, images and code.
Button text
Text on the form’s submit button.
Show shipping logo
Show or hide the shipping logo on the form.
Top block
Optional content shown above the form.
Upsell
Optional upsell content on the form.
Vitamin Advice Section
This section is used to display all the Shigeru tests available on the tenant.
Show Cards as Grid
True or False toggle which determines whether the Tests are displayed in a grid fashion or just as a list.
Background Appearance
Choose between Plain or give a specific Background.
Card content is configured on Settings vitamin advice, not only on the section.
Also on Pages
Pages can also include Hero Banner, Embedded Video, Form, Iframe, Product Comparison, Social Feed, and YouTube Feed. If you see them in + Add component, they are sections the shop renders.
Publish linked products, blogs, authors, and assets before the page. See Page revalidation. Do not create products or categories from these pickers.