Business Benefits
Improve sales and conversion rates.
Label the critical elements of your top navigation clearly, and put them in familiar places to draw customers to the product.
These elements can be:
- Menu options
- Search box
- Join and login buttons.
Use high-resolution product photos with neutral (white or gray) backgrounds to attract attention to the product.
This allows shoppers to focus on relevant aspects of the product while letting them review all the fine details to get a sense of the physical product.
Use a high-contrast color for your call to action to attract attention to it.
For example, an orange button with white text over a white background
Surround areas that draw focus with additional information needed to make a purchase decision like detailed copy, customization options, or additional product photos.
For example:
- Set detailed copy below the review area.
- Place sizing, quantity, and a Save for later functionality next to the Add to cart button.
- Put optional attributes like colors between the description and the CTA.
- Surround the main product image with additional product photos.
Use additional product images that provide at a glance answers that might be buried in detailed product descriptions.
- Add images to answer that answer questions like What kind of inputs are on this television? or Is this product waterproof?
- Use one of the additional photos to show the product in a real environment to help the visitor visualize the product in their space.
- Use contextual images or a small amount of text to give visitors a sense of size and scale for functional products.
- When showing multiple products in a single image, make it easy to find these other items directly from the product page. You can have an area-specific for these complementary products.
Use closer looks of the product to reinforce the claims made in the body copy.
For example, “breathability and nearly seamless support”.
Use clickable targets - highlighted dots or clear marks - to open up dialogs that go into detail about a feature to provide deeper insight within the product photo.
Display alternative versions of the same product in a noticeable place such as between the product description and the CTA.
Use small words with each version to let the user know what that alternative is called. If the visitor has to select an option from a menu - for example, a dropdown of additional colors - make sure the product photo updates accordingly. Make sure choosing an option updates availability of other options.
Highlight out-of-stock products and give the visitor the opportunity to sign up via email to be notified when the product comes in later.
You can show what additional styles are unavailable near the additional options area.
Put additional information such as benefits or alternative products below the fold for a clean and uncluttered page layout.
Last edited by @hesh_fekry 2023-11-14T12:15:32Z