CMS and Sections

A more flexible approach.

Getting Started

Creating the Blog content group

  1. Navigate to your Shogun Frontend store.
  2. In the sidebar, select Content.
  3. Click the Add content group button.
  1. In the Setup content structure modal, enter the name BlogContent in the name field.
  1. Select the + Add field button, enter the name, select the type, and click Add field.

Repeat to add the following fields with the labels and types below:

  • Name: Text (this field is created by default)
  • Date: Text
  • Author: Text
  • Hero: Media
  1. Click SAVE.

Creating Blog sections

The flexibility of this approach allows you to create sections for a variety of different types of content, such as images, videos, quotations, and headers, and arrange them as you choose in your blog article page. Below are examples of a few sections you might use.

BlogImage

import React from 'react'
import { ResponsiveImage } from 'frontend-ui'

const BlogArticleImage = ({ src, caption }) => (
    <section>
      <div>
        {!!src && (
          <ResponsiveImage
            src={src.src}
            alt={src.alt || ''}
            loading="lazy"
            width={src.width || 2048}
            height={src.height || 2048}
          />
        )}
      </div>
      <div>
        <span>{caption}</span>
      </div>
    </section>
  )

export default BlogArticleImage

BlogHeader

import React from 'react'

const BlogHeader = ({ name, author, date }) => {
  return (
    <section className="BlogHeader">
      <h1>{name}</h1>
      <span>By {author} - {date}</span>
    </section>
  )
}

export default BlogHeader

BlogText

import React from 'react'
import { RichText } from 'frontend-ui'

const BlogArticleRichText = ({ text }) => {
  return (
    <div className="BlogArticleRichText">
      <RichText source={text} />
    </div>
  )
}

export default BlogArticleRichText

Creating the Blog template

  1. Navigate to templates.
  2. Select Add Template.
  1. Enter the template name. We will use the name Blogs in this example.
  2. Select Blog in the dropdown menu to connect to the blog content group.
  3. Select a frame if desired.
  1. Click ADD TEMPLATE. You will be directed to the XM.
  2. Select Add sections to start building your page in the sidebar of the XM.
  3. Select Custom content section in the dropdown menu.
  1. Click SAVE.

Pages will now automatically be created for all new entries added to the Blog content group.

Creating Blog feed

import React from 'react'
import ResponsiveImage from 'frontend-ui/ResponsiveImage'
import Link from 'frontend-link'
import { useRouter } from 'frontend-router'

const slugify = string =>
  string.toLowerCase()
    .replace(/[^\w\s-]/g, '') // remove non-word [a-z0-9_], non-whitespace, non-hyphen characters
    .replace(/[\s_-]+/g, '-') // swap any length of whitespace, underscore, hyphen characters with a single -
    .replace(/^-+|-+$/g, '') // remove leading, trailing

const BlogFeed = ({ blogs = [], title }) => {
  const router = useRouter()

  return (
    <section>
      <h1>{title || 'Blog'}</h1>
      <div>
        {blogs.map((blog, index) => (
          <article key={`blog-item-${index}`}>
            <p><time>{blog.date}</time> - by {blog.author}</p>
            <h2><Link href={`/blog/${slugify(blog.name)}`}>{blog.name}</Link></h2>
            <ResponsiveImage src={blog.hero.src} alt="" />
          </article>
        ))}
      </div>
    </section>
  )
}

export default BlogFeed

Creating a Blog feed page

  1. Navigate to Pages.
  2. Select ADD PAGE.
  1. Enter the page name. We will use the name Blog in this example.
  2. Enter the page path.
  3. Choose a frame if desired.
  1. Select ADD PAGE. You will be directed to the XM.
  2. Click the + and select the BlogFeed section to add it to your page.
  3. Click on the BlogFeed Section to open it, and click on SELECT ALL under Blogs prop to automatically receive all the entries from the Blog CMS Group.
  1. Repeat the previous step to add any additional sections desired.
  1. Click SAVE.

Updating your blog

Adding a new blog article

  1. Navigate to Content in the sidebar.
  2. Select the blogcontent content group.
  1. Click Add content item.
  1. Complete the fields.
  2. Click SAVE.

A new blog page will be generated automatically.

Adding sections and content to the generated blog page

  1. Navigate to your store and pages in the sidebar.
  2. Locate the page generated for your new article. You will be directed to the XM.
  1. Add desired sections and complete section fields.
  2. Click SAVE.

Updating blog content

  1. Navigate to your store and pages in the sidebar.
  2. Locate the page generated for your new article.
  3. Select the section containing the content you wish to edit.
  4. Make changes any changes you wish.
  5. Add or remove sections if desired.
  6. Complete fields in the sidebar for any sections added.
  7. Click SAVE.

You will not be able to change the blog title. This must be done via the content item in the CMS.

Wrapping up

Adding a blog article to the blog feed page

This step is only necessary if you chose to add content manually when creating your blogfeed section. The blog feed will be automatically updated with new articles otherwise.

  1. Navigate to pages.
  2. Find the blog feed page.
  3. Click on the page row or click the edit icon.
  4. Click on the BlogFeed section.
  5. In the Blogs field click Add Value...
  6. Select the new blog article you created
  7. Click SAVE.

Publishing

  1. If you are happy with the blog article and feed pages in the preview, change the blog article page status to Draft to Ready to Publish
  2. Select View and Publish. You will be directed to a list of pages that will be updated upon publishing.

📘

Only page updates appear here. Updates to content or section code will not list affected pages, but these changes will be included.

  1. When publishing is complete, you will see a notification.

Did this page help you?