Update: We now have an official BigCommerce App!
You can just go directly to our App in the BigCommerce App Store to do the install in a few clicks.
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.
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.
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.
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.
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
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:
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.
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. ⛑