Blogs in Hygraph

This article explains how to view, create and edit Blogs in Hygraph. Blogs on Spectrum websites are informative articles that cover a specific topic and link to relevant products and categories.

How to configure

To view, edit or create a blog for one of the webshops, in Hygraph navigate to the Blog section, via the left menu pane select Content, and in the secondary left menu pane under the DEFAULT VIEWS section, select Blog.

To create a new blog, use the button on the top right section of the screen.

Fields

The Blog model in Hygraph contains several fields that can be configured.

Tenant

Select the appropriate tenant.

Storefront

Then when applicable, choose the appropriate storefronts. This blog only appears on the webshops you select. If you leave a storefront unselected, it will not show there.

URL path

This field is disabled, because it is an autogenerated field based on the URL identifier in the SEO fields. This field cannot be changed. On some tenants the path includes parent Blog Types (first linked type on the blog). Exclude from search is supported for blogs in Algolia.

SEO

The Search Engine Optimization (SEO) field is made up of multiple sub-fields. To learn how this works, read SEO.

Title

The main title of the blog, a localized simple text field. Displayed above the Image on top of the blog page on the website. Keep the Title as short as possible, refrain from large amounts of text and always check the display of on the mobile version of the webshop.

Subtitle

A localized simple text field. Displayed under the title, can give extra context to the title.

Filter Query

The search query will be applied behind the scenes to add recommended products to the page. You can use a search term like you use it in the search bar on the website. For instance "vitamin" will give you products with "vitamin" in the name or with the category "vitamin". The products that match the filter query are shown on the right side of the blog page on the website as recommended products.

This is a dynamically generated list, of which the products may change depending on if they match the term entered in the filter query field. Using the “quotation marks” you can specify products containing the quoted text. To recommend a single product specifically related to the blog, use the Recommended Product component. It is best practice to enter a related term so that relevant products are displayed.

Image

The main image of the blog article. Only one image can be used. Additional images can be embedded in the main content of the blog in the Description component, or in additional using objects in the component component. The main image of the blog is displayed underneath the title and subtitle, above the main body of content.

Authors

Link author(s) to a blog. Select from existing authors or create a new one. On the website this is displayed underneath the Titles and Subtitle, and above the Image, see Authors.

Related Blogs

Link other blog articles to this one. Select existing blogs or create a new one. On the website they appear as Related articles: a list under the article on mobile, and a slider below the article on larger screens. Leave the field empty and that block stays hidden.

Related Categories

Related Categories (relatedCategories) — optional category links. Use if the shop template shows them.

Short description

Intended to summarize the article as a bold section of text. Please do not add images to this field. As it is not supported. Displayed on the website underneath the image.

Description

This is the main text of the blog page. It is a rich text field that supports images. It appears on the website underneath the Image and Short Description.

In theory, there is no real limit to the amount or length of content.

Publication Date

If this date is not filled out, then the blog's creation date will be used. When selecting the field a date picker appears.

Last updated date

Last updated date (lastUpdatedDate) — optional. When set, cards and schema.org can show an “Updated” date.

Blog Types

This feature allows the blog to have a different layout on the website. Types this article belongs to. First type can affect the URL path. Types also change listing templates (including the Author grid). See Authors.

Blog Layout

Blog Layout (blogLayout) — storefront layout, including a full width body (no product column).

Components

Allows the addition of a large number of components. Here is an example of an FAQ section. Where each question and answer can be configured. And this is how it appears on the website.

See Sections, Components & Elements. Extra blocks sit under the body (FAQ, CTA, text, product blocks, and more). The FAQ screenshots above are a FAQ section in this list.

Recommended Product

If a product is selected, a sticky add-to-cart with this product is displayed on the blog page. On the website this sticky add-to cart stays at the bottom of the page, and when maximized it looks like this.

Save & Publish

You may save, and publish later, 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.

You may also configure a 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.

Once configured, it will be visible in the info panel on the right-hand side of the screen. See also Save, Publish & Schedule and Page revalidation. Publish linked authors, products, and assets before the blog. Published blogs are indexed as Content in Algolia after publish/build.