Skip to main content
Creating a new Home Page [Zipify Pages]

Learn how to make a Home Page for your store directly in the Zipify Pages app!

Chris Haas avatar
Written by Chris Haas
Updated over a week ago

Overview

A home page is crucial for an eCommerce store as it serves as the primary entry point for visitors, setting the tone for their shopping experience.

It provides an opportunity to showcase key products, promotions, and brand identity, guiding customers towards their desired actions.

An effective home page can enhance user experience, boost engagement, and drive conversions by offering intuitive navigation and clear calls-to-action. In essence, itโ€™s a powerful tool for making a strong first impression and encouraging customers to explore further.

Creating a New Homepage

To create and publish a new Home Page for your store, follow the quick and easy steps below:

1. Click on the "Pages" link in the sidebar:

2. Click on the "New Page" button (1) in the top-right corner, then hover over "Home Page" there and click the "New Page" button (2):

3. On the next screen, either select a Template to work with or click the "Create Blank Home Page" button to build one from scratch:

๐Ÿ“If you've already built a Landing Page that you want used as your Home Page, choose the "Create Blank Home Page" option. Then use the "Existing Section" feature to select your page, select all sections from the page and click the "Add Sections" button:
โ€‹

4. Once your Home Page has been fully built-out and you're ready to use it, click the "Publish" button in the top-right corner of the editor:

5. To view your newly published Home Page, simply visit your store's domain URL like you normally would or click the "๐Ÿ‘๏ธ Preview on Store" button in the builder:

๐Ÿ“If you'd like to return to using your Theme's home page at any time, simply click the "Unpublish" switcher for the published page in the "Home Pages" section of the app. Then confirm the action by clicking the "Unpublish" button in the popup:

Recreating an existing Landing Page as a Home Page

You may have a Landing Page you've already built that you want used as your store's Home Page. Since "Landing Pages" and "Home Pages" are two different page types in the app, there unfortunately isn't a way to migrate a page between the two different sections. However, you can recreate the landing page in the "Home Pages" section quickly and easily by following the steps below:

1. In the Home Pages section, click the "New Page" button.

2. Select the "Create Blank Homepage" option.

3. Use the "Existing Section" feature on the new page to select the Landing Page you want copied.

4. Select the sections by left-clicking on the top one and dragging down with your cursor (5 sections can be selected at a time), then click the "Add Sections" button:

5. Repeat the process (if needed) until all sections from your Landing Page are be copied over to your new Home Page. Publish the new Home Page once you're ready to start using it live on your store!

Technical Stuff

Once a Home Page is published in the app, we're replacing the code in the index.liquid file (the default Homepage file) of your theme.

๐Ÿ“If you're using an Online Store 2.0 Theme, please see this article for the details.

In order to preserve the index.liquid file's original code, we're creating a new Snippet file called index.original.zipifypages.liquid and placing the original code from the index.liquid file there:

Our code remains in the index.liquid file after clicking the "Remove Assets" button found at Settings > Advanced Settings > Application Assets Management, but the previous code from the index.original.zipifypages.liquid file will work instead. So, your original Homepage will be shown again after clicking that button without any additional action required.

However, in order to get your theme files back to their original state (if you want to remove the ZP app from your store or otherwise), you just need to copy the code from the index.original.zipifypages.liquid file:

Then use it to replace (copy over) the code in the index.liquid file and Save:

Then delete the index.original.zipifypages.liquid Snippet file and you're done!ย 

Troubleshooting

If the Home Page feature is not working for any reason on your store and it's stuck on your Theme's home page instead, give the following troubleshooting steps a try in this order to see if it resolves the issue:

*Note: Enabling an Integration within the Settings > Integrations section of the Zipify Pages for an app that you don't have installed and/or configured will result in the Home Page feature not working properly. DO NOT enable an integration for an app that you don't already have installed and configured.

1. Unpublish the Home Page in the Zipify Pages app's "Home Page" section.

2. In your Shopify admin, navigate to Online Store > Themes.

3. Click the "Actions" drop-down menu for the currently published theme and select "Edit code".
4. Find the index.original.zipifypages.liquid file in the Snippets folder and copy the code from that file.

5. Find the index.liquid in the Templates folder and click on it. Highlight all code in the file and paste over it with the code copied from the index.original.zipifypages.liquid file in the previous step, then Save the file.
6. Delete the following files from the Snippets folder (don't worry, they will be added back later):

  • index.original.zipifypages.liquid (stores your Themes original Home Page code)

  • index-content.zipifypages.liquid (controls the content for your Zipify Pages Home Page)

*Note: If you've added any custom code to the index-content.zipifypages.liquid file, save a copy of it before deleting the file in a text doc so that you can add it back to the file after the process is completed.
7. Click the "Refresh Assets" button found at at Settings > Advanced Settings > Application Assets Management in the Zipify Pages app.
8. Publish the Home Page in the "Home Pages" section of the app again. Then check your store's live Homepage to see if the steps above have resolved the issue.

Did this answer your question?