How PageFly work with your Shopify theme?
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
This guide explains , detailing the management of headers and footers, theme switching, and troubleshooting common issues for seamless integration.
Install
Publish/choose the theme you want
Basic knowledge of Shopify
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:
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.
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.
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.
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.
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.
Excluding the password page; you can hide the footer and header on the regular, home, collection, product, and blog post pages created with PageFly.
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.
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.
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.
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.
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.
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?
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.
By default, the header and footer come with the Shopify theme that you could use. You can hide them by opening the modal.
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 for more details about the issue.
