How to Build a Shopify Product Page with PageFly

Your Shopify theme gives every product the same layout: gallery on the left, buy box on the right, a description underneath. That works for a catalogue, but a hero product, a launch or a bundle usually needs more room to sell: benefits, comparisons, reviews, a size guide, a cross-sell row. PageFly lets you build that page visually without touching theme code. This guide covers the full job, from creating the page to assigning products, setting up the mobile layout and checking the result in Shopify.

The steps below follow PageFly’s own help center and Shopify’s help docs at the time of writing. PageFly updates its editor often, so if a label looks slightly different in your store, look for the nearest match in the same panel.

How a PageFly product page works

A PageFly product page is not a one-off page with a copy of your product typed into it. It is a template. You design one layout, drop in Shopify product elements (media, title, price, variants, add to cart), then assign the page to one or more products. When a shopper opens any of those products, PageFly fills the elements with that product’s live data from Shopify: images, price, stock, variants and description.

Behind the scenes, PageFly creates a product template in your theme. The page settings show it under Theme Template Name, and that same name appears in Shopify’s Theme template dropdown on the product. Keep that in mind, because most “my page isn’t showing” problems come down to which template a product is using.

If you are not sure whether you need a page builder at all, read our comparison of page builder apps vs. the native theme editor first. For a simple layout change, a custom product template made in the theme editor may be enough. PageFly earns its place when you want sections, layouts and per-device control that your theme does not offer.

Before you start

A few minutes of preparation saves a lot of rework:

• Finish the product in Shopify first. Upload all media, set variants and prices, and write the description in the Shopify admin. The PageFly elements read this data. Editing a price inside the builder is not possible, and that is by design.
• Decide which products share the layout. One layout for every product, one for a single hero product, or one for a group such as all suits or all eyewear. This drives the assignment step later.
• Know your plan’s publishing limit. PageFly counts published pages and sections against your plan. Check your current allowance in the app before you build several product layouts.
• Write down the content blocks you need, such as benefits, how it works, size or fit guide, reviews, FAQ and a cross-sell row. Building is faster when you know the order.

Step-by-step: build the product page in PageFly

1. Create a product page

Open PageFly from Apps in your Shopify admin. In the PageFly dashboard, go to Pages and create a new page. You can start from a blank page or from one of PageFly’s templates. Either way, choose Product as the page type. That is what turns the page into a product template rather than a regular page. If you pick a template, filter by your store’s niche, hover over a design and click Select. See PageFly’s guide to creating a page from a template.

Starting from a template is usually the faster route. You get a tested structure and spend your time on content instead of spacing. Starting blank makes sense when you have a clear design from a designer or a page you want to recreate.

2. Add the product elements

Open the element catalog, switch to the Shopify elements and look in the Product group. The quickest start is the Product Details element. It drops a complete buy box onto the canvas in one go, and you can then rearrange or restyle its parts. If you prefer to build the buy box piece by piece, PageFly has separate elements for:

• Product Media: the image and video gallery
• Product Title and Product Price, which update automatically, including sale prices
• Product Variant: options such as size and colour, shown as dropdowns or swatches
• Product Quantity: the quantity selector
• Product Add to Cart: the buy button
• Product Description: the description you wrote in Shopify

Keep the variant selector and the add to cart button inside the same product block so the button adds the variant the shopper picked. The full list is in PageFly’s product element documentation.

3. Build the selling sections below the buy box

This is where a PageFly product page pulls ahead of a standard theme layout. Hover over a section, click the + icon and choose Template to insert a premade section. The categories include client logos, product information, specifications, testimonials and product suggestions. A structure that works for most single-product pages:

1. Key benefits: three or four short points with icons, right below the fold.
2. How it works or what’s included: an image with text explaining use, materials or the box contents.
3. Proof: customer reviews, press logos or a short quote.
4. Fit, size or specs: a table or guide that answers the question most likely to cause a return.
5. FAQ: shipping, returns and care, kept short.
6. Cross-sell: a product suggestion section linked to a collection, set in its General tab with Custom Collection.

Write this content for the whole group of products you will assign. A sentence like “Tailored from wool blend fabric” is fine on one suit’s page but wrong if the page is assigned to every product in the store. Anything specific to one product belongs in its Shopify description or in product metafields, not in static text on a shared layout.

4. Add a sticky add to cart bar

On long product pages, the buy button scrolls out of sight. PageFly’s Sticky Bar element fixes that. Drag it from Shopify Elements > Product onto the page. It holds the image, title, price, variants, quantity and add to cart, and you can rearrange its child elements. In the General tab, set Position to Bottom or Top. Under Display When, choose Show When Scrolling and pick the section that should trigger it, usually the section right below the main buy box. The scroll trigger only works on the live page, not inside the editor, so test it after publishing.

Assign the page to your products

A product page with no products assigned shows nowhere. Open the page settings in the editor (the gear icon in the left bar) and set the Page Type to product if it is not already. Then open Page Assignment (the tag icon just above the gear). You have two choices:

• All products: every product in the store uses this layout. Pick this only if the content is truly generic.
• Custom Products: click to add products and select only the ones that should use this layout, such as a hero product or one product line.

PageFly requires at least one assigned product before it will save the page settings. While you are in there, note the Theme Template Name and check the Theme’s Sections options, which control whether your theme’s header and footer show on the page. In most stores you want both visible so the navigation and cart icon stay in place. Details are in PageFly’s page settings guide.

Make it work on mobile

Most Shopify traffic arrives on phones, so treat the mobile layout as the main version. Use the Device Switcher at the top of the PageFly editor to move between Desktop, Laptop, Tablet and Mobile views. Settings marked with a screen icon can be styled per device. Settings without it apply everywhere, so a change there on mobile also changes desktop.

A checklist for the mobile view:

• Buy box first. Media, title, price, variants and the button should all appear before any long content. If columns stack in the wrong order, PageFly’s responsive guide explains how to reverse the order.
• One or two items per row for icon lists and product suggestions. Four tiny cards in a row are unreadable on a phone.
• Font sizes and spacing: reduce heading sizes and section padding for mobile only, using the per-device settings.
• Hide sparingly. You can hide an element on certain devices from General > Visibility, but PageFly warns that hidden elements still load and can slow the page. Simplify a section rather than building separate desktop and mobile copies of it.

Save, publish and check it in Shopify

Save the page, then publish it from the editor. Publishing writes the template into your live theme. Then switch to the Shopify admin and confirm the result:

1. Go to Products and open one of the products you assigned.
2. In the Theme template section, check that the PageFly template is selected. If a product still shows the default template, choose the PageFly one from the dropdown and save. To change many products at once, select them in the product list, click Bulk edit, add the Template column from Columns and set it for the range. Shopify’s templates guide covers both methods.
3. Open the product on your storefront in a private browser window, on desktop and on a real phone.
4. Pick each variant and confirm the price and image update, add to cart, and complete a test checkout up to the payment step.

Hide the duplicate theme product section

On Online Store 2.0 themes such as Dawn, the PageFly content can sit alongside the theme’s own product section, so the shopper sees two buy boxes. In the PageFly editor, use the more actions menu at the top right and choose to go to the theme editor. Then hide the theme’s default product information section with the eye icon and drag the PageFly section into place. On older (vintage) themes, PageFly instead offers a page setting to stop showing the default product details. Check this on every new product page, because a double buy box confuses shoppers.

Common mistakes and how to fix them

• The page looks right in the editor but the live product shows the old layout. The product is still on another theme template. Check its Theme template in the Shopify admin. A template override on the product wins over the assignment you set in PageFly.
• Two buy boxes or two descriptions. The theme’s own product section is still visible. Hide it in the theme editor as described above.
• Changes vanished after switching themes. PageFly publishes into the current live theme. After you publish a new theme, republish your PageFly pages and give them a few minutes to appear.
• The wrong variant goes into the cart. The variant selector and the add to cart button are in different product blocks. Keep them in the same one.
• Product-specific text on a shared layout. A layout assigned to all products should only contain generic copy. Move specifics into the Shopify description or metafields.
• The page feels slow. Large uncompressed images, autoplay videos and many hidden elements add weight. Compress images before uploading, and remove sections that do not help a shopper decide.
• The sticky bar never appears in the editor. This is expected when it is set to show on scroll. Test it on the published page.

Start faster with a ready-made PageFly design

If you would rather not lay out every section yourself, a template built in PageFly already includes a styled product page you can import, assign and adjust. Suitify is built for menswear and tailoring stores, Optikify fits eyewear shops that need room for frame details and fit information, and Coatify suits outerwear stores with seasonal collections. Because they are PageFly pages, everything in this guide still applies: assign them to your products, tune the mobile view and check the theme template in Shopify.

Wrap-up: your next step

Build one product page first, for your best-selling or highest-margin product, and assign it with Custom Products rather than to the whole store. Publish it, confirm the theme template in Shopify, test every variant on a phone, then watch its add-to-cart rate for a few weeks against the products still on the default layout. If it does better, roll the layout out to similar products one group at a time.

A strong page also needs a good reason to buy now. Pair it with a clear shipping offer, such as the one in our guide to setting up free shipping over a threshold in Shopify, and mention it in the buy box. To learn more about the app itself, our PageFly review covers its strengths and limits.