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.

4. In the Setup content structure modal, enter the name BlogContent in the group name field.

4. 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
Content: Richtext
url: Text

6. Click SAVE.

Creating the BlogContent Section

The BlogContent Section accepts a prop called content that will receive the data from the content Blog CMS group variable.

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

import './styles.css'

const BlogContent = ({ content }) => {
  return (
    <article className="BlogContent">
      <RichText source={content} />
    </article>
  )
}

export default BlogContent

To customize the styles from the RichText content, do something as the example below:

.BlogContent {
  width: 80em;
  margin: auto;
  padding: 2em 1em;
}

.BlogContent p {
  margin: 10px 0;
}

.BlogContent img {
  width: 100%;
  height: auto;
}

Creating the Blog Template

1. Navigate to templates.

2. Select Add Template.

3. Enter the template name. We will use the name Blogs in this example.

4. Select Blog in the dropdown menu to connect to the blog content group.

5. Select a frame if desired.

6. Click ADD TEMPLATE. You will be directed to the XM.

7. Add the BlogContent section created in the previous instructions.

8. Connect the content variable from BlogContent to the Blog CMS group one.

9. Add any additional desired sections.

10. Click SAVE.

Pages will now automatically be created for all items in the Blog content group.

Creating the BlogFeed Section

📘 Important

We need to change the Template's URL for this to work properly:

Navigate to the Templates list page using the right side menu.
Locate the Blog Template and click on the 3 dots next to the Template's name.
Click on Edit custom URL.
Change the format to: {{contentGroupName}}/{{contentItem.URL}}.
Click SAVE .

For more information about custom URLs, check the Custom URL Structure docs.

The BlogFeed Section will take an array of blog posts and map them as result.

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

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/${blog.url}`}>{blog.name}</Link></h2>
            <ResponsiveImage src={blog.hero.src} alt="" />
          </article>
        ))}
      </div>
    </section>
  )
}

export default BlogFeed

Creating a Blog feed page

Navigate to Pages.
Select ADD PAGE.
Enter the page name. We will use the name Blog in this example.
Enter the page path.
Choose a frame if desired.
Select ADD PAGE. You will be directed to the XM.
Click the + and select the BlogFeed Section to add it your page.
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.
Repeat the step number 7 to add any additional sections desired.

10. Click SAVE.

Updating your Blog

Adding a new blog article

Navigate to the CMS
Navigate to the blog content group.
Click add content item to add a new entry to the blog content group.
Enter content for the following fields:

NAME: This field is the throughput to the app and used to generate the page path/URL.
Sentence or title case can be used and the app will format it to be URL friendly for the page path/URL.
CONTENT: This is the content used on the blog entry
FEATUREIMAGE: This image is used as the header of the blog article and used for the link on the /blog page
AUTHOR: The name of the author displayed at the start of the blog entry
DATE The article date displayed at the start of the blog entry

5. Click SAVE.

Editing blog content

Navigate to Content.
Search for the blog entry you wish to edit.
Select the entry containing content you wish to edit.
Make changes.
Click SAVE.

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.

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

Publishing

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
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.

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