PageBuilder - Template Branch Preview

Using branches in PageBuilder is a helpful tool that allows you to make changes to your website, or a particular webpage, in a “sandboxed” environment, so that there is no impact on your production website. This capability allows you to create new pages or layouts and preview them before they go live on your production website. In addition, when your updated site is ready to go live, you can simply point and click to push the changes live, and have the peace of mind to be able to easily undo those changes if there is a problem.

On this Page

Creating a New Branch

To create a new branch, click the branch status box in the upper left corner of the content management page. If you have never created other branches, or you are working on your production website, the status will show Production/Primary.

PB Template Branch Pic 1.png

In the slide out that appears, click on Create New Branch.

In the Create Template Branch box that opens, you can choose a color to associate with the new branch. You will also give the branch a name. Last, you will select where you wish to copy the branch from. In the example below, we entered Holiday Layout in the Branch Name field, and selected the color red to correspond to the name. Because we have not created a branch before, we are copying this branch from the Production(Primary) branch. When finished, click Create.

PB Template Branch Pic 2.png

When the page refreshes, you will see the new branch is shown as the branch you are working on. Clicking the branch status box again opens the slide out and shows you the two branches to choose from.

Note

Creating a template branch creates a new "copy" of your website, with all of the page templates. It does not include things like products, or payment or shipping settings. You can create an unlimited number of template branches.

For a deeper dive into template branches, please review the Template Branches Overview document by clicking here.

Preview With Template Branch Widget

To preview the branch you are working on, you can use the Template Branch Widget.

There are two ways to preview your site. You can click the eye icon in the upper right corner of the admin, which opens your site in a new browser tab.

PB Template Branch Pic 3.png

Caution

You cannot access the eye icon to preview your site if you are working in PageBuilder.

Alternatively, you can choose a webpage from the Content Management screen batch list, and then click the Preview button.

PB Template Branch Pic 4.png

However you choose, once on the preview screen, there is a widget located in the lower left of the screen.

pb_template_branch_pic_5.png

Clicking the widget opens a pop out that displays the branch you are working on. It also shows your Production (Primary) branch and any other branches you may have. You can easily switch back and forth between branches by selecting the desired branch from the list.

Previewing Site at a Future Date with Widget

If you click the Edit link next to "Previewing Now" you can choose a future date to preview in the box that opens.

pb_template_branch_pic_6.png

This can be helpful if you are, for example, working on an updated Storefront page for the holiday season, and especially if you have scheduled components to go live on certain dates and times.

Previewing Site at Future Date with PageBuilder

You can also preview sites at future dates through PageBuilder. To do so, in the upper left corner where your active branch displays, click the clock icon next to it.

PB Template Branch Pic 5.png

In the drop down that opens, click the Edit link. In the box that opens, select the date and time you wish to preview, then click Done.

After that, PageBuilder lets you know that you are previewing the page at a future date with an announcement box at the bottom of the page.

pb_template_branch_pic_8.png

To reset the page, click the Reset to Now link in the announcement box, or the reload icon in the Preview Date/Time dropdown through the clock icon.

Next Section

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2021 Miva©, Miva Merchant©, MivaPay©, MivaCon© Miva, Inc. All Rights Reserved.