Project Overview

Objective: Migrate product page from PageFly to native Shopify Liquid template

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

Deliverable: Native Liquid template product.avbyfp.liquid with dynamic features

Phase 1: Access & Setup

Access Required

Request from client:

Hi [Client Name],

To get started on the product page template, I’ll need Shopify access.

Please add me as a Collaborator:

  1. Go to Settings > Users > Collaborators
  2. Click “Add Collaborator”
  3. Enter my email: [your email]
  4. Enable “Online Store” / “Themes” permission

Once I receive the invite, I can begin development.

Access Checklist

  • Shopify Collaborator invite received
  • Can access Online Store > Themes
  • Can access Edit Code
  • Can view PageFly dashboard (optional, for inspecting settings)

Local Environment Setup

Terminal window
# Install Shopify CLI
npm install -g @shopify/cli @shopify/theme


# Create project directory
mkdir -p ~/Projects/avbyfp-theme && cd ~/Projects/avbyfp-theme


# Pull theme from store
shopify theme pull --store avbyfp.myshopify.com


# Start dev server (after making changes)
shopify theme dev --store avbyfp.myshopify.com

Phase 2: Pre-Work Checklist

Information to Gather

From Client/PageFly

  • Screenshot current product page (desktop)
  • Screenshot current product page (mobile)
  • Any custom CSS from PageFly settings
  • List of products using PageFly template

Metafields to Verify

Check in Shopify Admin: Settings > Custom data > Products

MetafieldPurposeDefault
custom.pp-popup-flagShow popup modal when = 10
custom.pp-colorway-fontTitle text color#000000
custom.pp-colorway-backgroundCTA button background#ffffff
custom.pp-colorway-hoveroverHover state color#808080
  • Metafields exist in Shopify
  • Test product has values set

Assets to Collect

  • Sales agent images (150x150 PNG files)
  • Upload location confirmed (theme assets or Shopify Files)

Accordion Content

Source of content for each accordion section:

SectionSource
FEATURES[ ] Metafield / [ ] Product description / [ ] Hardcoded
SPECIFICATIONS[ ] Metafield / [ ] Product description / [ ] Hardcoded
CONTENTS[ ] Metafield / [ ] Product description / [ ] Hardcoded

Phase 3: Implementation Tasks

File Structure

templates/
└── product.avbyfp.json         # Template definition


sections/
└── product-avbyfp-main.liquid  # Main product section


snippets/
├── avbyfp-trust-badges.liquid      # FREE SHIPPING, EXPERT SUPPORT, etc.
├── avbyfp-sales-agent.liquid       # Talk to a PRO section
├── avbyfp-accordions.liquid        # FEATURES, SPECS, CONTENTS
├── avbyfp-pickup-badge.liquid      # "PICK UP TODAY" conditional
├── avbyfp-shipping-badge.liquid    # "Quick Shipping" conditional
├── avbyfp-popup-modal.liquid       # Conditional popup
└── avbyfp-colorway-styles.liquid   # Dynamic CSS from metafields


assets/
├── product-avbyfp.css              # Styles
└── product-avbyfp.js               # Accordion + popup JS

Task Breakdown

Setup & Structure

  • Create templates/product.avbyfp.json
  • Create sections/product-avbyfp-main.liquid scaffold
  • Create empty snippet files
  • Create empty asset files

Layout Replication

  • Product image gallery (use theme’s existing or build new)
  • Product info section (title, subtitle, price, ATC)
  • Trust badges row (3 icons with text)
  • “Talk to a PRO” section with agent image
  • “SCHEDULE A DEMO TODAY” CTA button
  • Product description paragraph
  • Accordions (FEATURES, SPECIFICATIONS, CONTENTS)

Dynamic Features (from spec)

  • Sales agent rotation (random per session)
  • “PICK UP TODAY” badge (when will-call inventory > 0)
  • “Quick Shipping” badge (when any inventory > 0)
  • Conditional popup modal (when pp-popup-flag = 1)
  • Dynamic colorway (from pp-colorway-* metafields)

Styling & Polish

  • Match existing design colors/fonts
  • Mobile responsive layout
  • Tablet responsive layout
  • Hover states and transitions

Testing

  • Test with product that has inventory
  • Test with product that has no inventory
  • Test with popup flag = 1
  • Test with popup flag = 0 (or missing)
  • Test with custom colorway metafields
  • Test with default colorway (no metafields)
  • Test on Chrome, Safari, Firefox
  • Test on mobile device

Phase 4: Migration & Cleanup

Migration Steps

  1. Assign new template to test product
  2. Verify all features work
  3. Get client approval
  4. Assign template to remaining products
  5. Final verification

PageFly Cleanup

After migration is approved:

  1. Go to Online Store > Themes > Edit Code
  2. Search for “pagefly”
  3. Delete all pagefly-*.liquid snippets
  4. Delete all pagefly-*.css assets
  5. Delete all pagefly-*.js assets
  6. Check theme.liquid for PageFly includes - remove
  7. Check product.liquid for PageFly references - remove
  8. Uninstall PageFly app
  9. Delete “PageFly Assets” theme (after moving any needed images)
  10. Verify no Liquid errors on site

Estimates

Time Estimate (with AI assistance)

PhaseEstimate
Setup & Structure30 min
Layout Replication1-2 hrs
Dynamic Features1-2 hrs
Styling & Polish1-2 hrs
Testing1 hr
Migration & Cleanup30 min
Total4-8 hrs

Quote

Fixed Price: $800-1,000

Notes

  • Development will use Shopify CLI with live preview
  • New template can be tested alongside existing PageFly template
  • Rollback path: reassign products to PageFly template if issues arise
  • PageFly should only be uninstalled after full migration approval

References