On this page
- The Zipify Pages "Page Constructor" Interface
- Adding Blocks to the Page
- The Page Constructor Navigation Panel overview
- Adding Scripts
- Preview on Store
- Page Attributes
- Open Graph Properties
- Publish/Update your Page
- The Page Constructor Left-side Panel
- Page Blocks menu options
- Page Settings menu options
- Default Styles menu options
The Zipify Pages "Page Constructor" Interface
The Page Constructor for Zipify Pages can be accessed by clicking on a page's name or by clicking the "Edit Page" action from the app's Home section.
If you haven't created a page yet, click the "+ Add Page" button from the Home section. Then choose either "Custom Page" or "Use Template".
Once you do that, you will be taken to the Page Constructor interface as seen below:
This is where all of the design, editing, page construction, 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:
The Page Constructor 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 Constructor's "Preview Mode".
Click the "Exit From Preview Mode" button to go back to the Page Constructor interface.
</> 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.
- Zipify Page Name: The title for the page that will be shown in the Online Store > Pages section of your Shopify admin once published. 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 <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.
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:
- The Automatic option 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.
- The Custom option allows you to manually fill in the Open Graph fields with the exact information you want used for the page.
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 Constructor 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 Constructor interface.
Once you've got the above information filled out, click the "Publish" (or "Update") 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 Constructor Left-side Panel
There are 3 sections 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.
- Show / Hide page block: Click the "more options" icon to hide the page block from the page constructor 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.
1) Gives an option to "Enable fixed layout" if enabled or use the default wide layout if disabled.
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.
- 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.
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
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).