Install Page Builder example modules

Learning by example is one of the best ways to absorb the knowledge you need when learning new development tasks. We take that approach to heart and have tried to provide several example modules that focus on different areas of Page Builder development.

The Page Builder team members created these modules for educational purposes. They are not fully tested or guaranteed to work perfectly. However, we do our best to improve these examples and keep them updated with the latest releases of Page Builder.

You can find all our existing Page Builder examples in the https://github.com/commerce-docs/pagebuilder-examples repo on GitHub. The repo contains two types of example modules:

Extension modules
Custom modules

Extension modules

Extension modules are extensions of Page Builder's existing modules. Extending an existing module is often the best way to introduce new functionality to Page Builder. Our current extension modules are described here:

Banner Extension — This module shows you how to customize an existing content type: the Banner. This is the completed module featured in the documentation topic Extend an appearance. Created by Bruce Denham.
Banner Appearance — This module shows you how to add a new appearance to the Banner. This is the completed module featured in the documentation topic Add appearances. Created by Bruce Denham.
Forms Extension — This module shows you how to remove fields and fieldsets from Page Builder's built-in forms. Created by Bruce Denham.
Button Extension — This module shows how to add custom button types. Created by Bruce Denham.
Columns Extension — This module shows how to use breakpoints to control the responsive layout of columns. Created by Bruce Denham.
Deactivate PageBuilder — This example module shows you how to disable Page Builder for a particular page in Commerce, specifically Pages, Blocks, and Dynamic Blocks. Created by Bruce Denham.
Image LazyLoading — This module shows how to add lazy loading behavior to the Image content type. For this example, we use the lazysizes loader. Created by Bruce Denham.
Slider Extension — This module shows you how to add centerMode and centerPadding settings from the slick carousel used by the Slider. Create by Bruce Denham.
Text Extension — This module shows you how to customize the Page Builder's Text toolbar, integrate your own theme's typography, and add TinyMCE's code plugin to the toolbar so you can view the HTML code directly. Created by Bruce Denham.

Custom modules

Custom modules create new content types for Page Builder. Creating a new content type is required when you want to introduce a completely new type of content structure to Page Builder. Our current custom modules are described here:

Custom Quote — This module shows you how to create a content type for a customer testimonial. This is the completed Quote module featured in the documentation tutorial: Creating content types. Created by Bruce Denham.
Custom Homepage Grid — This module shows you how to create a content type that recreates the layout of the Commerce Luma-themed home page using a grid structure with grid items. Created by Dave Macaulay.
Custom FAQ — This module shows you how to create a content type for an FAQ page that uses an accordion for the questions and answers. Created by Igor Melnikov.