How to Create a Blog on BigCommerce

Dave Dave
5 minute read

In this guide, we’ll show you how to add a fully functioning blog to your BigCommerce store with just a few lines of code.

BigCommerce is a tool for creating online stores. Alongside its roster of powerful tools for building and maintaining a store is a basic blog feature. However, if you're looking for a little more oomph... or you'd like to allow contributors to create blog content, you've come to the right place. Using a tool such as DropInBlog means you can safely give content creators access to submit blog posts while other team members have access to your store admin and inventory... along with a host of powerful blogging tools.

Prerequisites

You’ll need to create a DropInBlog account, which you can do for free with a 14-day trial. And you’ll need an existing BigCommerce account and store.

Deactivating the BigCommerce default blog

As previously mentioned, BigCommerce already comes with a basic blog feature built-in. To prevent any issues, this blog feature needs to be deactivated. Log into your BigCommerce account and navigate to your default blog by clicking Storefront and then Blog in the main sidebar. 

Use the Blog Visibility toggle to prevent the blog from being shown on your store. Turning off the visibility will make sure nobody stumbles upon the default blog by accident.

Next, open the blog settings by clicking the button containing the 3 dots icon (•••). Here you’ll need to rename the now unused built-in blog to free up the namespace, so that the name Blog can be used for your new DropInBlog powered blog. In my case, I’ll be renaming it to Old Blog. Once changed ensure the Blog URL has been updated as well, you can amend this manually if it hasn’t already.

Click Save Settings in the bottom right once you’ve made your changes.

Creating a blog page

To create a new page click on View Store in the main left-hand sidebar, which will show you your store, and then find the link to Design this page in Page Builder which will be in the top right corner of your browser.

BigCommerce page builder button

In the Page Builder view, you can add pages and widgets to your store. Use the dropdown in the top left corner to Create a New Page.

New page dialog

Name your new page Blog, which should also be reflected in the Page URL. Again you can update this manually if you wish. Ensure the checkbox is checked to show the page in the main navigation and click Create page. You’ll then be shown the new page along with a space within it to add widgets.

Adding your embed code

In the Page Builder sidebar select and drag the HTML widget onto the page. Once the widget is dropped onto the page the sidebar will show a code editor for the widget, here is where the DropInBlog code will be added.

New page widget area and HTML widget

Open a new tab, navigate to DropInBlog and log into your account. After logging in, click Code & Layout in the main navigation. Copy the code shown in Step 1. It will look something like this:

<script>
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
</script>
<script src="https://io.dropinblog.com/js/embed.js"></script>

Switch back to BigCommerce and paste this code into the HTML widget code editor (replacing the code that is already in the editor). Go back to DropInBlog and copy the code from Step 2:

<div id="dib-posts"></div>

Finally, switch back to BigCommerce and place this additional line of code below the code from Step 1. Click Save HTML to save your changes.

Publishing your new blog

Now that your DropInBlog blog is appearing on your site you need to modify your blog settings to account for its new home before publishing it live to your store. 

Within your DropInBlog account, navigate to Settings and update the Blog URL field with the URL of your new BigCommerce blog page. If you’re not sure what the full URL is you can open your BigCommerce site in a new tab, navigate to your blog page, and check the address bar of your web browser. Click Save all changes once you’ve added your new blog URL.

DropInBlog blog URL Settings

Finally, switch back to BigCommerce and click Save in the top right corner of the Page Builder view to publish your new blog. Test out your new blog by clicking the store icon in the bottom left of the Page Builder and navigate to your blog page and the listed posts.

Mission complete! ✨

Tips for using BigCommerce

When creating a new page in BigCommerce certain themes tend to add a level 1 heading to the top of the page. You’ll notice that DropInBlog also creates a level 1 heading. You can either remove this in BigCommerce or in DropInBlog. To remove it within DropInBlog navigate to Settings and down to the Home Page Heading field, leaving this field empty will stop the heading from appearing.

If you still need some assistance with getting set up please do get in touch and we’ll be more than happy to help out. ⛑

Get started embedding a blog into your website right now

Try It For Free