pagefly-migration

TL;DR

Why PageFly exists: Drag-and-drop visual page builder for non-developers. Lets marketers/merchants customize pages without code.

Developer concerns when removing PageFly:

Residual code cleanup - PageFly leaves files in your theme that must be manually removed
URL/SEO issues - Some users report Google indexing problems from leftover code
Replicate the layout - You need to recreate what PageFly built in native Liquid

What you need to do: Create a native Liquid product template that replicates the PageFly design, then clean up PageFly files.

Project Scope (from Google Doc)

Source page to replicate: https://www.avbyfp.com/collections/rcf/products/rcf-hdl-10a-active-line-array

Features to Implement

Feature	Description
Rotate Sales Agent Image	Show random 150x150 agent image per session (from folder)
“PICK UP TODAY”	Display when any will-call location has inventory > 0
”Quick Shipping”	Display when any location has inventory > 0
Conditional Popup Modal	Show when `pp-popup-flag` metafield = 1
Dynamic Color Scheme	Read `pp-colorway-*` metafields for title, CTA, accordion colors

Dynamic Color Components

Metafield	Default	Applies To
`pp-colorway-font`	#000000	Title text
`pp-colorway-background`	#ffffff	CTA button backgrounds
`pp-colorway-hoverover`	#808080	Hover states

Why PageFly Is Used

PageFly is a visual page builder for Shopify that:

Drag-and-drop interface - Non-developers can create custom pages without code
120+ templates - Pre-built CRO-optimized layouts
Mobile responsive controls - Separate mobile/tablet/desktop editing
Element library - Countdowns, reviews, upsells, accordions
130+ integrations - Klaviyo, Judge.me, etc.

Who uses it?

Marketers building landing pages
Merchants without developer access
Agencies rapidly prototyping designs

Why migrate away?

Feature limitations - Can’t do complex business logic
Performance concerns - Extra JS/CSS overhead
Code control - Developers prefer native Liquid for maintenance
Cost - $24-99/month vs. one-time development

Developer Concerns: What to Worry About

1. Residual Code (HIGH PRIORITY)

PageFly injects files into your theme that persist after uninstallation:

snippets/pagefly-head.liquid
snippets/pagefly-*.liquid
assets/pagefly-*.css
assets/pagefly-*.js
templates/*.pagefly.json

Cleanup Steps:

Go to Online Store > Themes > Edit Code
Search for “pagefly” in the search bar
Delete all pagefly-*.liquid snippets
Delete all pagefly-*.css and pagefly-*.js assets
Check theme.liquid for PageFly includes
Check product.liquid, collection.liquid, index.liquid for PageFly references

Common Error After Incomplete Cleanup:

Liquid error: Could not find asset snippets/pagefly-head.liquid

This appears on all pages if you remove files but not the include statements.

2. Theme File Modifications

PageFly may have modified these core files:

layout/theme.liquid - Head includes
templates/product.liquid - Product page template
templates/collection.liquid - Collection page template
templates/index.liquid - Homepage

Check for black dot indicators in the theme editor - these show modified files. You can revert to original, but this removes ALL customizations, not just PageFly.

3. PageFly Assets Theme

PageFly creates a separate theme called “PageFly Assets – DO NOT DELETE” for storing images.

After migration:

Move any needed images to your main theme’s assets
Then delete the PageFly Assets theme

4. URL Redirects

If PageFly pages used custom URLs like /pages/custom-landing, you’ll need:

Create equivalent Liquid pages
Set up 301 redirects if URLs change
Update any internal links

What You Need to Create

File Structure

templates/
└── product.avbyfp.liquid    # Custom product template for this project

sections/
├── product-avbyfp-main.liquid       # Main product content
├── product-avbyfp-gallery.liquid    # Image gallery
└── product-avbyfp-details.liquid    # Accordion details

snippets/
├── sales-agent-rotator.liquid       # Random agent image
├── pickup-availability.liquid       # "PICK UP TODAY" logic
├── shipping-availability.liquid     # "Quick Shipping" logic
└── colorway-styles.liquid           # Dynamic CSS from metafields

assets/
├── product-avbyfp.css               # Styles
└── product-avbyfp.js                # Popup modal, interactions

Template Approach

Option 1: JSON Template (Shopify 2.0) - Recommended

{
  "sections": {
    "main": {
      "type": "product-avbyfp-main",
      "settings": {}
    }
  },
  "order": ["main"]
}

Option 2: Liquid Template - Simpler, less flexible

{% section 'product-avbyfp-main' %}

Implementation Examples

Sales Agent Rotation

{% comment %} snippets/sales-agent-rotator.liquid {% endcomment %}

{% assign agents = "agent1.png,agent2.png,agent3.png,agent4.png" | split: "," %}
{% assign agent_count = agents.size %}

<div class="sales-agent"
     data-agents="{{ agents | join: ',' }}"
     data-count="{{ agent_count }}">
  <img src="{{ 'agent1.png' | asset_url }}"
       alt="Sales Agent"
       width="150"
       height="150"
       id="sales-agent-image">
</div>

<script>
  (function() {
    const container = document.querySelector('.sales-agent');
    const agents = container.dataset.agents.split(',');
    const sessionKey = 'sales_agent_index';

    let index = sessionStorage.getItem(sessionKey);
    if (index === null) {
      index = Math.floor(Math.random() * agents.length);
      sessionStorage.setItem(sessionKey, index);
    }

    document.getElementById('sales-agent-image').src =
      '/cdn/shop/files/' + agents[index];
  })();
</script>

Pickup Availability

{% comment %} snippets/pickup-availability.liquid {% endcomment %}

{% assign show_pickup = false %}

{% for location in product.variants.first.store_availabilities %}
  {% if location.pick_up_enabled and location.available %}
    {% assign show_pickup = true %}
    {% break %}
  {% endif %}
{% endfor %}

{% if show_pickup %}
  <div class="pickup-badge">PICK UP TODAY</div>
{% endif %}

Shipping Availability

{% comment %} snippets/shipping-availability.liquid {% endcomment %}

{% assign show_shipping = false %}

{% for variant in product.variants %}
  {% if variant.inventory_quantity > 0 %}
    {% assign show_shipping = true %}
    {% break %}
  {% endif %}
{% endfor %}

{% if show_shipping %}
  <div class="shipping-badge">Quick Shipping</div>
{% endif %}

{% comment %} Popup based on pp-popup-flag metafield {% endcomment %}

{% assign popup_flag = product.metafields.custom.pp-popup-flag | default: 0 %}

{% if popup_flag == 1 %}
  <div class="popup-modal" id="product-popup">
    <div class="popup-content">
      <button class="popup-close" aria-label="Close">&times;</button>
      <h2>Special Offer</h2>
      <p>Content here...</p>
      <a href="https://www.avbyfp.com/" class="popup-cta">Learn More</a>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const popup = document.getElementById('product-popup');
      const close = popup.querySelector('.popup-close');

      // Show popup
      popup.classList.add('active');

      // Close handlers
      close.addEventListener('click', () => popup.classList.remove('active'));
      popup.addEventListener('click', (e) => {
        if (e.target === popup) popup.classList.remove('active');
      });
    });
  </script>
{% endif %}

Dynamic Colorway

{% comment %} snippets/colorway-styles.liquid {% endcomment %}

{% assign font_color = product.metafields.custom.pp-colorway-font | default: '#000000' %}
{% assign bg_color = product.metafields.custom.pp-colorway-background | default: '#ffffff' %}
{% assign hover_color = product.metafields.custom.pp-colorway-hoverover | default: '#808080' %}

<style>
  .product-title {
    color: {{ font_color }};
  }

  .product-cta,
  .accordion-header {
    background-color: {{ bg_color }};
  }

  .product-cta:hover,
  .accordion-header:hover {
    background-color: {{ hover_color }};
  }
</style>

Migration Checklist

Pre-Migration

Screenshot/record current PageFly page design
Document all PageFly elements used
Export any custom CSS/JS from PageFly
Note all metafields used
Backup current theme

Development

Cleanup

Delete all pagefly-*.liquid snippets
Delete all pagefly-*.css assets
Delete all pagefly-*.js assets
Remove PageFly includes from theme.liquid
Revert/clean product.liquid if modified
Delete PageFly Assets theme (after moving images)
Uninstall PageFly app

Post-Migration

Verify no Liquid errors in console
Check Google Search Console for indexing issues
Test all product page functionality
Verify SEO meta tags are intact
Monitor site speed (should improve)