Try our new AI assistant by clicking the chat icon in the lower right corner.


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

Note

For a deeper dive into Version Branching in the Miva admin, visit the Version Branching document.

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.

Pushing a New Branch Live

Once the branch you are working on is complete, you can push the branch live with a few clicks of your mouse.

Note

The following process is demonstrated in the video above.

When you are finished in Page Builder, click the Save button and then exit out of PageBuilder by clicking the X in the upper right corner.

Then, on the Content Management page, click the three dots menu icon right below the branch indicator. You are given three options in the dropdown menu: Merge, Copy or History. In this case, we will select Merge.

Merge is how any updates or changesets are added to the selected branch. In the dialog box that opens, you will select the Primary branch for your website, then select the changes that you want to merge to the site. Then click Continue.

Next, a note is required to complete the merge. This is a great way to note to future users or yourself, what was changed.

Then, back on the Content Management page, click the Primary Branch in the indicator area, and click the Eye icon to preview the new page.

Important

If you need to, the History function noted above will allow you to roll back changes you have made. Just click History, then choose the change before the update, which will revert the page back to the way it was before you merged it.

For additional information on template branches, click here.

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.