On this page
- The Zipify Pages "Page Builder" Interface
- Adding Blocks to the Page
- The Page Builder Navigation Panel overview
- Switching between Pages in a Group
- Adding Scripts
- Preview on Store
- General Publish Settings
- Scheduled Publish
- Open Graph Properties
- Facebook Pixel
- Publish/Update your Page
- The Page Builder Left-side Panel
- Page Blocks menu options
- Page Settings menu options
- Default Styles menu options
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!
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 the ➕ button above or below the block where you want a new block added. Then make your selection from the Block Library:
*Note: Page Blocks stack left-to-right on Mobile/Tablet (portrait) view:
The Page Builder Navigation Panel overview:
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.
Back to List
Click this button to go back to the app's Home section and 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 From Preview Mode" button to go back to the Page Builder interface.
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:
</> 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):
- 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.
- 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.
- 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.
- 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.
Preview on Store:
Click the "Preview on Store" button to preview an actual URL of the page.
- If the page is already "Published", then it will be previewed with it's final URL and will show you the actual page on your Shopify store.
- If the page has the "Editing" status and has yet to be "Published" it will display it with the temporary internal Zipify Pages app's URL.
Note: The page style/function will not be 100% accurate in this internal Zipify Pages URL preview.
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 http://yourshop.myshopify.com/pages/about-us.
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.
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:
- Publishing time should be at least "current time + 1 hour" or more.
- It isn't possible to set the publishing date later than 3 years from the current time/date.
- The "Scheduled Publish" section is disabled for the Blog Homepage and Booster Page Coupon Delivery pages.
- The "Publish date and time" date-picker can be minimized by clicking Esc, Space and Enter keys on a keyboard.
- 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.
- 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 page/blog post is shared on Facebook and other social networks. Current fields available are: Title, Description, Image and Page URL.
Two options for the Open Graph Properties of the page are provided:
- 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.
- Custom - This option allows you to manually fill in the Open Graph fields with the exact information you want used for the page instead.
The setting to track/don't track ViewContent 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 and the option to Hide page from site search / Disable search engine indexing just click into the Page Attributes section of the page editor, apply the edits and click the Update button.
The Page Builder Left-side Panel:
There are 3 tabs available in the left-side panel:
- Page Blocks
- Page Settings
- Default Page Styles
Page Blocks menu 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:
1) Edit the Name/Title of your ZP Page.
2) Set the Timezone you want all countdown timer blocks on the page to use.
3) Enable/Disable the "Back to Top" widget for the page. Widget appears once you've scrolled down 20% of the page.
- Background: Adjust the page's background options including Color and Image. You can adjust the page background color by clicking the color swatch and then select your custom color. 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) and Origin (keeps the original formatting for the image).+ Texture: Repeat X (repeats the image horizontally across the page) or Repeat Y (repeats the image vertically down the page). Note: Texture options are only available for the Contain and Origin image options.
- Tags: Add and remove page tags assigned to the page (up to a total of 10 tags per page). Add the desired tag name and then a comma at the end of the name to add the tag.
1) Gives an option to "Enable fixed layout" if enabled 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.
2) Option to "Use theme header/footer" which if enabled, will pull in your store theme's header and footer to the page.
*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.
- Facebook Pixel: Gives an option to track the ViewContent event for product(s) added via Buy Box blocks or not. If your page has more than 1 unique product being featured, it is recommended to set this setting to "No".
*Note: when you disable this setting on a Product page, it only disables the VC event(s) for product(s) added via additional Buy Boxes and not for the Product section itself which is being handled by the native Shopify FB pixel integration.
Default Styles menu options:
The Default Styles options allows you to save time by applying default styles for various text types being used on the page. This setting is available for new pages created on or after 7/31/2019.
- H1, H2, H3, H4
- Regular, Regular 2, Regular 3
Note: These 3 different Regular font types can be set for text in the text editor using the "Text Style Presets" setting seen below:
You can also set Default Styles on a device-type basis.
- Desktop, Tablet and Mobile
First, select the Device type and then the Text type. Set the default styles you want used for each device and text type below the the Appearance section.
Style changes applied manually to text within blocks take priority over the default styles. More details on the Default Styles options can be found in our help article 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).