How PageFly work with your Shopify theme?

Overview

This guide explains how PageFly Page Builder interacts with your Shopify theme, detailing the management of headers and footers, theme switching, and troubleshooting common issues for seamless integration.

Requirements

• Install PageFly app
• Publish/choose the theme you want
• Basic knowledge of Shopify

How PageFly Works with Your Theme Extension

The PageFly Theme Extension is an essential extension that must be enabled for PageFly to work properly with your current Shopify theme.

When the Theme Extension is disabled, you may encounter warnings:

• On the PageFly dashboard:

• On PageFly editor:

How to Enable PageFly Theme Extension

You can enable the PageFly Theme Extension using one of the following methods:

1. Via Shopify Dashboard

• Go to Shopify dashboard > Online Store > Themes > Navigate to the Current Theme section > Hit the button Customize.
• In the Theme Editor, select the App embeds button on the left menu.
• Search for PageFly Theme Extension and enable the app.

2. Via PageFly Warning Message

If you see a warning about the Theme Extension being disabled, select the Enable PageFly Theme Extension button directly from the warning.

3. Via PageFly Dashboard

• Go to PageFly dashboard > select Preferences on the left menu > choose Theme app extensions.
• Click the Enable now button to activate the Theme Extension.

4. Publish a PageFly page

When you publish a page in PageFly, the Theme Extension is automatically enabled once you hit the Publish button.

What To Do If I Switch The Theme?

Whenever you switch your Shopify theme, make sure to enable the PageFly Theme Extension using one of the methods mentioned above. This ensures that your new theme works properly with your PageFly pages.

How To Switch Theme In Shopify

Switch Theme Process

• Step 1: Access Themes

From your Shopify Admin, go to Online Store > Themes.

• Step 2: Publish Theme

In the Theme library, select the theme you want and click Publish.

Note: For trial themes, there won’t be a Publish button. You must purchase the theme first to publish it.

For a better visual demonstration, you can watch the video tutorial below.

Switch Theme Process Function In PageFly

During the theme switch process, in the PageFly page editor, two pop-up notifications will appear automatically in the bottom right corner of all the pages you are working on. These notifications keep you informed about the status of your pages.

Click on the View details button in the pop-up at the bottom center to see detailed information about the status of all your pages.

Alternatively, you can check the process by clicking the button on the bottom left (above the Customer Support button) > select Background process > choose the process you want to check.

What To Do If The My Page Status Fails During Theme Switching?

If the status show fails, you can click on the failed page in the list, which will redirect you to the specific page. Then re-publish the page to ensure all pages are successfully published after switching the theme.

Note: After the theme switch process finishes, make sure to check if the PageFly Theme Extension is enabled. It should be enabled to ensure that your PageFly pages work properly with the new theme.

How To Hide The Header/Footer of Shopify Theme With PageFly Pages

Excluding the password page; you can hide the footer and header on the regular, home, collection, product, and blog post pages created with PageFly.

By default, the header and footer come with the Shopify theme that you could use. You can hide them by opening the Page Settings modal.

• Step 1: Access Page Settings Modal

In the PageFly editor, click on the Page Settings button on the left toolbar.

• Step 2: Disable Header And Footer Option

When the Page Settings modal appears, unselect the Show header & footer option. Click the Save button to apply your change.

• Step 3: Publish The Page

After saving the settings, click the Publish button to see the changes in the live view.

Use Cases

Managing Consistent Headers and Footers Across Custom Pages

When creating custom pages using PageFly, maintaining a consistent header and footer can be crucial for brand identity. To maintain consistency, you can enable the header and footer in the PageFly Page Settings. This ensures that your custom pages align with the rest of your store’s design. Alternatively, if you prefer a unique layout without the default Shopify header and footer, you can disable them through the Page Settings and then publish the changes to see the result.

Custom PageFly Pages Do Not Display Correctly After Switching Shopify Themes

Switching Shopify themes can sometimes cause issues with the display of custom PageFly pages. To resolve this, it is essential to enable the PageFly Theme Extension within the Shopify Theme Editor. This ensures compatibility between the new theme and your PageFly customizations.

Additionally, monitoring the background processes in PageFly can help identify any failed page updates. If a page fails to display correctly, you can re-publish it from the PageFly editor to restore its proper functionality and appearance.

Hiding Default Product Details

To further customize product pages, you can hide Shopify’s default product details:

With Theme OS 1.0

• Step 1: Click on the Page Settings icon in the left menu.
• Step 2: Scroll down to Theme’s Sections, disable Show default product details, and click Save.

For Newer Themes (OS 2.0):

• Step 1: Click on the Page Setting icon on the left menu then scroll down, choose Go to theme editor

• Step 2: In the Theme editor, click the eye icon next to default product details to hide them.

• Step 3: Save changes and check in Live view.

This customization allows for a cleaner layout that enhances user engagement by focusing attention on elements you choose to highlight.

Tips And Best Practice

• Enable PageFly Theme Extension: Always enable the PageFly Theme Extension to ensure compatibility with your Shopify theme. This helps prevent display issues and maintains the functionality of your custom pages.
• Maintain Theme Consistency: Ensure your custom PageFly pages match the overall design of your Shopify theme. Use the same fonts, colors, and styles across all pages to create a cohesive look and feel for your store.
• Manage Global Elements: For elements like headers and footers, decide whether to use the Shopify theme’s default settings or customize them in PageFly. Consistent use of global elements across all pages helps maintain a unified brand identity.

Frequently Asked Questions

1. Can I use 2 themes for PageFly pages?

No, you cannot. You can use only 1 theme for all PageFly pages. You must select and use a single theme for consistency.

2. Is it possible to preview the unpublished theme for PageFly pages?

No, it’s not possible. PageFly pages only work with the published theme. To see how your PageFly pages look with a new theme, you must publish the theme first.

3. How can I make my PageFly pages use my new theme?

Once you publish your theme or migrate the PageFly content from an old theme to a new one, PageFly pages will automatically apply that theme.

In some cases, some PageFly pages haven’t been synced, so you need to check again and republish these pages.

For example, if your store has too many pages that it might reach Shopify API’s limitation, some pages might not be synced properly at one time. Therefore, you should double-check all your PageFly pages.

4. My cart is not updated automatically when adding products. How can I fix this?

Basically, PageFly works well with Shopify themes. However, some themes with specific cart mechanisms can result in conflict with PageFly, leading to the cart drawer not updating automatically. You can check this article for more details about the issue.

5. What happens if I don’t turn on the Theme Extension?

If you don’t turn on the PageFly Theme Extension, many elements on your PageFly pages will not connect properly with your Shopify theme and may not function correctly. For example, interactive elements like Accordion and Tab elements may not work as intended, leading to a broken user experience.

Therefore, it’s crucial to enable the Theme Extension to ensure all elements on your pages operate smoothly and are fully integrated with your theme.