Blog

Top 10 product pages built with the PageFly app

Top 10 product pages built with the PageFly app

Shopify product pages shouldn’t just be a bunch of boring pictures randomly tossed into a gallery.

According to Nielsen Norman Group, half of all online purchases occur within 28 minutes of the initial click, 75% within 24 hrs, 90% by day 12 and the reminder takes more than 4 weeks

Most buying decisions are made in less than 30 minutes. Trust me, it’s shorter than you might think, and plus, it’s super complex. The buying decisions involve a lot of browsing product pages, hopping from one shop to another, comparing, adding stuff to cart and phew, paying.

A product page, therefore, shouldn’t be a turn-off. Instead, your Shopify product pages have to be a shortcut - taking visitors immediately to the add-to-cart and payment pages.

In this blog post, I’ll give you our hand-picked Top 10 Shopify product pages created with PageFly and why we think they work wonders.

The approach here is that I’ll be a regular customer casually scrolling through the page from top to bottom. Let’s see what makes me (and you) stick around!

Outline

TOP 10 product pages built with the PageFly app

Kemimoto

Shopify product page

The upper part of the page is consistent in colour. I like how the brand picks a slightness of red for their logo and keeps it running through texts, social media handles, buttons, etc. 

The navigation pane is clear to...navigate. Knowing where I am on the site can help me easily get to another page and explore more. For example, here I can access the Can-Am Maverick X3 Parts & Accessories collection.

With regard to premium products, the page goes further than displaying plain details about them. It sells by informing! As I keep scrolling down, I find myself really invested in their detailed description, figment and shipping policy, along with video and animations as cool bonuses.

PageFly product page

PageFly product page

Animation

PageFly product page

business&pleasure co.

PageFly product page

Information board is split into two pieces: Description & Specs. Just like with Kemimoto, the product overview here evokes emotion while being greatly informative.

PageFly product page

The ‘You may also like’ list by PageFly encourages beach ladies to explore related products and buy more. At the same time, the navigation pane below helps users return and look at the collection as a whole.

Credits should go to the built-in Yotpo app on PageFly. By exporting user Instagram pictures into a PageFly slideshows, business&pleasure co. evokes a need to travel, be free, and look good, targeting almost all the ladies out there.

PageFly product page

Char Griller

In times like these, I miss going out with friends. I visit Char Griller and I just love how they convince me that I’m going to have a great time once the coronavirus crisis is over. It starts with the red colours sprayed all over the place and the pictures of food.

PageFly product page

The product's main image is accompanied by a series of food photos and parties alike. The product description also goes beyond lengthy words with an instruction video.

A link to the related product (Char-Griller 5555 Grill Cover) is a see-more trigger.

PageFly product page

Three calls to action at the end of the description separately direct customers to their supporting sites - the ‘Need parts’ and ‘Need a cover’ calls take you to a collection, while the other takes you to a manual.

Merchants can use HTML/Liquid element to display custom content on the live page with code from outside

PageFly product page

What’s the lesson here? Ask yourself what you SUBTLY want to see on a product page. Is it just the product itself?

PageFly product page

An add-to-cart button is rarely enough. Sometimes customers might skip an opportunity and will later want to turn back time and make a better choice.

By referring to Wiser directly in the PageFly editor, you can easily showcase personalised product recommendations to every shopper

The ‘Viewed products’ tab allows them to do just that.

Mdrive

Probably one of those few product pages that make medical information exciting to follow.

From head to bottom, Mdrive drives attention to their important information blocks by making the best use of PageFly animation.

‘Flash’, ‘fade-in’ and many other effects all come into play

PageFly product page

The supplement bottle box can be viewed from all angles thanks to the vertical image list on the left. Showing the packaging this way can help potential buyers take a closer look into the elements contained in the medical product.

Nothing pushes customers away harder than a vague brand promise, especially when it comes to medication. Clear illustrative images with links to explanatory pages are how Mdrive proves themselves trustworthy.

Although more or less different in their design, those pages are developed on the same flexible basis of PageFly regular page type.

PageFly product page

Some more trust elements

 PageFly product page

PageFly product page

Don’t forget that you always have PageFly’s built-in third-party apps to keep you company. In this case, a review section is transparently displayed in full to make the page look more convincing to visitors.

PageFly product page

Gabriel Ash

This following product page is a great demonstration of how minimalism is put to best use. The store owners come from an architectural background, and it’s quite obvious that they have racked their architecture brain into organising their pages as well.

Heads-up: Gabriel Ash sells real housing models (houses, buildings, etc.). The price range stays undisclosed, which is reasonably native to this niche. All touchpoints here, therefore, should lead to a potential person-to-person discussion.

The banner leads to a brochure order page

PageFly product page

Many elements (‘form’ included) can be inserted inside a PageFly ‘tab’

PageFly product page

A pop-up bubble in the related products makes the whole page look more animated. For me, I like the two suggestions below better - call-to-action buttons against the backdrops of poetic models.

Just like designing an artistic magazine, PageFly gives users flexibility to customise their pages. As long as you have a concrete idea in mind, the best Shopify page builder will help you refine the visualisation to its best.

Active 5

Before we dive into one specific product, it should be noted that there are only 5 product items on display. The owners really took their time to curate unique content for each of them.

 PageFly product page

Product details with sales items and slideshows of related products

PageFly product page

Two sections dedicated to benefit package and testimonials

PageFly product page

Now let’s look at some key takeaways from each product page.

For products that come in great price or comprise smaller product units, a call-to-action button to a contact form is a good option - a sales & marketing funnel, that is.

PageFly product page

PageFly product page

For a costly tech product, having a physical store is important as your customers might want to drop by and get their hands on the product. You can attach the link to it in the description, just like Activbody.

PageFly product page

Ruffnek

The fly-up animation can be activated anywhere from the PageFly editor, right from the moment you enter the page. Yet, the load speed doesn’t take long.

PageFly product page

Unlike other pages above, the product pictures here are put in vertical arrangement.

PageFly product page

The three accordions

PageFly product page 

Wildbounds

The same vertical arrangement applies to camp supplies by Wildbounds. Merchants can learn from this structure to highlight the product height.

PageFly product page

One thing to note: Selecting a product colour will open a new page, which means it will take some time to load. I would recommend they make it a product variant to limit page switching time.

Here comes another product videoPageFly product page

Unlike above banners, Wildbounds put their promo banner in the middle of the page. This is to feed customers information as they start to look for other products. The Shop Now Button will direct you back to new products, and the shopping cycle will start over smoothly.

Find inspiration for your compelling PageFly buttons

PageFly product page

Artiplanto

I know I’m talking quite a lot about vertical arrangement and how it helps you focus on the height of your products. However, Artiplanto uses their tasteful eyes to engineer it a bit differently.

The product images slide up through every scroll.

PageFly product page

Interestingly, when you click on a picture, it will auto-scroll to the corresponding image. This can be achieved by using Attributes and ‘sticky sections’

PageFly product page

Don’t forget the countdown timer for the FOMO effect.

PageFly product page

Waterdrop

The product page is as beautiful as the product itself.

PageFly product page

The product comes in 10 colours, or 10 product variants. By using product variants, Waterdrop product pages take a shorter time to load than those of Wildbounds.

The store merchant seems like a big fan of slideshows. Product presentation, achievements and reviews - it all comes in slides. All it takes is a drag-and-drop from the PageFly element list.

PageFly product page

PageFly product page

Apart from the useful accordions and sales items, a banner of beautiful collections will urge users to click and see more.

Wait, so what now?

Let’s agree on the fact that the main function of a product page is to define products with images, details, price, ATC button, etc, thereby motivating customers to make a buying decision.

If you’re designing a product page for your clients, you know it is easier said than done! Our top 10 product pages stick to the rules of a standard product page and simultaneously create novel things by making the best use of PageFly additional features.

*Note: We have a diverse team of marketers and developers to support your work

 

 

Brush up on some following pro tips before you go!

Video on Shopify product page

Yes x3000 times!

A product video is an explanation video that effectively demonstrates the benefits of a product.

If the pictures and descriptions provide a theoretical relevance, a video is where customers can see the product in use and in motion.

Pro tip: While many product videos focus on the features of the product, let’s concentrate on how the product relieves the pain points these customers may encounter.

Adding a HTML Video in PageFly editor

PageFly product page

Speed load optimisation: PageFly Lazyload

What concerns most merchants about an interactive product page is the load speed.

How can you create moving effects on so many different PageFly page types without compromising page performance?

By using Lazy-load for your page, we can see 10-30% of reduction in the page loading time.

Mobile Mentality

Being mobile-conscious should just be common sense in this digital era. Jumping from store to store now only takes a single touch on the screen, making it easier for customers to quit halfway through browsing.

Learn how to design a product page compatible with various devices here

Take these inspirations from our Top 10 product pages and make your page more mobile-responsive!

PageFly product page

PageFly product page

PageFly product page

That’s it for the pep talk. Now it’s time to break all product page stereotypes using PageFly! 

One last thing: If you’re setting up a Shopify client store using PageFly, you might be interested to know you can earn extra money with the PageFly affiliate programme. Whether you’re a freelance Youtube content creator or an agency, the programme is equally beneficial to any of you.

Join PageFly Affiliate Programme

Older Post Newer Post