LogoLogo
Back to PageFly.ioVideo Tutorials
English 🇺🇸
English 🇺🇸
  • PageFly Help Center
  • Getting Started
    • Overview
    • Quick start
      • How to Install PageFly
      • How To Use PageFly | Get started in 5 mins
      • How to Create a New Page from PageFly Templates
      • How can I access the PageFly LiveChat?
      • How PageFly work with your Shopify theme?
    • Pricing and billing
      • PageFly pricing plan
      • How PageFly billing work?
      • What happens if I uninstall PageFly?
      • PageFly refund policy
  • Pages & Sections Creation
    • Overview
    • General
      • Setting up PageFly Pages
      • What type of pages that PageFly support?
      • How to use PageFly pages and sections?
      • How to export and import PageFly pages and sections
    • Pages
      • How to create a Homepage with PageFly?
      • How to create a Product page with PageFly
      • How to create a Collection page with PageFly
      • How to create a Blog post page with PageFly
      • How to create a Password page with PageFly
      • How to create a FAQs page with PageFly?
      • How to create a Coming soon page with PageFly
      • How to create an About us page with PageFly
      • How to create a Contact Us page with PageFly
      • How to create a Landing Page with PageFly?
      • How to create A/B testing page with PageFly
    • Sections
      • How to use premade section and saved section to build page?
      • How to create a basic section with image and text
      • How to use parallax effect in a PageFly section?
      • How to create a full-width section in PageFly
      • How to make a sticky section without code in PageFly
  • Page Structure & Elements
    • Overview
    • Editor
      • User interface
        • How to work with PageFly editor?
        • How to work with PageFly on mobile?
        • Page Editor – Element Inspector
        • Page Editor - General Tab
        • Page Editor - Styling Tab
        • How to use Page outline to organize page layout?
        • How to make impressive mobile responsive page?
        • How to use autosave and version history ?
      • Extra Functions
        • How to manage custom option swatches for product variants?
        • How to use Global Styles to customize styles to use for all PageFly pages
        • How to use trash to manage deleted pages, sections, and media files?
        • How to Add Custom Font in PageFly
        • How to manage image and video in PageFly?
    • PageFly Elements
      • Universal Elements
      • Containers
        • Layout
        • Slideshow
        • Tabs
        • Accordion
        • Content List
      • Basic
        • Heading
        • Paragraph
        • Button
        • List
        • Icon
        • Divider
        • HTML/Liquid
      • Media
        • Image
        • Youtube video
        • Vimeo video
        • HTML video
        • Soundcloud
      • Social
        • Instagram feed
        • Facebook like & share
        • Facebook feed
        • Twitter feed
      • Advanced
        • QR code
        • Table
        • Countdown
        • Google map
        • Progress
        • Mailchimp form
    • Shopify elements
      • Custom Content
        • App blocks
      • Product
        • Product Variant Metafield
        • Product list
        • Product details
        • Product media
        • Product title
        • Product vendor
        • Product price
        • Product description
        • Product variant
        • Product quantity
        • Product Add to cart
        • Product view details
        • Product Metafield
        • Dynamic checkout button
      • Collection
        • Collection title
        • Collection image
        • Collection list
        • Collection view details
        • Collection details
        • Collection description
      • Form
        • Customer form
        • Customer form field
        • Customer form button
        • Contact form
        • Contact form field
        • Contact form button
        • Search form
      • Blog posts
        • Blog post list
        • Blog post details
        • Blog post image
        • Blog post title
        • Blog post content
        • Blog post meta
    • Optimization
      • How to use custom code editor to customize your page?
      • Page Analytics
      • How to speed up your Shopify store?
      • How to set up Facebook Pixel to understand the actions people take on website?
      • How to publish PageFly page to Shopify menu navigation?
      • How to use the Zakeke Product Customizer on PageFly pages?
      • How to use Langify to translate my page?
      • How to use Weglot to translate my pages?
      • How to use T Lab to translate PageFly’s page?
      • JSON Template with PageFly
      • How to Optimize Images with TinyIMG in the PageFly editor?
      • How to use Shoplift A/B Testing with PageFly?
      • How to use SEOAnt:AI SEO & Image Optimizer with PageFly?
      • Black Friday Sale Ideas
      • Optimize Pages for CRO with PageFly Elements
      • Optimize Sale On Valentines Day
      • How to set up Christmas Sale Page with PageFly | Best Guide in 2023
      • How to create a Flash sale section - Back to School
      • Optimize Your Store for Mother's Day: Create a Gift Guide with PageFly
    • Main Use Case
      • Align Elements on a Page
      • Direct to Links, Sections, Pop-ups
      • Edit Spacing, Margin and Padding
      • Flex Feature
      • Upload Files to Page
  • Integrations
    • Third-party Elements
      • How to activate integrated third party Shopify apps to use on your pages
      • What apps does PageFly integrate with?
      • Review & Rating
      • Upsell & Cross-sell
      • Badge & Seal
      • Appointment Booking
      • Delivery & Pickup
      • Subscriptions
      • Order Tracking
      • Upload Fields
      • Email Marketing
      • Product Information
      • Push Notifications
      • Referral & Affiliate Marketing
      • Image & Media
      • Loyalty & Rewards
      • Sustainability
      • Gifts
      • Internationalization
      • Advertising
      • Support
      • SMS Marketing
  • FAQ & Troubleshooting
    • Overview
    • FAQs
      • Issues with Shopify themes when using PageFly
      • How we comply with GDPR
      • The URL address of my page
      • PageFly Page editor - FAQs
      • Elements - FAQs
    • Troubleshooting
      • Live site issue
        • Cart Drawer does not Automatically Update
        • Responsive mobile horizontal scroll issue
        • YouTube, HTML Videos do not autoplay issue
        • Page not fully displayed in theme preview mode
        • Can't create locales file
        • Can't create theme.pagefly.liquid
        • How to hide Shopify's Default Product Details
        • PageFly Page List Won't Stop Loading
        • Remove the blank space on top of the page
        • Blog page not updated successfully
        • The page's style is broken
      • Error messages
        • PageFly Page List Won't Stop Loading
        • Page Size Limit
        • Limit elements on a page
        • Unable to import your data
        • Limit image size
        • Unknown error
  • Latest Update
    • PageFly is now compatible with Online Store 2.0
    • PageFly Referral Program
    • PageFly old pricing plan
  • PageFly Affiliate Program
    • Affiliate Success: Understanding what PageFly can do for Merchants
    • Affiliate Success: Dos & Don'ts - Everything to Know about Becoming a Successful PageFly Affiliate
    • Affiliate Success: Frequently Asked Questions
Powered by GitBook
LogoLogo

Product

  • Templates
  • Pricing
  • Happy Customer

Resource

  • Blog
  • Academy
  • Video Tutorials
  • Community
  • Feedback

Partners

  • Our Partners
  • Affiliate Program

Company

  • About Us
  • Careers
  • Privacy Policy
  • Terms of Service

Copyright © 2025 PageFly. All rights reserved.

On this page
  • Overview
  • Requirements
  • How To Create A New Product Page
  • Getting Started
  • Enhancing Your Page
  • Tips And Best Practices
  • Frequently Asked Questions

Was this helpful?

Edit on GitHub
  1. Pages & Sections Creation
  2. Pages

How to create a Product page with PageFly

Last updated 8 hours ago

Was this helpful?

Overview

This guide will show you , offering detailed product information to elevate conversion rates. By integrating PageFly elements efficiently, you'll be able to boost your product page's conversion rate optimization (CRO) and search engine optimization (SEO) performance.

Requirements

  • Install PageFly for Free: Get it for your Shopify store .

  • Understand the Synergy Between Shopify and PageFly: The default Shopify Product Page provides basic product information. PageFly takes it a step further by allowing you to add comprehensive details about your products, significantly improving your chances of converting visitors into customers. It's important to note that PageFly's product pages complement the default Shopify pages by enhancing them with additional content.

How To Create A New Product Page

Before diving into the specifics, watch this tutorial on creating a basic Shopify Product Page with PageFly:

Getting Started

Below is how we used PageFly elements to empower a default Shopify product page.

Step 1: Create A New Product Page

There are 2 ways you can choose to create a new product page.

  • Create from scratch:

Navigate to the PageFly dashboard, click on "Pages", then select "Create blank page". Choose "Product" from the dropdown menu to begin crafting your product page from scratch.

  • Create from PageFly’s templates:

Click on the “Create form template” option and choose “Product”.

You can filter to choose the proper templates based on your store niche. And then, hover and hit the “Select” button.

Step 2: Assign Product(S)

Once your page is set up, it's time to link it with your products.

In the Product Page Editor, access the Page Assignment modal by clicking the “Page Assignments”. Here, you can assign one or multiple products to the page.

  • If you want to assign the PageFly product page for all product pages on your store, click dropdown inside “Page Assignment” > Choose "All products" > hit "Save".

  • If you want to assign the PageFly product page for specific product pages, click the "Browse" button > Select products from the products list > Click “Select”. Remember to hit the “Save” button at the top-right.

Manage the assigned product quantity directly from the PageFly Dashboard. A quick link in the quantity section directs you to Page Assignments for easy management.

Step 3: Add Product Details Element

Enhancing Your Page

Step 1: Add Brand Logos Section

  1. Use pre-made sections to add a Brand Logos section.

  2. Hover to any section, then click the “+” icon , select "Template", then navigate to "Client Logos" within the category section to choose your preferred section.

  1. Change image: Click on each Image element, then go to the General tab, click on the “Select” button to choose another image for your store needs.

Step 2: Add Product Unique Selling Points

By adding a product unique selling point (USP) section that contains the product highlight feature and information, this section can help customers understand and believe more on your product and easier to make buying decisions.

You can add the USP by using premade template Product information or Product Specification category.

After adding a premade section on the page, click on each element to change content and image to suitable for your product.

Step 3: Add Customer Testimonials

It’s very important to have customer reviews/ testimonials for your store. This helps to increase trust for your store. You can use our Testimonials premade sections

  • Step 1: Click on the Plus icon at the bottom right of the section, then select Template to open the premade section library.

  • Step 2: In the premade section library pop-up, click on Category > Testimonials and choose a section you want.

Step 4: Add A Cross-Sell Section

You can use a Product suggestion pre-made section to create this section.

In the General tab, click the Custom Collection option and select a collection you want.

This helps customers see other products in your store and encourage them to take action.

Step 5: Hide Default Product Details

  • For Theme OS 1.0:

There is a product preview section above the product details. It’s a default section when you create a new product page. This is the placeholder of the product details generated by your theme. Here you can hide it in the Page Settings by untick the “Show default product details” option.

  • For Theme OS 2.0:

If you use the Dawn theme of Shopify Online Store 2.0, you can click on the More Action icon in the top right corner, then click on Go to theme editor.

In the theme editor, you will see the product detail twice, one from the theme and another from PageFly

You can hide one of them by clicking on the eye icon

You can also move the section made with PageFly freely on the product page. Click and hold the six-dot icon next to each section in the theme editor to move around.

Finally, click Save to save your changes

Tips And Best Practices

  1. The Product page should include essential product information, unique selling points, customer feedback, and cross-sell product list.

  2. Ensure product images cover all angles and incorporate lifestyle shots for enhanced engagement.

  3. Clearly detail unique selling points, avoiding lengthy paragraphs for better readability.

  4. Enable direct customer reviews on the product page to foster engagement and trust.

  5. Optimize your page for responsiveness, particularly for mobile viewing.

Frequently Asked Questions

1. Why I cannot find the product when searching for it?

In this case, in order to find the product you want, you have to type the full title of the product or type the URL and URL handle of the product. To find the URL and handle of the product, you can follow the following steps

  1. Shopify admin > Products > Choose the product you want

  2. Scroll down to Search engine listing > Edit, then you can find the product’s URL and handle.

2. What is a product page in Shopify?

Shopify product page is a dedicated web page, existing in the Shopify e-commerce system, as it shows full information of a specific product. You can now create a Shopify Product Page that is now available in the PageFly Admin Dashboard, which can be referred to ‘PageFly Product Page’.

3. How to create mobile-friendly Shopify product page?

Create a mobile-friendly Shopify Product Page using PageFly’s powerful elements and features:

In the Element Catalog, click on the Element icon. On the Shopify tab, drag and drop the element onto the page canvas.

Product Details
how to enhance your PageFly Product Page
here