September 24, 2024

How To Create a BigCommerce Blog Template Using Shogun

Arrow pointing left
back to blog

about

Learn how to create a BigCommerce blog template using Shogun to scale content creation and drive organic traffic to your storefront.

the author

Adam Ritchie
Ecommerce Contributor

share this post

BigCommerce blogs offer numerous benefits — they are good for SEO, allowing you to attract more visitors to your site, and they provide you with more opportunities to promote your products, leading directly to more sales. 

Of course, you will need to put in some time and effort to consistently create high quality content if you want maximize this marketing channel. Making your blog successful requires a steady stream of high-quality content. 

Using templates will make it much easier to create all this content for your blog. In this guide, we’ll walk you through all the options for creating a BigCommerce blog template and help you choose the best approach for your particular needs.

Create page templates with ShogunShogun’s user-friendly visual editor enables brands to create page templates for their BigCommerce storefront to ensure a cohesive customer experience.Get started now

Use Pre-made BigCommerce Blog Templates

Shogun provides a number of different templates you can use to quickly set up a new blog post for your BigCommerce store

To access these templates, simply follow these steps:

  • After installing Shogun, log in to your BigCommerce account and select the “Apps” option in the left sidebar of the control panel. 
  • Open Shogun. 
  • Go to the “Pages” section of the Shogun app.
  • Hover your cursor over the “Build or edit a page” option, then select “Create a blog post”. 
  • Select whichever template you would like to use. 
It only takes a few steps to access Shogun’s blog templates.

There are a number of blog post templates to choose from on Shogun. The best template for your blog will depend on a number of different factors, such as the visual brand you’ve already established for your store and whether you want to add any extra features to your posts.

For example, BigCommerce stores in industries that prioritize professionalism, such as healthcare or industrial supplies, may want to choose one of the more clean, streamlined templates. Such a design will reflect that you take your work very seriously. 

Some Shogun blog templates are clean and streamlined.

On the other hand, BigCommerce stores in industries that prioritize creativity, such as clothing or cosmetics, might prefer a template that’s more eye-catching and colorful. These designs are a great match for stores that have already established a loose and fun visual style. 

Some Shogun blog templates are fun and colorful.

Also, if you’re planning on promoting products in your blogs, some of the templates conveniently come with a featured products section already included. This will allow customers to add items to their cart directly from your blog posts.

Some Shogun blog templates already include a section for promoting products.

Once you’ve chosen a template, all you need to do is swap out the placeholder text and images with your own content. You can also adjust the styling of each element on the page as well as add and remove any elements as needed.

Create a Blog Template from Scratch Visually

If you don’t want to use one of the available templates, you don’t have to. Shogun also allows you to make your own blog post templates from scratch. 

Selecting this option will open up a blank page in Shogun’s visual editor. There, you will find several tools that you can use to whip up your template, including the elements library, brand styles, and Shogun Insights.

Elements Library

The elements library is the cornerstone of Shogun’s visual editor. It includes dozens of pre-made features that you can add to the page with just a couple clicks. 

There is a wide variety of customization options for each element, and you can use the visual editor’s grid tool to arrange the elements however you want on the page. 

The different types of elements available include:

  • Structure: Add structural features such as containers, columns, sliders, tables, tabs, and accordion menus.
  • Content: Add different types of content to the page, such as text, icons, images, video, and buttons. 
  • BigCommerce: This type of element pulls product data (images, prices, inventory, etc.) directly from your BigCommerce account, so there’s no need to input these details manually. You can add a box to promote a single product or a section to promote an entire collection. 
  • Forms: Blog posts can also be used to collect contact information (for example, you could ask visitors to provide their email address in order to sign up for your newsletter). This type of element includes form fields, dropdown menus, checkboxes, radio buttons, and submit buttons, allowing you to build your own custom forms.
  • Social: Add social media buttons to make it easy for visitors to share your blog posts. You can insert an Instagram feed into your post as well. 
You can use the elements library to add a number of different features to your BigCommerce blog template.

Brand Styles

In addition to saving time, one of the main benefits of using templates is that it improves consistency, and you can use Shogun’s brand styles feature to improve consistency even more. 

Indeed, this feature allows you to choose your own default fonts and colors for your headings and body text. If you had to configure these settings manually every time you made a BigCommerce blog template, there’s a good chance that you would sometimes mess up and use the wrong option on accident (picking the exact right color each time would be particularly tricky). The brand styles feature eliminates this risk completely.

Use Shogun’s brand styles feature to help keep your page designs consistent.

Shogun Insights

After you finish the first draft of your BigCommerce blog template, you can check Shogun Insights to see if there are any improvements that you may be able to make. 

This tool will grade your page according to four different metrics: accessibility, best practices, performance, and SEO. A score of 100 means no changes are needed. If the score isn’t perfect, Shogun will tell you exactly what’s wrong and how to fix it. 

Here are a few of the potential issues that may be flagged by Shogun Insights:

  • Images aren’t responsive: These days, most web traffic comes from mobile devices rather than desktops and laptops. If your images aren’t responsive — meaning they don’t automatically adjust to the size of the visitor’s screen — then your site may be all but unusable for a large share of your visitors. Thankfully, this issue can be solved in Shogun by simply enabling the “Responsive image” option in the settings of any image element. 
  • Background and foreground colors don’t have enough contrast: This can make your content hard to read, especially for visitors who are visually impaired. If you get this alert in your Shogun Insights audit, you’ll need to increase the contrast ratio to at least 4.5:1 for small text and 3:1 for large text.
  • Font sizes are too small: Another common issue for visually impaired internet users, you can address this alert by making 60% or more of your page text at least 12 px. 
  • Tap target sizing too small: Yet another accessibility issue you need to look out for is making sure your tappable elements, such as buttons and checkboxes, are large enough to easily tap. These elements should be at least 48 x 48 pixels and have a decent amount of space between them. 
  • Heading order issues: Proper use of the H1, H2, H3, etc. tags will make your blog posts easier to navigate.

Once you’ve achieved an overall score of 100 on Shogun Insights, you can be confident that your blog template is as good as it can be.

Use Shogun Insights to discover new ways to improve your blog template. 

After you’re done making edits to the page, open the “…” menu in the top-right corner of the visual editor and select “Save as template”. You can also use this process to make optimized templates for product pages, landing pages, and any other type of page as well.

You can turn any Shogun page into a reusable template.

Custom-code a Blog Template from a Mockup or Design

If you can’t find exactly what you’re looking for in the visual editor, you can always add your own options to the elements library with Shogun’s Custom Elements feature:

  • Go to the “Developer tools” section of the Shogun app. 
  • Select “Custom elements”.
  • Click on the “Create new…” button.
  • You can use HTML, CSS, and JavaScript to create your Custom Element. 
Use Custom Elements to add your own features to Shogun.

This tool is especially useful for development teams who are tasked with translating a mockup into a reusable template. The pre-made options available in the visual editor might not cover everything that your mockup designers come up with, but Custom Elements gives you complete control over the look and functionality of your blog post templates, right down to the last pixel.

Scale Template Creation with Saved Snippets

Finally, it’s worth noting that you can use Shogun’s snippet feature to save even more time when creating your BigCommerce blog template.

You can turn any piece of content that you make in Shogun into a reusable snippet. In other words, you’ll be able to save sections of pages and reuse them on other pages. 

This is helpful for when you need to create slightly different designs for certain types of blogs. For example, you may want to make separate templates for blogs announcing product launches and blogs about other company news — in this case, you can use snippets to quickly add all of the features that these two templates share, then use the elements library to create whatever else you need for each template.

You can save any content you create in Shogun as a reusable snippet.

You don’t need to take our word for it — Lyre’s is just one of the many BigCommerce brands that has successfully used Shogun to make their content creation process more efficient. Overall, they built over 680 pages with Shogun and saved over 100 hours of development time compared to their previous system.

With the help of Shogun’s templates, visual builder, snippets feature, and other powerful ecommerce tools, you should be able to see similar results for your store as well.

Create page templates with ShogunShogun’s user-friendly visual editor enables brands to create page templates for their BigCommerce storefront to ensure a cohesive customer experience.Get started now

You might also enjoy

Get started for free

Get hands on with everything you need to grow your business with a comprehensive suite of tools.
Start now
Arrow pointing up and to the right Arrow pointing up and to the right