Working with the Page Builder [Zipify Pages]

Know your basics - get the 101 on the ZP Page Builder

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

The Zipify Pages "Page Builder" Interface

The Page Builder for Zipify Pages can be accessed by clicking on a page's name or by clicking the "Edit Page" action from the app's Pages section.

If you haven't created a page yet, click the "New Page" button from the Pages section. Then choose either "Blank Page" or "Use Template".

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

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

📝Edits made during an editing session in the builder are saved automatically, with a 5 - 10 second delay between each edit and save. To ensure your edits are always saved correctly before exiting an editing session, click on the "Unsaved Changes" link located in the top-left of the builder to manually save. Always ensure it shows "Changes Saved" there before exiting an editing session:

Adding Blocks to the Page

For a new blank page, simply select the first block you want used from the Block Library:

For a page Template or a page that already has blocks included, click thebutton above or below the block where you want a new block added. Then make your selection from the Block Library:

*Note: Page Blocks generally stack left-to-right on Mobile/Tablet (portrait) view. A mobile stacking order setting is included for certain blocks so you can change the stacking order if desired:

The Page Builder Navigation Panel overview:

Show/Hide Left-side Panel

Click this button to hide the left-side panel to give you more room on-screen to make edits to your page. Click it again and the left-side panel comes back into view.

Exit Builder

Click the " < Back to List" button to go back to the app's Home section and Landing Page's Table:

Preview Modes: Desktop / Tablet / Mobile

Click either the Desktop, Tablet or Mobile phone button icons seen below to enter the Page Builder's "Preview Mode".

Click the "Exit Preview" button to go back to the Page Builder interface.

If the page is Published, click the "Preview on Store" button to view the actual published page and URL of the page on your storefront

Switching between Pages in a Group

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:

The same dropdown menu will show in the builder when working on any page that belongs to a Group in the Pages table:

Adding Scripts

Click the </> button to open up the "Manage Scripts" pop-up window where you can add additional scripts to your page that you need included.

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

  1. Use global scripts only: This option will only use the Global scripts which have been added. The Global scripts will appear for you to select which ones you want used.

  2. Use local scripts only: This option will open up the script addition form (similar to the Global scripts form in the Settings > Global Scripts section of the app) where you can add Local scripts to the page.

  3. Use both global and local scripts: This will show a list of both Global and Local scripts which allows you to check the ones you want used for the page.

  4. Use no scripts for this section: No scripts added through Zipify Pages will be used for the page.

Note: If the "Use no scripts for this section" option is chosen, the scripts for the native integrations for the Facebook Pixel ID and Google Analytics will still be used.

General Publish Settings

To access the General page attributes, click the "Publish" button or click on the ⚙️icon and select "General":

  • Zipify Page Name: The title for the page that will be shown in the Online Store > Pages section of your Shopify admin once published (Landing Page). Also listed as the "Page Name" in the Pages Table of the app's Home section.

  • Meta Title: The page title to be used for the HTML <title> tag (needed for SEO optimization).

  • Meta Description: A short page description for search engines. Use it to make your page stand out among other search results. Recommended to have it be shorter than 155 characters of plain text.

  • URL and Handle: The page handle determines the URL of the page. For example, a page with the handle "about-us" would have the url
    Note: By default, whitespace in the Page Title is replaced by hyphens in the Page Handle. For example, the title "Your Page Handle" will result in the handle your-page-handle.

  • Hide from Shopify's store search: Click this checkbox to hide this page from your Shopify's store search and disallow search engine indexing.

  • Zipify Tags - Apply any tag(s) (optional) for internal organization purposes for your page.

Scheduled Publish

The key to an effective content marketing strategy is consistency, and Scheduled Publishing makes it super easy to stick to a regular content plan!

Scheduled Publishing is a new functionality that allows you to schedule publishing of a Page or Blog Post for a certain date/time in a particular Timezone.

This is a phenomenal new feature for Zipify Pages with many use-cases. For example, you can build-out all of your Blog Posts you want added to your Blog for the rest of the quarter/year and then schedule those posts to be published later on at specific dates and times set by you.

Once you set the Timezone and Date/Time that you want the page/blog post to be published to your store, click the "Schedule Publish" button and it will be scheduled for publication!

If you need to update the schedule, just make the needed changes and then click the "Update Schedule" button instead.

It is possible to Unschedule the page at any time. Just click the "Unschedule" button in the Publish/Update popup or by toggling the "Schedule" switcher in the Pages table. Doing this will put the page in "Draft" status.

*Note: If you've scheduled publish for a page which is already Published, then the following warning message will show prompting you to confirm the action:

Additional Notes:

  1. Publishing time should be at least "current time + 1 hour" or more.

  2. It isn't possible to set the publishing date later than 3 years from the current time/date.

  3. The "Scheduled Publish" section is disabled for the Blog Homepage.

  4. The "Publish date and time" date-picker can be minimized by clicking Esc, Space and Enter keys on a keyboard.

  5. It's not possible set a "Scheduled" page as the Homepage, to add it in a Split Test or to set it as a "ZP Page" destination for any block, since it is a page in Draft status I.e. hasn't been Published yet.

  6. The store’s timezone is used as a default value for the Timezone setting in the "Scheduled Publish" popup.

Open Graph Properties

Open Graph properties (meta tags) allow you to control what content shows up when a Landing page or Blog post is shared on Facebook and other social networks. Current fields available are: Title, Description, Image and Page URL.

📝There's no ability to edit the OG properties for Product pages within the Zipify Pages app. The product page's meta title, meta description, main image and URL set for it in the "Products" section of Shopify admin will be used.

Two options for the Open Graph Properties of the page are provided:

  1. Automatic - Pulls Open Graph data from the general page information automatically and displays it in the Title, Description, Image and Page URL fields.
    Note: If "Automatic" is chosen, then the first image at the top of the page will be used.

  2. Custom - This option allows you to manually fill in the Open Graph fields with the exact information you want used for the page instead.

Facebook Pixel

The setting to track/don't track the "View Content" Facebook Pixel event(s) for product(s) added via a Buy Box block(s). More details here.

Publish/Update your Page

  • If the page has "Editing" status and is yet to be Published, you will see the "Publish" button shown in the top-right corner of the Page Builder interface.

  • If the page has "Published" status and is published, you will see the "Update" button shown in the top-right corner of the Page Builder interface instead.

Click the "Publish" button to actually publish the page to your store's Online Store > Pages section of your Shopify admin.

Note: After Publishing a page, to make edits to the Title, Handle, Description, etc. just click into the Publish Settings > General section of the page editor, apply the edits and click the Update button.

The Page Builder Left-side Panel

There are 4 tabs available in the left-side panel of the Page Builder:

  1. Page Blocks

  2. Page Settings

  3. Default Page Styles

  4. Block Settings

Page Blocks List options

  • Rearrange page blocks: Click and hold on the "arrow" icon to rearrange page blocks via the drag and drop method.

  • Edit page block name: Double-click on the block name to edit it. After you've edited the block's name, press the Enter key on your keyboard to save the changes.

  • Edit block settings: Click the "pencil" icon to edit the particular block's settings. Click the Save button after applying edits.

  • Duplicate page block: Click the "duplicate" icon to duplicate the specified block to the page.

  • Add to Favorites: Adds the block to the "Favorites" category of your page blocks library for quick and easy re-use.

  • Show / Hide page block: Click the "more options" icon to hide the page block from the page builder view. Click it again to show the block again.

  • Delete page block: Click the "more options" icon to delete the page block. This action is non-reversible so a pop-up will appear asking you to approve this action before the block is deleted.

Page Settings menu options

  • Layout: Adjust the layout setting for page blocks added to the page.
    1) "Use theme header/footer" - If enabled, this setting will pull in your store Theme's header and footer to the page. Placeholder images will be shown in the page builder, your actual Theme header/footer will be shown and used on the published page version only.
    *Important Note: When the "Use theme header/footer" feature is enabled, the ZP page content will be wrapped by the main theme container and inherit the main theme's width for content.
    2) "Enable fixed layout" - If enabled, it constrains page blocks to a predetermined width or use the default wide layout if disabled. This setting is applicable to Desktop/Tablet views for the page only. On Mobile, 15px left/right padding will be used for all blocks by default.

  • Background: Adjust the page's background settings including Color and Image.
    1) Background Color - Adjust the page background color by clicking the color swatch and then select your custom color.
    2) Background Image - Alternatively, you can add a page background image by clicking the "Browse" button to upload the image from your computer. Click the "Remove" button to remove the background image.

  • Background Image options:
    Scale to fit:
    - Cover (enlarges the image and covers the whole page from top to bottom)
    - Contain (enlarges the image to fill the page width)
    - Original (keeps the original dimensions for the image)
    - Repeat X (repeats the image horizontally across the page)
    - Repeat Y (repeats the image vertically down the page)
    Note: Texture options are only available for the Contain and Origin image options

  • General:
    1) Timezone - Set the time-zone you want used for any/all countdown timer blocks added to the page.
    2) Scroll To Top Button - Adds a "back to top" widget to the page. The widget appears once you've scrolled down 20% of the published page. Enabled by default.

  • Save Page as a Template: Click this button to save the current landing page as a Template, available for use in the "My Templates" category of landing page templates. More details here

Page Styles menu options

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

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

Edits/changes applied in the left-side panel are saved automatically. To see these changes reflected on your published page, you must click the Update button (if the page is already Published) or the Publish button (to publish the page).

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:

Block Settings menu options

Each Page Block has Settings which can be adjusted on a block-by-block basis. The Settings that can be adjusted for each block are as follows:

  • Hide on (Block Visibility) - Decide which device(s) you want the block to be visible or hidden on (Desktop/Tablet/Mobile)

  • Block Width - Contained (default) or Full Width

  • Block Padding - Adjust the top/bottom/left/right padding of the block

  • Block Background - Set a background color/image/video for the block

  • Advanced Setting - Set a "custom" CSS class name for the block. More details here.

A Block's Settings can be accessed from either location in the Page Builder:

More details on working with Block Settings can be found here.

*Note: Edits/changes applied in the left-side panel are saved automatically. To see these changes reflected on your published page, you must click the Update button (if the page is already Published) or the Publish button (to publish the page). 

Did this answer your question?