Skype Me Now (Skype:sergei_fisenko?
(https://magecom.net) Magento ecommerce solutions
en de
Company (Https://Magecom.net/Company/)
Services (Https://Magecom.net/Magento-Services/)
Portfolio (Https://Magecom.net/Portfolio/)
Blog (Https://Magecom.net/Blog/)
Contact Us (Https://Magecom.net/Contacts/)
How to Build a Better Product Page in Magento Nov 23, 2015 product page (https://magecom.net/tag/product-page/), usability (https://magecom.net/tag/usability-2/), web design (https://magecom.net/tag/web-design/), web devepolment (https://magecom.net/tag/web-devepolment/)
Search
Search ...
Categories Magento (https://magecom.net/category/articles/magento4/) Wordpress (https://magecom.net/category/articles/wordpress4/) E-commerce (https://magecom.net/category/articles/ecommerce/)
The purpose of any product page is to introduce the product within a few seconds and to get the customer to add it to cart. Basically, it’s not a rocket science to create a page that converts, but it’s where a lot of ecommerce businesses fail. In this article we are going to review a Magento product page and its standard elements, as well as provide some recommendations on how it may be improved — both in terms of design and content. Let’s start with the default Magento product page. Designed with the best usability practices in mind — simple and clean layout, well-structured and prominently placed product information, big imagery and eye-catching call-to-action elements — it provides a solid starting point for presenting products. Considering that Magento offers 6 product types (https://magecom.net/what-to-consider-whenplanning-a-magento-store/#products), there are some differences in appearance of product pages reflecting specific characteristics of some product types (this concerns configurable, bundle and grouped products). However, those differences do not have a big impact on the overall page look and feel and serve just some particular goals.
Usability (https://magecom.net/category/articles/usability/) Development insights (https://magecom.net/category/articles/developmentinsights/) Magento 2 (https://magecom.net/category/articles/magento2-articles/) Magecom Extensions (https://magecom.net/category/articles/magecomextensions/) Our Work (/case-study/)
Have a Question? Drop us a line and we’ll get right back to you Name Email Message
Submit
(https://magecom.net/wp-content/uploads/2015/11/women-tops-blouses-nolita.png) Magento CE 1.9, configurable product page Speaking about common elements of Magento product pages, there is a bunch of them that should be mentioned: Product title Pricing information Stock availability Main product image Image gallery Zoom-in feature for images Reviews Ratings Short description Product options (https://magecom.net/configurable-products-vs-simple-products-withoptions-in-magento/) (can be set up for configurable products and as custom options for simple products) Wishlist Compare products feature Send email to a friend feature Social sharing buttons Add to cart button Long description Tags Other tabs with additional information.
(https://magecom.net/wp-content/uploads/2015/11/Product-page-in-Magento.png) The product page also may contain blocks with related products and up-sells. They appear respectively under the section with wishlist and social sharing buttons and below the tabs with additional information.
(https://magecom.net/wp-content/uploads/2015/11/3.png) Related products Magento did a very nice job of including many useful features into the product page and still keeping it easy to read, easy to use and easy to understand. It’s a good foundation to start working on your own page design, but what would be your next move on the way to creating a better product page? What tools and techniques should you use to make the most of your product page? We have rounded up 15 tips that may be increadibly helpful to you.
15 FUNDAMENTAL TIPS FOR BUILDING A BETTER PRODUCT PAGE DESIGN IN MAGENTO Keep it simple. Pages stuffed with all sorts of information and elements annoy users. Include only essential information and features on the page. This is the case when just enough is more! Use attractive high-resolution product images. One of the primary concerns of online shoppers is the inability to physically touch and scrutinize products. This is why product images are so important and MUST be of good quality. Also, include several pictures from multiple angles and in familiar contexts to enable the customers to envision themselves using the item.
(https://magecom.net/wp-content/uploads/2015/11/4.png) Utilizing a large main product image is a good idea too, since it allows users to see the smallest detail of a product without zooming in.
(https://magecom.net/wp-content/uploads/2015/11/5.png) GaitLine (https://magecom.net/our-portfolio/footware-magento-online-store/) You can also benefit from letting your customers upload captured by them pictures (https://amasty.com/customer-product-images.html) to the product page. Free visual content and a social proof are garanteed! Include videos to demonstrate your products quickly and efficiently. Magento doesn’t offer this feature out-of-the box. However, it is easy to implement with help of a product video extensions by FEMExtentions (http://www.magentocommerce.com/magento-connect/product-videos.html) or IWDAgency (http://www.magentocommerce.com/magento-connect/product-videos2.html). Aheadworks (https://ecommerce.aheadworks.com/magento-extensions/videotestimonials.html) did a great job by developing an extension enabling your customers to upload their own videos featuring your store items. As a part of marketing campaigns this feature may become a great tool to earn more credibility in the eyes of your customers.
(https://magecom.net/wp-content/uploads/2015/11/6.png) Direct Game Cards (http://www.directgamecards.com/) Place pricing information prominently. To make price noticeable, use a large font size or a color that differs from description color. If discounts are applied, they should be even more noticeable than prices.
(https://magecom.net/wp-content/uploads/2015/11/7.png) One2wear (https://magecom.net/ourportfolio/magento-go-wholesale-clothes-store/) Include shipping costs into the product page. To display all available shipping methods (https://magecom.net/shipping-in-magento/) and costs directly on the page — use product page shipping costs extension (http://www.magentocommerce.com/magento-connect/product-pageshipping-costs.html). There is also a good solution to calculate shiping costs (http://www.magentocommerce.com/magento-connect/shipping-cost-calculatorextension.html) from CMSMart. Show your product availability clearly. If you are running low on stock, don’t wait till the checkout page to break this news to the customer. As with prices, stock information should be noticable. It’s also nice to have an out of stock notifications (http://www.magentocommerce.com/magento-connect/out-of-stock-notification-8.html) option to let your customers subscribe for email notifications about product availability and prices updates.
The Watch Gallery (http://www.thewatchgallery.com/shop/bremont-u2-blue-mens-watch.html) Write product descriptions that sell. First of all, you have to determine who your customer is and what he wants. Only after this start working on the copy. Point out product benefits and highlight why the customer should buy it. And, do not forget that people love humor. A funny or ironic headline could be all you need to sell a product.Regarding don’ts: never ever use product descriptions provided by manufacturers. Even, if they are extremely well-written, they can harm your rankings in search engines. Google, for example, introduced a “Farmer” algorithms that weeds out unoriginal content from search results.When the product documentation is very comprehensive and you still need to place its content on the product page — provide it as downloads (http://www.magentocommerce.com/magento-connect/productattachments-by-amasty.html). Show every product variation and how it looks. Within Magento concept you can incorporate this by creating configurable products or adding custom options to simple products (https://magecom.net/configurable-products-vs-simple-products-with-optionsin-magento/) .
(https://magecom.net/wp-content/uploads/2015/11/9.png) Victoria’s Secrets (https://www.victoriassecret.com/) More advanced way to present products with multiple options — create product configurators (https://magecom.net/building-a-product-configurator-in-magento/) enabling your customers to customize and personalize products to fit their exact preferences.
(https://magecom.net/wp-content/uploads/2015/11/10.png) Brooklyn website/)
Popcorn
(https://magecom.net/our-portfolio/online-popcorn-ordering-magento-
Here is a very exciting example from Nike — so-called visual configurator that produces new visual content online depending on selected options.
(https://magecom.net/wp-content/uploads/2015/11/11.png) Nike (http://www.nike.com/gb/en_gb/c/nikeid) Include product reviews and ratings. It is one of the simplest and most effective ways to build confidence in your products. According to statistics provided by Econsulting (https://econsultancy.com/blog/9366-ecommerce-consumer-reviews-whyyou-need-them-and-how-to-use-them/)61% of customers read reviews before making a purchase. The next huge advantage of reviews is that they are a great source of unique content — so beloved by search engines. When moderating submitted reviews do not weed out negative reviews. Shoppers want to hear both sides of the story. About 30% assume that your reviews are fake, if they do not see any negative reviews. Both — reviews and ratings — are standard Magento functionality. To make them even more effective, you can install a product review reminders extension (http://www.magentocommerce.com/magento-connect/product-review-reminder.html) to be able to invite your customers to leave a comment about the product. More to the point: you can also hire Magento developers (https://magecom.net/magento-webdevelopers/) to add rich snippet review markup to your product pages and help those pages to be displayed more prominently in Google’s search results, increasing your click through rate, and traffic. Place returns and payment information prominently. Don’t keep your customers in the dark when it comes to payment methods (http://www.magentocommerce.com/magento-connect/display-payment-methods-onproduct-page.html), since their availability on the product page influences the buyer’s decision. A nice and simple way to convey this information is to place logos of payment providers directly on the product pages. Be clear on the return policy as well. Wipe out worries and answer the question “What happens, if I don’t like the item?”.
(https://magecom.net/wp-content/uploads/2015/11/12.png) New Look (http://www.newlook.com/shop/shoe-gallery/view-all-boots/black-over-the-kneeblock-heel-boots-_350044301) Feature related products or up-sells. When people are looking at your product pages, there is a good chance they have not made a decision which product to buy. By displaying related products or up-sells you will let more store visitors complete their purchase without having to exit the funnel completely. Lifehack: to reduce time on assigning related products and up-sells to each product, use an extension (https://ecommerce.aheadworks.com/magento-extensions/automatic-relatedproducts-2.html rel=) by Aheadworks to automate this process.
(https://magecom.net/wp-content/uploads/2015/11/13.png) Ahmad (https://magecom.net/our-portfolio/magento-online-store-for-teas/) Show trust and quality badges. A small message or safety logo of a reputable company like Trusted Shops (http://www.trustedshops.com/) can allay customers’ fears of getting ripped off or compromising their valuable information.
(https://magecom.net/wp-content/uploads/2015/11/screenshot-3.png) Screwfix (http://www.screwfix.de/steelite-sicherheits-gummistiefel-s5-schwarz.html) Optimize your add to cart button. It should be easily recognizable and compel the customers to act. Since there is no universal way to style the add to cart button, you can experiment with it. But, never use a red color, since people perceive it as a warning. Reduce product page load time by using cashing technique. In simple words, product page cash “saves” product page data on the server after the corresponding page has been visited once. Next time when somebody visits the page, it loads quicker. Magento offers this feature only in its paid enterprise-level version. However, you can implement it in Magento Community as well. The extension by Amasty (https://amasty.com/magento-full-page-cache.html) may be pretty handy for this purpose. Answer customer questions. Store visitors may have questions about a product or a part of the buying process. Offering a live chat or product question option (http://www.magentocommerce.com/magento-connect/product-questions-byaheadworks.html) is an effective way of saving a few of sales. A/B-test! A/B-testing is a method of comparing two versions of the page against each other to determine which one performs better. There is a variety of tools and services
out there. You can start your research with this extension by Amasty (http://amasty.com/magento-ab-testing.html).
(https://magecom.net/wp-content/uploads/2015/11/screenshot-4.png) We hope that our recommendations have given you some good ideas that you can incorporate in your own websites. The most important thing is to remember: what works for someone else might not work for you. So, test, test and test! If you need a professional advice or any help with building your product page, our team of Magento certified developers (https://magecom.net/magento-web-developers/), designers and ecommerce experts will be happy to jump in.
Related Posts Magento Fashion Themes Overview (https://magecom.net/magento-fashion-themes-overview/) Infographic "Navigation in Magento store" (https://magecom.net/infographic-navigation-inmagento-store/) Best Practices for Implementing a Store Locator in Magento (https://magecom.net/bestpractices-for-planning-and-implementing-a-store-locator-in-magento/) Building a Product Configurator in Magento (https://magecom.net/building-a-productconfigurator-in-magento/) Best Practices for 404 Error Page (https://magecom.net/best-practices-for-404-error-page/) Great Features for Online Fashion Stores (https://magecom.net/great-features-for-onlinefashion-stores/) Building a Wine Store: Features Your Customers Will Love (https://magecom.net/building-awine-store-features-your-customers-will-love/)
TAGS product page (https://magecom.net/tag/productpage/), usability (https://magecom.net/tag/usability-2/), web design (https://magecom.net/tag/web-design/), web devepolment (https://magecom.net/tag/web-devepolment/)
(http://www.facebook.com/sharer.php? u=https://magecom.net/how-to-builda-better-product-page-inmagento/&t=How to Build a Better Product Page in Magento) (http://twitter.com/home? status=How to Build a Better Product Page in Magento https://magecom.net/howto-build-a-better-productpage-in-magento/) (http://linkedin.com/shareArticle? mini=true&url=https://magecom.net/howto-build-a-better-product-page-inmagento/&title=How to Build a Better Product Page in Magento) (https://plus.google.com/share?url=https://magecom.net/how-tobuild-a-better-product-page-inmagento/&title=How+to+Build+a+Better+Product+Page+in+Magento)
CONTACT FORM
CONTACT INFO
SIGN UP FOR OUR NEWSLETTER:
Name Phone: +442081446420 Email
Email:
[email protected] (mailto:
[email protected])
Your message
Add File
Send
Copyright: Magecom 2018
Company (https://magecom.net/company/) Magento services (https://magecom.net/magento-services/) Why hire us (https://magecom.net/magento-webdevelopers/) Blog (https://magecom.net/blog/) Portfolio (https://magecom.net/portfolio/)
Email... Subscribe