Settings
This article explains the Settings model in Hygraph.
The settings model in Hygraph contains a lot of important aspects that are used through out the whole website on various pages. Navigate to the Settings model by selecting Content in the left menu and then under ‘DEFAULT VIEWS’ select Settings.
Contents
- Localization
- Tenant & Storefront
- Shop Usps
- Logos
- Default Filtersets
- Subscription Info Modal
- Customer Service Card
- Vitamin Advice Settings
- Cart Recommendations
- Social Links
Localization
Like all models and content in Hygraph in the right menu pane, the Localization configurations are found. Using the localization feature in Hygraph it is possible to configure menu items for specific locales within the same Tenant and storefront.
Locales are added using the plus icon and removed using the trash-can icon.
When a Localization has not been created for a localization, it will display the plus icon and be greyed out.
Using the Eye icon in the localizations pane only effects the visibility of the fields that are altered within Hygraph, and this does not affect how the model is displayed on the frontend.
Tenant & Storefront
In Hygraph content from all tenants and storefronts on the spectrum stack can be viewed and edited. This can be very useful; it is possible to quickly copy existing content from other tenants and easily repurpose them. However, you must also be careful that you are creating or editing content for the correct tenant and storefront. Just like many other models in Hygraph, the Menu model has a tenant and Storefront field.
Please note changing the values here does not simply select the tenant or storefront you are editing in but changes the actual location of the content. Only one tenant can be selected, however models may be assigned to multiple storefronts.
Shop Usps
The text that appears at the very top of the page on the website
It is a localized field whose order in Hygraph directly reflects the order on the website. Drag and drop to change the order.
Keep the text as short as possible, and be sure to test changes on the mobile version.
The mobile version of the website will display one Usps at a time, cycling through the entries in the list.
Copyright
Short sentence usually displayed in the footer of the website.
Mobile Logo
If no mobile logo is provided, desktop logo will be used on mobile.
It is best practice to use SVG format assets.
Refer to Assets for more information.
Desktop Logo
Logo is used in many place throughout the website, for instance on the top menu bar.
It is best practice to use SVG format assets.
Refer to Assets for more information.
Shop Review Source
A drop down selection fields which specifies the source of reviews. Do not change this without consulting the Brand manager and IT department.
Shop Review Identifier
Enter the Value of the Shop Review Identifier. Do not change this without consulting the Brand manager and IT department.
Shop Review Channel ID
Only needed for Trusted Shops.
Trusted Shops Logo
When using Trusted Shops reviews, upload the Trustmark logo here.
Asset already exists, but when a new logo becomes available, it should be replaced in this field.
Default Filtersets
If a category does not have specific filtersets configured, then these default filtersets will apply.
See Filtersets for more information.
Login Usps
Localized text that appears in the checkout when a user is not logged in and enters an email address that is associated with an existing account.
Error Page Info Link List
A list of links to be displayed on the Not Found and other Error pages.
Product USPs
The USPs that are shown on a product detail page, Bärbel only.
Product Subscription USPs
The USPs that are shown on a product detail page that has subscriptions enabled, Bärbel only.
Subscription Info Modal
Configure the text shown in the informational pop-up for subscriptions.
On the PDP Or in the Cart:
There is a localized simple text Title field and Localized rich text Content section that can be configured in Hygraph.
Customer Service Card
Displayed in numerous places on the website.
This section uses a Icon Richtext Block component, which can contain multiple Icon Richtext components. The parent component can be given an icon. See: https://fontawesome.com/search
If left blank, it is now shown. Same for the title, if it is left blank nothing will be shown.
The title field is a localized simple text field that will be displayed has a heading in the component on the website.
Then the content within the component can be split into individual sub- components.
Each supports an icon and a text content section.
Footer USPs
USPs displayed in the footer of the website
A localized rich text field
Footer Logo Components
A section of the footer of the website that is used to display logos of quality labels and partners.
This section allows a logo and a link that user will be redirected to when clicked on.
Discount code field is open
A setting that determines the behavior of the discount code field in the checkout.
When it is set to false the user must first select to display the code on the website.
It is a required localized field, thus you can configure this setting differently between locales in the same tenant and storefront.
Club upsell settings
Only relevant for Baerbel Drexel
Vitamin Advice Settings
This section configures which Aiden and Shigeru tests are displayed on the Vitamin Advice test page.
This whole page is configured in the component in the settings model in Hygraph.
Vitamin Test CTA
This component configures the top section of the Vitamin Test page. Note that the fields are all optional.
Title
A simple text field, displayed on top of the Background image.
Text
A localized rich text field used for the main body of test within the cta
Link
A localized field to enter url that the user will be redirected to upon clicking within the CTA
Background Image
Select or upload an asset to be displayed as the background of the CTA.
Image Mobile
Select or Upload an alternate asset for mobile view.
Button
Create a button to overlay the CTA, which can support specific configurable behaviors, such as applying a discount code or adding a product to the cart.
Layout Settings
Configure additional layout settings for the CTA
Title
A required localized simple text field for the title of the section that is
displayed on the website’s vitamin test page
Description
A localized simple text field for the text section that is displayed on the website’s vitamin test page
Vitamin Test Cards
Use this section to configure the individual tests, each with their own card.
Card Type
There are two options to choose from.
Classic
Features a divided card with a top and bottom section
Background
Will use the image asset as a background, not currently used.
Title
A localized simple text field, displayed within the card
Image
Upload an image to display on the card.
Description
A localized simple text field that will be displayed on the card, please note that not a lot of text will actually be visible in the card
URL
A localized simple text field. Enter a URL where the user will be redirected upon clicking the tile. Typically, however the button is used for a redirect.
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
A CTA type button.
Link
Simple clickable link type button
Outline
A button that takes up the entirety of the section.
Primary
Intended to serve as the main focal point.
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 button. If you wanted to add multiple products, you must create a Bundle where the products are contained within.
Link
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 and value that the button will trigger in the frontend 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
Enter the URL of an icon selected from https://fontawesome.com/v5.15/icons.
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 Button should be displayed on the card. 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.
Icon
Add an icon to the Card.
This requires selecting or uploading an asset. As such it will use the selected assets localizations.
Layout Settings
Layout settings to define how the card should be displayed on the page. 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.
Cart recommendation settings
The settings for the cart recommendation slider
General Product FAQ
General product questions, shown on every PDP.
Interest Categories
On the confirmation page after checkout, users can select these categories as their interests. The answers can then be used for personalized marketing, for example.
Cart Recommendations
Configure the content of the recommended cart.
Products
The products to be displayed in the cart recommendation slider
Product Listings
The product listing to be displayed in the cart recommendation slider
Title
This title will appear above the recommended products slider on the cart page. If no title is provided, it will default to the title of the selected Product Listing reference (if applicable) or a static word.
Store Locales
Cart recommendations will show for the selected locales. If no locales are chosen, recommendations will show for all locales.
Social Links
The links to the social media pages for the brand.
The Social media Icons are automatically retrieved based on the URL. A localized field that supports external links. The order on the website can be changed by dragging and dropping the links in Hygraph.
Removing entries is done by clicking the three dots on an entry and the Remove.
Phone numbers
A localized simple text list field. NOT displayed on website, only sent to feeds and such. Example: +49 123 456789. Please also update in the Customer Service Card for visibility on website.
Removing entries is done by clicking the three dots on an entry and the Remove.
Opening hours
A localized simple text field for the Customer Service opening hours. NOT displayed on website but sent to certain feeds. Example: Mo-Fr 8am to 8pm. For visibility on website, please also update in the Customer Service Card.
Removing entries is done by clicking the three dots on an entry and the Remove.
Redirect Path After Bounce
Relative redirect path for users navigating back after their first page load.