This guide will show you how to make a Landing Page render the header and footer of your site's main theme theme instead of the standard Landing Page navigation.

As the Landing Page is still in beta phase, some functionality like sub-menus are currently not supported. This guide will help you add sub-menus to your landing page by copying the content of a Landing Page to a custom theme page.

Note: this is a workaround only until Landing Pages moves away from beta release. Issues and other functions may still show up so testing is required before making it live in the menu. You also need to backup your site before anything else.

You can create a backup of your site under Customization → Backups → Create Backup. This will not backup your Landing Pages but will give you a backup of your main theme in case you make a mistake in the code editor (see below).

How a sub-menu appears in theme pages:

How a sub-menu appears in Landing pages:

This is because the Landing Page has its own header and footer that is styled differently than the default theme header and footer. Even though the Landing Page catches the navigation menu, it does not render the arrow/sub-menu properly.

This workaround will allow you to use the header and footer of the default theme and link the body of the Landing Page in it.

Step 1: Create the liquid template. Steps to create a new template can be found at this link.

Step 2. Disable the Landing Page Show Header by unclicking the Active tick box as illustrated below.

Step 3. Disable the Landing Page Footer. This can be done in CSS. Normally , Landing Page footer selector is this one #footer. This can be done in HTML block

Step 4. Now that you have disabled the header and footer on the Landing Page, next you'll copy the entire source code by clicking on the page Preview, then right-click on the open Landing Page and click View page Source. Copy the entire code and paste it into the liquid file we made earlier. Save it.

Step 5. Next is to create a page that will be linked to the liquid template page containing the Landing Page source code

Make sure to save it and its linked to the liquid template we made

Step 6. Last and final step, add the page we made in Navigation menu.

  1. Go to Customization → Navigation. Click the three-dot menu to Edit.

  2. Click Add Menu Item to add a completely new menu item, choose the page we made earlier, and click Save.

You can now use the new page URL instead of the original Landing Page. When you visit that Landing Page, it should show the header and footer of the theme home page with the menu and submenu intact.

Did this answer your question?