Getting Started
Creating the Blog content group
Navigate to your Shogun Frontend store.
In the sidebar, select Content.
Click the Add content group button.
In the Setup content structure modal, enter the name BlogContent in the name field.
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
url: Text
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
Navigate to templates.
Select Add Template.
Enter the template name. We will use the name Blogs in this example.
Select Blog in the dropdown menu to connect to the blog content group.
Select a frame if desired.
Click ADD TEMPLATE. You will be directed to the XM.
Select Add sections to start building your page in the sidebar of the XM.
Select Custom content section in the dropdown menu.
Click SAVE.
Pages will now automatically be created for all new entries added to the Blog content group.
Creating Blog feed
📘 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.
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 to 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 previous step to add any additional sections desired.
Click SAVE.
Updating your blog
Adding a new blog article
Navigate to Content in the sidebar.
Select the blogcontent content group.
Click Add content item.
Complete the fields.
Click SAVE.
A new blog page will be generated automatically.
Adding sections and content to the generated blog page
Navigate to your store and pages in the sidebar.
Locate the page generated for your new article. You will be directed to the XM.
Add desired sections and complete section fields.
Click SAVE.
Updating blog content
Navigate to your store and pages in the sidebar.
Locate the page generated for your new article.
Select the section containing the content you wish to edit.
Make changes any changes you wish.
Add or remove sections if desired.
Complete fields in the sidebar for any sections added.
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.
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.