Introduction

The Page Builder allows you to create a preview which places your content, still editable in real time, into the header and footer from your Store. This allows you to get a complete picture of what your content will look like once it is published.

See the example below from Aurora Demo, showing the preview button you can use to turn this mode on.

What can you do?

While using this mode, it is not possible to edit the header or footer content, which is presented for your reference only, while still being able to edit the content specific to the entity you are working on at the time.

You can customise this preview to include (or not include) anything you wish.

Customising the Preview

The preview is managed using a Smarty Template found in your Front-end Templates in the following location:

/templates/<YOUR_TEMPLATE_DIR>/page_builder/previews/default.tpl.html

In the Aurora Demo Templates, this is found here:

/templates/example.com/page_builder/previews/default.tpl.html

This example is the best way to get started, so download the most recent file from the Aurora Demo Example Templates.

You may only configure one singular preview and its content must include the following in order to place your editor's content within it.

<!-- PREVIEW CONTENT -->

Please see the following example:

<div class="template_main">

  <!-- PREVIEW CONTENT -->

</div>

👍

Why not just use the Header and Footer templates from the store?

There are a few reasons for this, including but not limited to the following:

• It may be that you have code in your header and footer templates for things like tracking or merchandising that you do not want to see rendered in your Page Builder previews.
• Keeping the templates separate means that you are able to develop on and with this preview template with no risk to your Front-end, i.e. if you break the preview for any reason, it will not also break your Store!

Viewing Errors and Notices

In the event that there is a problem loading your preview template, Aurora will report this problem to you clearly when the mode is activated. Further to this, it will also do its best to continue to display the content in the editor for you to manage, so your users are inconvenienced as little as possible while you address the problem.