Skip to product menu
close
  • Recent Launches
    Press Space or Enter to display list of options
EXPLORE ALL PRODUCTS

Recent Launches

New

Payroll software with automated tax payments and filing.

Try now
New

Robotic process automation software to automate high-volume, rule-based tasks.

Try for free
New

Low-code IoT platform and solutions for connected businesses.

Try now
New

Business formation service to launch and grow your businesses.

Try now
New

Privacy-friendly application analytics solution.

Try for free

Sales

 
CRM

Comprehensive CRM platform for customer-facing teams.

CRM
 
Bigin

Simple CRM for small businesses moving from spreadsheets.

Bigin
 
Forms

Build online forms for every business need.

Forms
 
SalesIQ

Live chat app to engage and convert website visitors.

SalesIQ
 
Bookings

Appointment scheduling app for consultations with customers.

Bookings
 
Sign

Digital signature app for businesses.

Sign
 
RouteIQ

Comprehensive sales map visualization and optimal route planning solution.

RouteIQ
 
Thrive

Complete loyalty and affiliate management platform.

Thrive
 
Voice

Cloud Contact Center Software for businesses.

Voice
 
Suites
CRM Plus

Unified platform to deliver top-notch customer experience.

CRM Plus

Marketing

 
Social

All-in-one social media management software.

Social
 
Campaigns

Create, send, and track targeted email campaigns that drive sales.

Campaigns
 
Forms

Build online forms for every business need.

Forms
 
Survey

Design surveys to reach and interact with your audience.

Survey
 
Sites

Online website builder with extensive customisation options.

Sites
 
PageSense

Website conversion optimization and personalisation platform.

PageSense
 
Backstage

End-to-end event management software.

Backstage
 
Webinar

Webinar platform for webcasting online webinars.

Webinar
 
Marketing Automation

All-in-one marketing automation software.

Marketing Automation
 
LandingPage

Smart landing page builder to increase conversion rates

LandingPage
 
Publish

Manage all your local business listings on a single platform.

Publish
 
SalesIQ

Live chat app to engage and convert website visitors.

SalesIQ
 
Sign

Digital signature app for businesses.

Sign
 
Thrive

Complete loyalty and affiliate management platform.

Thrive
 
Voice

Cloud Contact Center Software for businesses.

Voice
 
NEW
LeadChain

Sync, manage, and convert leads across channels seamlessly.

LeadChain
 
NEW
CommunitySpaces

Online community platform for individuals and businesses to grow their network and brand.

CommunitySpaces
 
Suites
Marketing Plus

Unified marketing platform for marketing teams.

Marketing Plus

Commerce and POS

 
Commerce

eCommerce platform to manage and market your online store.

Commerce

Service

 
Desk

Helpdesk software to deliver great customer support.

Desk
 
Assist

Remote support and unattended remote access software.

Assist
 
Lens

Interactive remote assistance software with augmented reality.

Lens
 
FSM

End-to-end field service management platform for service businesses.

FSM
 
SalesIQ

Live chat app to engage and convert website visitors.

SalesIQ
 
Voice

Cloud Contact Center Software for businesses.

Voice
 
NEW
Solo

The all-in-one toolkit for solopreneurs.

Solo
 
Bookings

Appointment scheduling app for consultations with customers.

Bookings
 
Suites
Service Plus

Unified platform for customer service and support teams.

Service Plus

Finance

 
Books

Powerful accounting platform for growing businesses.

Books
 
FREE
Invoice

100% Free invoicing solution.

Invoice
 
Expense

Effortless expense reporting platform.

Expense
 
Inventory

Powerful stock management and inventory control software.

Inventory
 
Billing

End-to-end billing solution for your business.

Billing
 
Checkout

Collect payments online with custom branded pages.

Checkout
 
NEW
Payroll

Payroll software with automated tax payments and filing.

Payroll
 
NEW
Solo

The all-in-one toolkit for solopreneurs.

Solo
 
Practice

Practice management software for accounting firms.

Practice
 
Sign

Digital signature app for businesses.

Sign
 
Commerce

eCommerce platform to manage and market your online store.

Commerce
 
Suites
Finance Plus

All-in-one suite to manage your operations and finances.

Finance Plus

Email and Collaboration

 
Mail

Secure email service for teams of all sizes.

Mail
 
Meeting

Online meeting software for all your video conferencing & webinar needs.

Meeting
 
Writer

Word processor for focused writing and discussions.

Writer
 
Sheet

Spreadsheet software for collaborative teams.

Sheet
 
Show

Create, edit, and share slides with a sleek presentation app.

Show
 
Notebook

Beautiful home for all your notes.

Notebook
 
Cliq

Stay in touch with teams no matter where you are.

Cliq
 
Connect

Employee experience platform to communicate, engage, and build positive employee relations.

Connect
 
Bookings

Appointment scheduling app for consultations with customers.

Bookings
 
TeamInbox

Shared inboxes for teams.

TeamInbox
 
WorkDrive

Online file management for teams.

WorkDrive
 
Sign

Digital signature app for businesses.

Sign
 
Office Suite

Powerful collaborative work platform for teams.

Office Suite
 
Office Integrator

Built in document editors for web apps.

Office Integrator
 
ZeptoMail

Secure and reliable transactional email sending service.

ZeptoMail
 
Calendar

Online business calendar to manage events and schedule appointments.

Calendar
 
Learn

Knowledge and learning management platform.

Learn
 
Voice

Cloud Contact Center Software for businesses.

Voice
 
ToDo

Collaborative task management for individuals and teams.

ToDo
 
Tables

Work management tool to connect people, processes, and information.

Tables
 
FREE
PDF Editor

Collaborative online PDF editing tool.

PDF Editor
 
Suites
Workplace

Application suite built to improve team productivity and collaboration.

Workplace

Human Resources

 
People

Organize, automate, and simplify your HR processes.

People
 
Recruit

Intuitive recruiting platform built to provide hiring solutions.

Recruit
 
Expense

Effortless expense reporting platform.

Expense
 
Workerly

Manage temporary staffing with an employee scheduling solution.

Workerly
 
NEW
Payroll

Payroll software with automated tax payments and filing.

Payroll
 
Shifts

Employee scheduling and time tracking app.

Shifts
 
Sign

Digital signature app for businesses.

Sign
 
Suites
People Plus

Comprehensive HR platform for seamless employee experiences.

People Plus

Security and IT Management

 
Creator

Build custom apps to simplify business processes.

Creator
 
Directory

Workforce identity and access management solution for cloud businesses.

Directory
 
FREE
OneAuth

Secure multi-factor authenticator (MFA) for all your online accounts.

OneAuth
 
Vault

Online password manager for teams.

Vault
 
Catalyst

Pro-code platform to build and deploy your apps.

Catalyst
 
Toolkit

Complete resource for any admin-related lookup queries.

Toolkit
 
Lens

Interactive remote assistance software with augmented reality.

Lens
 
Assist

Remote support and unattended remote access software.

Assist
 
QEngine

Test automation software to build, manage, execute, and report testcases.

QEngine
 
NEW
RPA

Automate manual, tedious, and repetitive tasks easily.

RPA

BI and Analytics

 
Analytics

Modern self-service BI and analytics platform.

Analytics
 
Embedded BI

Embedded analytics and white label BI solutions, tailored for your needs.

Embedded BI
 
DataPrep

AI-powered data preparation service for your data-driven organization.

DataPrep
 
NEW
IoT

Harnessing IoT analytics for real-time operational intelligence.

IoT

Project Management

 
Projects

Manage, track, and collaborate on projects with teams.

Projects
 
Sprints

Planning and tracking tool for scrum teams.

Sprints
 
BugTracker

Automatic bug tracking software for managing bugs.

BugTracker
 
NEW
Solo

The all-in-one toolkit for solopreneurs.

Solo

Developer Platforms

 
Creator

Build custom apps to simplify business processes.

Creator
 
Flow

Automate business workflows by creating smart integrations.

Flow
 
Catalyst

Pro-code platform to build and deploy your apps.

Catalyst
 
Office Integrator

Built in document editors for web apps.

Office Integrator
 
ZeptoMail

Secure and reliable transactional email sending service.

ZeptoMail
 
QEngine

Test automation software to build, manage, execute, and report testcases.

QEngine
 
Tables

Work management tool to connect people, processes, and information.

Tables
 
NEW
RPA

Automate manual, tedious, and repetitive tasks easily.

RPA
 
NEW
Apptics

Application analytics for all apps.

Apptics
 
Embedded BI

Embedded analytics and white label BI solutions, tailored for your needs.

Embedded BI
 
NEW
IoT

Build, deploy, and scale IoT solutions for connected businesses.

IoT
 
DataPrep

AI-powered data preparation service for your data-driven organization.

DataPrep

IoT

 
NEW
IoT

Low-code IoT platform and solutions for connected businesses.

IoT

Search Result

 
CRM Plus

Unified platform to deliver top-notch customer experience.

Try now
CRM Plus
 
Service Plus

Unified platform for customer service and support teams.

Try now
Service Plus
 
Finance Plus

All-in-one suite to manage your operations and finances.

Try now
Finance Plus
 
People Plus

Comprehensive HR platform for seamless employee experiences.

Try now
People Plus
 
Workplace

Application suite built to improve team productivity and collaboration.

Try now
Workplace
 
Marketing Plus

Unified marketing platform for marketing teams.

Try now
Marketing Plus
 
All-in-one suite

Zoho One

The Operating System for Business

Run your entire business on Zoho with our unified cloud software, designed to help you break down silos between departments and increase organizational efficiency.

TRY ZOHO ONE
Zoho One
Zoho Marketplace

With over 2000 ready-to-use extensions across 40+ categories, connect your favorite business tools with the Zoho products you already use.

EXPLORE MARKETPLACE
Marketplace
Skip to main content
Zoho Academy

Best Design Practices for Your Product Pages

  • 9 Mins Read
  • Posted on June 5, 2019
  • Last Updated on October 8, 2024
  • By Lauren

When we discussed best UX practices for your online store homepage, we emphasized that your homepage is the virtual equivalent of your storefront… so you should treat your homepage imagery with the same care and attention with which you treat your display window. This means picking and choosing which items to display (like your newest or best-selling products), rather than overwhelming your visitor with your entire product range.

With individual product pages, however, you have the opportunity to display every product you offer—in all its glory. This is not only your chance to communicate your business’s respectability and professionalism through design, as you do with your homepage. It’s also your chance to prove that each of your products is worthy of your business’s name.

Here are our best practices for doing so, while keeping user experience top-of-mind:

Make the best use of high-quality images

When’s the last time you bought a product online without knowing what it looked like? (We’re going to guess your answer to that question is pretty close to “never.”) No matter how compelling the copy on a product page is, high-quality photos will always communicate the benefits of a product more effectively than words can. Notice we said “high-quality.” This means large, high-resolution, professional, appealing—in fact, virtually irresistible—images.

Notice, too, that we said “images,” plural. Your prospects can’t hold your product in their hands—let alone try it on—before they buy it from you online. So give them as much visual information as you possibly can about your product.

Photos of your product from various angles give online shoppers a better sense of its size, shape, style, and color than a single photo ever could. We recommend a minimum of four product images from different angles. This simulates viewing it in person. If you sell clothes, have your model pose in a variety of positions, so prospects can see how the material hangs and folds as the model moves.

Make your images large… maybe even a little larger than you think you should. Hyundai increased its requests for test drives by 62% by ditching its thumbnail photos and displaying large, exquisite product photos of its cars. Razor company Harry’s also exemplifies this strategy:

Include a zoom feature so prospects can view your product close up and get a better sense of its texture. (Apps like All in One Product Zoom are great for this.) You might even consider a 360-degree view, so prospects can see your product from every angle, evoking a tactile experience with it. Companies such as Hoot offer services for 3D and 360-degree product photography.

Your product images should be situated front and center, above the fold. Your visitors clicked into the product page because they wanted to view the product… so give them what they’re looking for immediately.

If the product comes in multiple colors, include photos of each. “Green” can mean anything from lime to emerald to seaweed green, and prospects will want to know which they’re getting when they hit that “purchase” button. American Apparel offers eleven different color combinations of this shirt, and the image is refreshed with the new colors whenever a user hovers over another color combination box:

Include photos of your product in use. If you sell camping equipment, for example, offer high-resolution images of your products being passed around a campfire by a group of (very happy!) friends. This is called “lifestyle content,” and it allows prospects to envision themselves using and benefiting from your product. It’ll also give you an advantage over competitors who may be displaying images of their product without context.

When prospects get a glimpse of what ownership might look like, they’re better able to envision owning your product themselves. And envisioning is a crucial step toward purchasing.

Use video to bring your product to life

Product videos can work wonders for your conversions. Take Zappos, for example, which saw between a 6% and 30% increase in conversions when they began adding videos to their product pages.

Videos are the closest you get to a perfect display of your product. They also help you demonstrate more complex products (or disprove the perception that your product is difficult to use), show your production process, more thoroughly explain the differences between features, and give your customers and employees the opportunity to speak about an item they’re intimate with—whether because they use it or because they helped make it.

Pro tip: Make sure your images and videos don’t negatively influence your page load time. The faster your pages load, the better.

High-quality product photos and videos build trust, overcome objections, reduce purchase anxiety, let prospects understand what to expect, increase social sharing, and help differentiate you from your competitors. And, if you keep your imagery consistent, they also establish brand identity. They require a financial and time investment, for sure; but for all those benefits, it’ll be worth it.

Have a standout “Add to Cart” button

When a prospect clicks into a product page, the two things that should stand out most to them are 1) your product imagery and 2) your CTA button. Both should be visible above the fold. You know—and your prospects know—that the primary goal of your product page is conversions. Visitors will be expecting to see your CTA… and they’ll be confused if it’s not prominently located on your page. And confusion, so they say, is the enemy of conversion.

Make your visitors’ next step absolutely clear. Your “Add to Cart” button should pop. It should be in stark contrast to the overall color of your site’s palette. It should be large. And it should be placed logically within the information hierarchy on your product page.

This means that if your prospects require a lot of information about your product—this is typically the case if the product is complex, expensive, or both—your “Add to Cart” CTA should be placed both above the fold and below the fold, after your product detail copy.

Visitors should be able to view your product images, understand what they’re on the verge of purchasing through your product description, and then be immediately prompted by the CTA button to click.

Have an added-to-cart confirmation

Remember: Every aspect of users’ shopping and purchasing process needs to be as unambiguous as possible. Assure your prospect that the “Add to Cart” button just worked, as Banyan Botanicals does when they display the number of items in the cart in the top-right corner of the page. When a visitor hovers over this number, they’re shown the items the cart contains:

If your store is built on Commerce Plus, your site users will see a brief pop-up message notifying them that they’ve successfully added a product to their cart.

Include social sharing buttons

There’s no escaping social media at this point, and online stores aren’t an exception to the new rule. Including these buttons allows customers to promote your products for you—which means cost-free advertising and expansion of your audience base. It also means more ways to alert your followers to deals and sales. There’s every reason to include these buttons… and no reason not to.

Here’s an example from Lazy One. Their social sharing buttons are subtle, but they’re intelligently placed below the “Wish List” button so that prospects compiling their holiday or birthday wishlists can publicly share what they want with family and friends:

Pro tip: A wishlist is a terrific feature worth considering for your product pages. It lets prospects “bookmark” items for later purchase. It also gives you an opportunity to remind prospects about their wishlisted items with a targeted email later down the road.

Use breadcrumb navigation

In the last section, we discussed your navigation menu as a feature that displays the products in your catalog through primary (parent) categories and sub-categories. (Depending on the breadth and complexity of your catalog, you might also offer sub-sub-categories.) Regardless of how many levels deep your navigation goes, you’ll want to offer breadcrumb navigation. Here’s the breadcrumb navigation for the Lazy One dress, above:

Breadcrumb navigation helps users understand the relationship of the page they’re on to your site’s other pages. What’s more, they offer hyperlinks so that users can “pan out” from sub-category pages to higher-level pages. (On Lazy One’s page, for example, we could just click on the word “Kids” to return to the broader category page, minimizing the number of clicks we’d otherwise need to take to get there.)

Note that breadcrumbs can take two forms: They can be hierarchy-based (they’ll display according to page architecture of your website) or history-based (they’ll display according to the user’s navigational path.) (Zoho’s commerce platform displays breadcrumbs based on hierarchy.) They’re one of those site elements that often gets overlooked; but they can be invaluable for visitors who can’t turn around and go back down the aisle in your store where they remember first eyeing your product.

Offer a sizing guide

This one’s for you clothing retailers out there. Of course, you’ll be offering both color and size options in the form of dropdown menus or checkboxes. We recommend a dropdown menu, by the way: Individual boxes take up valuable real estate, especially on mobile; and they’re harder to navigate on mobile because users have to zoom in to ensure they’re tapping the right selection. Here’s an example of how color and size options can be offered in Commerce Plus:

Give your prospects a comprehensive size guide, too—ideally as a link above or below your size options. You don’t want to run the risk of dealing with unnecessary returns (and, we promise you, neither does your customer), so give them detailed information about size and fit to allow them to make the best selection for their body type.

Avoid visual clutter

We’ve suggested quite a few elements that should go on your product pages. The key, now, is to employ them all through minimal design. A cluttered page means frustrating UX for your site visitors, and it adds unnecessary friction to their shopping experience.

You want your prospect to focus on your product—nothing more. That means clearing the product page of any information that doesn’t speak to your product specs, features, and benefits, and that doesn’t answer the questions your prospects will have about the product.

It means maintaining white space around page elements so that your product images and CTA button stand out, and so your visitor can find the information they’re looking for.

Another reason you’ll want to avoid clutter is to be sure your product pages load quickly. Slow page load time is bad UX; and it’ll drastically decrease conversions and hinder your SEO efforts. A content-heavy web-page will always take longer to load. Stick with sharp and simple.

The wallet company Bellroy has has done well with their product pages. Here’s the page for their key cover, which offers a short looping video to show how the product works:

The features are easy to scan because they’re in bullet points; and if prospects want more information about materials, delivery, or Bellroy’s 3-year warranty, they can click on those plus-signs—but the information is otherwise hidden to minimize clutter.

There’s also smart informational hierarchy here. The product title, a compelling video, product features, and the “Add to Cart” button are above the fold. A simple but elegant product description (notice the “you copy”—copy that focuses on, and speaks directly to, the prospect) and a large image of the product are below the fold. Note how the designer’s explanation includes a customer benefit:

And that’s nearly the entire product page. Exceptionally done, if you ask us.

Keep an eye out for good design

We recommend that you spend some time on the websites of businesses that are offering products similar to yours (and that are making a killing at it). As you move through their product pages, pay attention to where your eyes go, and to the elements of those pages that most draw you in. You’ll probably have a fairly quick aesthetic reaction; observe that.

But then go one step further and imagine yourself as a prospect who’s considering purchasing their product. Is the imagery (or other multimedia) crisp enough that you can imagine taking the product in hand? Do have a sensory experience of what it’s like to hold it (or wear it)? Does the company offer you lifestyle content in its images that helps you envision benefiting from their product and fathom how it will enhance your life? Are there supporting videos? If so, are they brief and compelling? In the end, is that CTA just begging to be clicked? In other words, what’s your user experience on the site?

Critiques like this are a practice that will eventually become a habit; often, it’s easier to perform them on business websites that aren’t yours. Of course, this kind of close examination will be of great benefit when it’s time to turn to your own product pages and apply the lessons you’ve learned through these observations.

 

Your product pages offer such stellar UX (and your business offers such a terrific product) that your visitor has added it to the shopping cart? Congratulations! And yet, your work is hardly over—the cart and checkout experience may be your biggest hurdles yet. In the next section, we look at best practices for shopping cart UX.

Related Topics

Zoho products mentioned on this page: