• Miva Docs
• Reference Guide
• Upgrading to PageBuilder

Upgrading To PageBuilder

Released in 10.05.00

Miva’s PageBuilder experience is part of the 10.05.00 release. All customers who upgrade via the streaming update system will automatically get access to PageBuilder to create new content, marketing and landing pages.

There is nothing you need to do in order to start using PageBuilder!

The upgrade process does all the setup for you automatically so you’re ready to use PageBuilder to create new pages immediately with no template changes required.

On This Page

• Upgrade Steps
• Adding PageBuilder To Your Storefront Page
• Adding PageBuilder To Other Pages
• Customizing Base Component CSS

PageBuilder Upgrade Steps

The upgrade process for 10.05.00 performs the following steps for you automatically:

1. 1. Installs the flex module and default components.
2. 2. Creates the four default layouts with theme specific templates (Blank, Storefront, Marketing Layout 1, Marketing Layout 2).
   • If you’re using Shadows or Genesis, a Shadows- or Genesis-based template will be used.
   • If you’re using any other themes, a generic layout page template is created that is theme independent.
3. 3. Installs required CSS and JS needed for the Page Builder Components to work.

Default Layouts

The results of all these steps is that once you’ve installed the updates for 10.05.00, there is nothing you need to do to start using PageBuilder for new pages. Just navigate to User Interface -> Content Management and click Create Page to get started.

Adding PageBuilder To Your Storefront Page

What If I Want to add PageBuilder to my Homepage and Other Existing Pages?

You’ll likely want to use PageBuilder on your Homepage and other pages to make it as easy as possible to update content on all your pages. There is some manual work and template changes required in order for you to use PageBuilder on existing pages.

The default PageBuilder pages for a new site built on Shadows include:

• Storefront – SFNT
• Category Display (header/footer) - CTGY
• Product Display (header/footer) - PROD
• Basket Page (header/footer) - BASK
• Search Results (header/footer) - SRCH
• Product List (header/footer) - PLST
• Our Catalog (header/footer) - CTLG (Shadows Only)
• About Us – ABUS
• Privacy Policy – PRPO
• Shipping & Return Policy - SARP
• Contact Us (header/footer) - CTUS
• FAQs (header/footer) - FAQS

Adding PageBuilder to your Storefront Page

Using PageBuilder on your homepage requires two manual changes:

• Assign "Flex" Item and “Sequence” Item to your SFNT page.
• Replace your existing content on the page with <mvt:item name="sequence" /> (this is what controls where the PageBuilder Components will be output).

Here are the recommended steps to accomplish above:

1. Create a new template branch.
2. Edit SFNT and perform the two actions outlined above.
3. Edit the page in PageBuilder and add the component to your page and customize your content.
4. Finally, once you’re ready to push your changes live, you can merge your changes into Production using the Branch Merge features.

An alternate way to accomplish the four steps above would be to start with a Layout and copy over your existing SFNT page. If you want to start with an existing Layout, so you’re not starting from a blank page, you could instead create a SFNT-NEW page starting from one of the existing layouts provided. Once the new page has been completed, use the Copy Page feature to copy it over to SFNT. Keep in mind that using this page copy, will also copy things like page title and meta tags so you want to ensure you don’t accidently overwrite these with blank/incorrect values.

Adding PageBuilder To Other Pages

Adding PageBuilder Header/Footer to Other Content Pages

The final step, which is optional, allows you to use page builder components in the header/footers of pages like CTGY, PROD or BASK.

1. Import the following XML file to create the Sequence Header/Footer and Assign the flex/sequence items to the pages listed above.
2. Manually add the Item tags below to the header/footer of each page.

XML File To Import

Item Tags to Add to Pages




Template Changes: The "header_sequence" and "footer_sequence" items should typically be placed right below and above the global header and footer, respectively.

Customizing Base Component CSS

Each of the components inherits some CSS styles from mmx-base/styles.css. This CSS file can be edited in the admin under User Interface -> CSS Resources to match your current store’s theme (button colors, etc). Ultimately, it is recommended to have a developer go through and fine tune the variables, CSS properties and fonts for your site however, just changing .mmx-theme--light's --color-primary-bg from var(--black) to your brand’s hex-color will go a long way toward matching your store’s theme.