Clothes & Fashion Product Details. Image by Nick Babich

In this article, I want to share 12 practical recommendations for the product details page.

8 General recommendations

The product details page should have a minimalist design and provide prioritized information about the team.

1. Photos

Most users are visual learners — they form an impression about the item based on its visual appearance. That’s why if you sell clothing or jewelry, you need to give visual prominence to photos.

• At least 30% of the above-the-fold area should be dedicated to the photos.
• Create a few pictures from different angles to help customers form an impression of the item.
• It’s worth adding a video at the end of the gallery.

Gallery of photos

2. Product price

Product price is one of the most important factors that influence purchase behavior. Customers decide whether they want to purchase an item or not.

• Try to provide the total product price (price with taxes).
• Highlight information about discounts or special offers.

3. Colors

• Name colors. Do not rely on color alone to convey the meaning. Always add a textual description along with color selection (i.e. Color: Blue)

Give names to product colors.

• If your product is available in multiple colors, you need to provide an option to choose a color. When the user taps on a different color, the photos should be updated to show the product in matching color.

4. Sizes

• Always mention the metric system (i.e., US/UK/European, etc)
• Pre-select the product size based on the information you have about your user.
• Offer size guide
• Provide ‘low in stock’ information when you have a limited number of items available for purhcase.

5. Product details

Provide essential information about the item. Mention:

• Composition (natural vs. artificial fabric, % of individual materials)
• Size and fit (i.e. slim or lose)
• Item properties (i.e. collar type, etc)

Use bullet points format to provide this kind of information. Bullet points make the text more scannable.

Bullet points format is great for fast scannability

6. Delivery options

• Mention available delivery services and delivery cost (i.e. regular and express delivery)
• Mention average delivery time
• Mention return policy

7. ‘Wear it with’ section

Online shoppers will appreciate recommendations from a stylist, so it’s worth adding a section that will provide information on items that can pair well with this item.

Stylist recommendations

8. ‘You may also like’ section

This section should contain information about similar products. You should add 4–6 items in this section.

4 Specific recommendations

UI design should be optimized for mobile usage—both the size of UI elements and their placement should guarantee great UX.

1. UI element sizing

• The text should be easily readable. Aim for 14px for the body text and ensure the color contrast is sufficient.
• Size interactive elements appropriately. Buttons and other interactive elements should be at least 44px x 44px.

2. UI element shapes

UI elements with rounded corners are more comfortable for the viewer’s eyes than a rectangle with sharp edges.

3. Color coding

Use the same color for all interactive elements on your page. It will help users understand at a glance what is interactive and what is static.

Tip: Choose the primary color from your brand color scheme.

All interactive elements are colored in purple.

4. Sticky primary call to action button

‘Add to card’ button should always be visible in a viewport. Try not to hide it below the fold since not all users will want to scroll the page.

You can find the wireframes of the product details screen from this article here.

Want To Learn UX?

Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Planet reader, you get 25% off your first year of membership with the IxDF.