Getting your product pages right

The examples in this guide rest on nine demo applications, split into two families. Find the one that most resembles your project: the advice then adapts to any business.

Yogii for a store, Léonie for a ready-to-wear shop, Urban Shango for fashion items, Metek for a decoration shop.

The features that structure this family:

• Product Import: manage your catalog in bulk, with no limit on numbers.
• Product variants: several options for the same product.
• Abandoned Orders Recovery: emails and push notifications to encourage completion.
• Cart reminder pop-up: on the customer's return, if items remain from a previous visit, a pop-up leads straight to checkout.
• "Buy again" button: adds all the products from an existing order to the basket in one click.
• Quick buy: buy buttons on the home screen and in product lists, to add to the basket without leaving the page.
• Blog: extra content in the app, and extra visibility on search engines.
• One-click payment: access to digital wallets.

Augustin for a caterer, Oribu for a local producer, Camelia for a florist, Hunky Dory for a grocery store, Bistrot Georges for a restaurant.

The features that structure this family:

• Offline payment: the customer pays outside the application, when they receive their order.
• Local delivery by postcode: your delivery zones are configured by postcode.
• Delivery slots: you define the windows during which you deliver or hand over orders, and your customer chooses theirs when ordering.
• Points of sale: a quick overview of your different outlets.
• Click & Collect: the order is collected directly in store.
• Fast checkout: the unnecessary steps disappear, only the information tied to the delivery method is asked for.
• Order instructions: the customer leaves a comment.
• Automatic login: the customer identifies themselves once, then is recognized on every launch.

If you only remember one rule, it's this one. And it starts with a counter-intuitive warning: don't bet everything on SEO.

Search engine optimization is still necessary, it governs your visibility. But a product page written only for the engines won't be read attentively by your prospects. And they're the ones who buy.

Putting yourself in the customer's seat plays out on two levels.

The form. Choose your target's words, not yours. Overly technical terms often only speak to the seller. The expressions your customers actually use make the page more readable, and they recognize themselves in it.

The substance. These are your selling arguments. Careful: the advantages you see in your product aren't necessarily the ones your customer is looking for. Start from their needs, then put forward the qualities of the product that answer them.

Take Oribu, our local producer, on a jam's product page. The commercial title announces the flavor: the customer immediately knows what it is. The subtitle specifies that the product is organically farmed, and that's no accident. Oribu speaks to committed consumers, attentive to origin and ethics. So the description uses their words: "organic farming", "local and sustainable production", "produce harvested in season". The delivery conditions, at the bottom of the description, put forward the same values.

Once your arguments are chosen, make sure they belong to you.

At Oribu, the products are unique by nature since they're made on site. But other people sell artisanal jams, and the description mustn't be interchangeable with theirs.

The risk is greater still when you resell a supplier's products, in decoration for example. You're probably not the only one to have drawn on their catalog. The worst mistake then is to copy and paste the supplier's page, or worse, a competitor's.

Consumers compare from one shop to another. A unique page sets you apart and proves you're serious.

In the Metek application, the tableware set is presented technically, but also with styling and decoration advice, which is the shop's core expertise. Then come tips on use and care. Those attentions build trust and position Metek as a reference.

One last, more mechanical argument: Google doesn't like copy-paste. Not personalizing your product pages directly holds back your ranking.

Beyond being unique, a product page can carry a narrative. Storytelling brings your customer into your brand's story, catches their interest and prepares them for loyalty.

You necessarily have a reason for having set this shop up, and codes you share with your target. The product page is the right place to bring them out. The condition is honesty: it isn't about inventing a story, it's about producing an emotion, because that's what your customer will remember.

The aim isn't to tell a complete story on the page, but to add a touch of sensation to the description.

The Augustin app, a caterer, gives a good example. Beyond the ingredients, the description plunges the reader into the mood of the dish. Here's the text added to their burrata page:

The customer is no longer buying a dairy product, they're buying an escape. It can be done on a product of total simplicity, which makes the method transferable anywhere.

In a physical shop, the customer touches, weighs, smells. Online, all they have left is sight. So your images are the only sensory contact with your product, and the human connection that exists naturally in a shop has to be made up for another way, through the visual and through the story.

The most telling comparison: would you trust a merchant selling you their goods in torn packaging? Online, a pixellated or dark photo produces exactly that effect. Your visuals have to be good enough for the customer to picture themselves holding the product.

Is the visual more important than the text? Neither: they complement each other, and neglecting one ruins the other. A beautiful photo on a rushed description leaves the customer with no answers to their questions; a careful description on a mediocre photo never makes them want to read it.

Think about varying formats too. Video simplifies your message, since the customer no longer has to cross-reference text and images to form an idea. It places the product in space, shows it in action, demonstrates how easy it is to use. It's the format closest to what handling it in a shop would have been, and that's why it weighs so much at the moment of deciding. It can also serve to carry customer reviews in a livelier way.

GoodBarber lets you display one or several videos in your product pages, at the description level.

https://youtu.be/scpB6PnaShM

GIFs, an alternative to video. Producing a video often calls for a professional, and therefore a budget. A GIF is far simpler to create, it animates your page and sets you apart from your competitors, for the same uses: setting the scene, demonstrating. GoodBarber lets you insert GIFs into the product page, including among the main images.

https://youtu.be/yLgQ-47DnJ4

Prefer natural light. In daylight, you'll get the best results. If that's impossible, artificial lighting works, on one condition: the smaller the light source, the harsher the shadows. A source smaller than the product gives hard shadows. So favor diffuse, dominant sources that spread around the product. If you use a flash, a diffuser stops shadows polluting the photo, and a simple piece of tape or a plastic film stuck over the flash does the job.

Bet on a white background. It concentrates attention on the product, gives the page a clean style, and above all it makes your product list uniform.

Shoot from several angles. It's the best way to present a product in detail and let the customer picture it. Add close-ups, which let people appreciate the finish, and photos in context, which give an idea of real size.

The camera. You don't need to invest heavily. The latest generations of smartphones are more than enough for very good photos. Equipment matters, but it must never become the excuse that stops you starting. For more experienced merchants, or for very precise images, an SLR becomes necessary: it gives access to white balance and focus.

Background and light. You need a smooth white background and dedicated lighting. Buy rolled paper from a craft supplies shop, as white as possible. Add a white foam board or a piece of card to bounce light back onto the product and get even lighting. Affordable lighting kits exist, it's a small investment that pays off.

The space. For small objects, a table against a white wall is enough. Check the decor around it and avoid brightly colored rooms: a shiny product reflects everything around it. If you can't change rooms, cover the space with white paper or fabric.

The move that changes everything: tape the white paper to the wall and bring it back onto the table, so as to create a gentle curve. It softens shadows and diffuses light better. Then place the lighting and move the white board so that the whole product is in the lit zone.

Retouching is the last step before publishing. It genuinely improves a photo through corrections of color, brightness and contrast. But it doesn't save a bad photo: a bad photo will stay bad, whatever your skills.

Adobe Photoshop and Lightroom are very powerful, with two drawbacks: you have to learn them, and they cost money. For the learning, tutorials abound online. For the price, there's no way around it. If you're looking for free, GIMP and Pixlr do the job.

Objects. Look around you: you'll certainly find objects capable of showing your products off. For a clothing shop, choose props consistent with the storytelling you've established and with the image you want to give. The principle holds for every type of product.

People. As well as photos where the product is alone, include people. The use is obvious for clothing, where it shows the cut and the drape. But it holds elsewhere: in decoration, a human presence puts the object back into context and gives its scale. In food, it helps the customer picture it.

The technical characteristics. GoodBarber accepts up to 25 images per product.

• Maximum size: 4 MB
• Recommended format: JPEG

There's no restriction on dimensions, but bear this in mind: when you add several images, the dimensions of the first one set the height of the slideshow your customer sees. So the choice of that first image isn't neutral.

The order. Once all your images are added, you define the order they appear in. Put the most persuasive one first, according to the type of product.

Think about what each image is for. The useful minimum:

• an image of the product on a white background
• a close-up on the important details
• an image in context, which shows the product off

The thumbnail. You manually choose the one that will appear in your product list and on your home screen widgets. The only principle to remember is harmonization: thumbnails are almost always seen several at a time, side by side. So think about the overall effect, not about each thumbnail in isolation. A white background is the safest solution.

If a white background doesn't suit you, at least keep a consistent treatment. In the Hunky Dory app, all the products without a white background are photographed in close-up, as a pattern.

A product page gathers all of a product's characteristics, one page per product. It's your best chance of convincing.

Its first purpose is to inform: price, weight, dimensions, material, ingredients, depending on what you sell. It should be as detailed as possible, for two reasons:

• your customers need as much information as possible to choose correctly
• a detailed page establishes you as an expert in your field

Content and organization vary with the product. Some need a lot of visuals, others precise technical characteristics. Beyond the description and the images, the page can hold dynamic elements that serve your selling strategies.

Your back office lets you add, on top of the main images, text, extra images and videos.

Structure the description. The customer has to understand immediately where to find what they're after. There's no ideal structure, it depends on the product, but here's a base to adapt.

• The main characteristics. The major information: materials for a garment, dimensions for a piece of furniture, ingredients or composition for a dish. This part doesn't need to be long, but it has to be clear and direct, so that the customer knows straight away what they're about to buy.
• The use cases. Put the product in a situation. Photos of the garment being worn, staged shots for decoration. If you can, add a video here: showing the product in use is still the best trigger.
• The instructions. The technical part, presented concisely. Nobody expects a complete manual, but the useful information: a care guide for textiles, preparation tips or allergens for food.

Two habits to finish. Take the time to list, from your customer's seat, all the information needed to sell the product clearly. And keep a consistent structure from one page to the next: if the composition is in the last paragraph, let it be there everywhere. Your customers will know immediately where to look, instead of reorienting themselves on every page.

Sometimes the page isn't enough. You can then attach a PDF file to it.

That's useful for a complex product calling for a very precise description, in consumer electronics or home appliances for example. Fitting a coffee machine's complete manual into a product page would make no sense: you'd drown your selling arguments in technical documentation. The PDF makes that information available without polluting the main content.

Second advantage: it can be downloaded. Your customer keeps it, consults it later, prints it if it's a manual. It's a link that survives even when the purchase doesn't conclude straight away.

Before attaching it, know that search engines treat PDFs like web pages and index their content. So your file can earn you traffic, which immediately rules out the idea of duplicating your product page in it.

A few optimization rules:

• Create the document at standard print size (A4), for those who will print it.
• Fill in the metadata: title, author, subject, keywords. They're generally edited in the "Properties" section of your editing software.
• Avoid files that are too heavy, which display slowly.
• Take care with the file name. Not manual.pdf, but manual_your_product_name_model_name_year.pdf.
• Put a link to your app in the document. It helps navigation, and it serves your link building.

Open the product from Products › All products. In the Edit Product panel, Info tab, the PDF attachment block offers Browse..., then adds your .pdf file.

Choose your file, then click Add. It's immediately available on the page.

Product pages are the main content of your Shopping App. How you place your keywords in them determines the quality of the traffic you attract.

The obvious strategy is to aim at the most searched keywords. It carries a bias: intent. Searching for "oversized shirt" doesn't mean wanting to buy one. The person may be looking for outfit ideas, because they already own one.

Three ways to correct that bias:

• Analyze the top 10 results for the keyword you're targeting. If those pages resemble yours, the engine has understood the link between that keyword and your page's purpose.
• Look at the search volume. The lower it is, the more the query is a niche one. A user searching a niche term already knows your field and converts more easily.
• Spot the intent markers. Action verbs and geographic details betray a purchase intent: "buy", "purchase", "cheap" signal someone looking for a seller. A product name followed by a town or a region often means someone looking for a physical outlet.

Once your keywords are chosen, place them at the strategic spots:

• the product page's title
• the short description
• the overall description, at least twice per keyword
• the page's URL

Two complementary habits: work in phrases rather than isolated words, and put in bold the terms you want to flag to the engines.

Open the product from Products › All products: the right-hand panel, Edit Product, carries two tabs, Info and SEO. In the SEO tab, you'll find three fields:

• the Title tag
• the Meta description tag
• the URL

Those are exactly the three strategic spots mentioned above. The back office also gives you a preview of the search result as it will appear.

In the example, a restaurant offering a Click & Collect service: the keywords answer the three questions the buyer is asking, what's being sold, where, and how.

Variants let you sell a product with several options, without duplicating it.

Take a skirt available from XS to XL. The SKIRT product carries a SIZE option with 5 variants. If the skirt also exists in a second color in the same sizes, the product carries two options, SIZE and COLOR, and counts 10 variants.

Each variant can have its own image and its own price, which leaves you free to manage your range as you like. The mechanism holds for every business: a grocery store sells the same food in several sizes, a restaurant offers several sides with a dish.

Open your product from Products › All products, then, in the Pricing and variants block, click Add an option.

Name your option. Back to the skirt, the first one is called "COLOR".

Then create the "SIZE" option.

Finally, create as many variants as needed to cover every combination. If the visuals differ by option, attach its own image to each variant.

You can do the same on prices. If the green skirt is on sale:

Your customers then choose their options directly from the product page.

Variants are sometimes essential, but use them sparingly: too many options weigh the page down and complicate the decision.

Back to the skirt. Two options, color and size, stay readable: the customer understands immediately.

If that model also existed in several materials, on the other hand, you'd have to add a "MATERIAL" option with the variants "LEATHER", "TULLE" and "SILK". The number of combinations explodes.

The product will eventually stop you, in fact: a page accepts 100 variants at most, and the back office only flags it once the ceiling is reached. It's possible, but it's neither the most intuitive for the customer nor the most flattering for your products. Better then to split into three separate products: a tulle skirt, a leather one, a silk one.

The gain is twofold. The three options become visible directly in the product list. And the keywords "silk", "tulle", "leather" become usable, since each version then has its own page, its own title and its own tags.

In other words: variants serve secondary differences, separate products serve the differences your customer considers major. That boundary is what decides, and it depends on what you sell.

Cross-selling suggests additional purchases to a customer already on one of your pages. It raises the average basket at no cost to you, and works on three levels.

The average basket, first. Beyond the number of sales, you optimize your handling costs: selling three products in one order beats three separate orders. Less processing time, shipping costs paid once. The saving looks derisory per unit, it stops being so at scale.

Loyalty, next. From the customer's point of view, a relevant suggestion amounts to anticipating their need. You become a facilitator, and that weighs on their attachment to your brand.

The visibility of certain products, finally. Cross-selling brings a little-known item or a new arrival into the light, and shows how useful it is once paired with others.

Similar products. The most common one: you offer products that meet the same need. A customer is looking at a cushion's page, you show them other cushions in a comparable price range.

Products sold separately. Particularly effective, because it touches on use. You show what's needed to use the product being viewed. On a cushion cover's page, you offer the matching cushion. The principle is that the complementary purchase conditions the use of the main product. The customer may already own it, but if not, one click saves them a search. One caution though: be very clear about what is and isn't included in the purchase, or you'll create disappointment on delivery.

"You'll also like" products. You show items sharing characteristics with the main product: color, material, style, collection. This is where your expert eye counts most. The right question to ask is simple: what would you have advised if the customer were standing in front of you?

On a terracotta tableware set's page, the main asset is the material, which is much sought after. So you bet on it to offer other terracotta items in the same price range.

"Buy the set" products. You offer the complete package. If your page presents the product in a staged shot, offer the other elements of the scene. The strategy works particularly well in clothing, in decoration and in fine food around recipes.

Picture sliced truffles served on toast over a watercress salad: from that page, offer the country bread, the watercress, the sea salt and the olive oil. You're the expert, your customer isn't necessarily, and they may have neither the time nor the confidence to combine the products themselves. The more supported they feel, the more they buy and come back.

Open the page from Products › All products: the Similar products block is in the Edit Product panel, Info tab.

By default, items are added automatically, based on the tags applied to your products and on the collections they belong to.

That automatic behavior is already enough for some strategies. For the "you'll also like" strategy above, it would have been enough to apply the "terracotta" tag to the products concerned for them to come up in the tableware set's suggestions.

For more precise strategies, take back control: delete the automatically added products, then search for the ones you want to display.

Featuring a product gives it a bigger place than the others in a list, and directs your customers' attention where you decide.

Three main uses:

• displaying your best sellers, to show the shop's successes
• presenting your emblematic products, to establish your reputation
• pushing your promotional items, to increase your sales

A fourth, less obvious use: presenting the centerpiece of a collection. On a list devoted to a trend, the ceramic set is displayed large, and the collection's other products arrange themselves around it.

On the product's editing page, right-hand panel, Display in list section: choose Highlight instead of Classic. Your product then appears with a bigger thumbnail than the others.

You can feature several products in the same list, according to your needs.