The Page Builder for Zipify Pages can be accessed by clicking on a page's name from the pages tables in a corresponding page section:

Once you do that, you will be taken to the Page Builder as seen below:

This is where all of the designing, editing, page building, previewing, updating and publishing of pages is performed!

A page Section consists of multiple different Elements (image, button, text, etc) arranged in Rows and Columns to achieve a desired layout. When you add a new section, the rows, columns and elements will be included in predefined positions. The section can then be edited as-needed using the page builder.

For a new blank page, click either "Explore Sections" to open the prebuilt Sections Library or "Add Blank Section" to add a blank section you can add an element to:

For a page Template or a page that already has sections included, click on an existing section and then on the "Add Section" button above or below the section where you want a new section added:

Then make your selection from the Sections Library where you can:

Each Section has Appearance Settings which can be adjusted on a section-by-section basis. A Section's settings can be accessed either by clicking the ✏️ button in the top-left corner of the section (1) or in the sidebar of the builder (2):

The Settings that can be adjusted for each section are as follows:

See this article for more details on working with Sections.

📝Sections generally stack left-to-right on Mobile/Tablet (portrait) view. A mobile stacking order setting is included in the Alignment settings for the Row element so you can change the stacking order if desired:

Elements (image, button, text, etc) can be added and arranged in Rows and Columns within a Section to achieve a desired layout. When you add a new section, the rows, columns and elements will be included in predefined positions.

To add additional element(s) to the section, first click on an existing element and then click the ➕ sign above or below the existing element, depending on where you want a new element added:

That will invoke the "Add Element" popup where you can choose from a variety of elements to add:

Select the desired element by clicking on it to add it to the section:

To remove an element from the section, first click on the desired element. Then click the 🗑️button in the element settings:

Elements within the same section can be rearranged and moved to different positions via drag & drop. You can also drag & drop elements from one section to any other section on the page!

To move an element to a different position within the section or to a different section, first click on the element you want to move. Next, left-click and hold on the move button in the element settings:

Once you start to move the element, visual drop zones will be shown to indicate where the element can be moved to, which is generally above or below any other existing element within the same section or in a different section. Drop the element into the desired location to move it:

Most Sections consist of a single Row and multiple Columns (up to 12 per Row) within the row to achieve the desired layout. The "Image + Text + Button" section shown below for example consists of 1 row and 2 columns within the row:

The width of each column in a row can be adjusted using the slider action available between columns. Content included in each row adjusts dynamically based on the set column width:

By clicking into the Row settings you can:

In the "Column Settings" tab of the Row, you can:

In the "Alignment" tab of the Row, you can:

In the "Background" tab you can edit the Row:

For both options, you can choose colors using the color picker and slider or by entering a specific Hex or RGB color code in the input field. Transparency is adjustable with the slider or by setting an Alpha value.
​
For Gradient, you can also set the angle to control the direction of the color transition across the background. This angle, measured in degrees, adjusts the gradient direction as follows:

Changing the angle gives you greater control over the gradient's visual effect and orientation.

2. Background Image - Set a background image for the Row.
​

Additional Settings for the Row such as:

...include common options and settings available for most page elements. For more details on each setting, click here. These options allow you to apply extra styles and adjustments to fine-tune the Row as needed on each device type:

Columns within a Row also have their own set of independent Settings as well, which can be adjusted by clicking on the Column element:

In the "Layout" tab you can set the "Scroll Actions" for the column:

In the "Background" tab you can edit the column's:

In the "Border" tab you can edit the column's:

In the "Box Shadow" tab you can edit the column's:

In the "Spacing" tab you can edit the column's:

The Sidepanel can be expanded or contracted as needed, to give more or less on-screen real estate for editing. To contract the panel for more editing room, click the ◀ button located on the side of the panel. To expand the panel to access the sections list and other settings, click the green ▶ button:

There are 3 settings tabs available in the sidepanel of the Page Builder:

In the Sections List tab, you can view the page structure listed in order of sections. Settings and options available include:

You can also expand or collapse the structure of all sections at once by clicking on the "Expand All" or "Collapse All" button respectively:

When working within a section, Breadcrumbs are displayed at the top of the editor to make it easy to see the structure of the section and the particular element that has been selected. Each link included in the breadcrumbs menu is clickable, allowing easy edit access to each element included in the section:

In the Page Settings tab you can set the Header and Footer settings for the page, the Background settings, the General settings and the option to "Save Page as a Template":

The Page Styles options allows you to save time by applying default styles for various Text (1) and Button (2) types being used on a particular page:

Style changes applied manually to text within sections take priority over the styles set in Page Styles. More details on the Page Styles options can be found in our help article here.

There are also Global Styles which can be applied to the page instead if desired. Applying global styles will override any/all page styles applied to the page:

To exit the builder and return to the main app interface at any time, click the X button located at the top-right of the page builder screen:

To enter into page Preview mode, click on the 👁️ button located at the top-center of the builder's navigation bar:

Once in preview mode, click into the Desktop, Tablet or Mobile button icons (1) to preview your page on different devices. To exit page Preview mode, click the green 👁️ button (2) and you'll return to Builder mode:

Page Scale lets you easily zoom in and out of the builder, providing a better view and control over your design—perfect for smaller screens like laptops.

📝We currently offer the ability to scale page content down to fit smaller screens. If there isn't enough space to display the full content, it will automatically resize to the maximum available value.

If the page you're working on belongs to a Group, you will be able to quickly switch between the pages in that group without needing to leave the page builder.

To do that, simply select the page that you want to work on from the group using the available dropdown menu in the builder as shown below:

Click the </> button to open up the "Page Scripts" pop-up window where you can add Local additional scripts or manage which Global scripts to use on the page:

The "Manage Scripts" dropdown allows you to choose one of the following options (separately for Header and Footer sections):

Changes made to the page are not saved automatically. If you have unsaved changes, an "⚠ Unsaved changes" (1) notification will appear in the top-left corner of the builder.

To manage your changes, click either the Discard or Save button (2) that appears in the top-right corner of the builder.

The builder includes a page history feature, so you can effortlessly revert and redo changes with just a click!

You can either click the corresponding Undo/Redo buttons in the header of the builder or use keyboard shortcuts:

Undo/Redo will not be available for pages that include "Static" section(s) or when a static section is added, for example via the Favorites section feature. Static section(s) will show a ⚠ badge that states "Section is outdated. Undo/redo is unavailable."

To use the Undo/Redo feature, all static sections must either be Updated or Deleted. To update a static section to the new dynamic structure, simply click the "Duplicate" button. A copy of the existing section will be created that uses the new "Dynamic" structure, directly below the existing section. The "Static" section can then be deleted:

Once you're ready to publish or update your page, click the corresponding button in the top-right corner of the builder:

Once the page is published a success popup will show where you can copy the live page URL or click on the "Live Preview" button to view the page on your storefront. You can also scan the QR code on your mobile device to view the published page on mobile:

Published landing pages are also listed in the Sales channels > Online Store > Pages section of your Shopify admin:

To access additional publish settings, click the ⚙️ button located at the top-right of the builder:

In-addition to Publish Settings, the following settings are also accessible there: