BigCommerce’s PageBuilder doesn’t get talked about enough. It’s incredibly powerful already and I expect more updates to it in 2021.
This week I’ve been learning how to create custom Page Builder components and created an accordion widget to support features like FAQ sections of our customer sites.
What do you think?
What have you built?
Transcript
Hi. So this week I’ve been playing with Page Builder in BigCommerce. It’s a way of designing pages around the site. Whether that be a CMS page, like a homepage, or even product pages.
There are a bunch of widgets that are built-in. So if you look here, we’ve got, in the designer view. We can see the different widgets that come prebuilt in Page Builder that we can drag and drop into certain sections and then customize, which is really, really cool.
This is a feature that kind of came out this year. But it also allows developers to create their own widgets. So, I can really see how you could build out a site using a set of prebuilt components to allow customers to continue to manage their design. Converting pattern libraries into design systems that the client can, and merchant can carry on using.
So today I want to show you what I’ve been playing with this week to create a custom widget for an accordion. A common component that you’d see on a product page for frequently asked questions. So this is what our product page looks like in Cornerstone with some of the demo products out of the box.
I shall remove my banner and go down here. So over here, move my face out of the way.
We’ve got our accordion block, which can put in here. Now you can have widgets of type array, which enables you to build up lists of items. So here we have an accordion and our first tab, we’re going to ask “how much is delivery?” Great. To save time will just have short answers. Got some HTML there, quite common to add links and things like that into these sort of blocks too, for refund policies and things like that.
So that’s, let’s do that. “What’s your refund policy? find out here.” Cool. So I’ve got a couple of different tabs here. I’ll have a third for, for good luck.
“How much is delivery? What is your refund policy? How many cups does it hold?” I guess, of coffee to be specific. “Never enough”. Always need more coffee. Great.
It enables you also to configure settings. So I’ve pulled out some design settings that you can customize your accordion. So let’s say we want some rounded corners. I’m not going to customize more than that because my design skills leave a lot to be desired. So we’ve got our accordion that we’ve built up. We hit save.
Okay, cool. That all seems like it’s working. Then go over to our, refresh our page and there immediately available on the front end, we’ve got our accordion.
So I feel like that that was quite easy to do once I got familiar with the page builder schema.
I’m gonna be trying some more things out with it. See how far I can push it.
Would love to hear what your experiences are with page builder. Have you built custom widgets through the schema that they provide? I’d really like to see how far you’ve been able to run with it
Find this PageBuilder accordion widget on GitHub.
