Surprisingly, lots of online stores fail to create product pages that convert, although this isn’t rocket science. The problem is that merchants don’t know much about the standard elements of the Magento | Adobe Commerce product page. Today, we’ll briefly review them and find out how to create a converting product page in the online stores powered by Magento.
Default Magento | Adobe Commerce Product Page
First of all, I should point out that default product pages in Magento | Adobe Commerce are well-structured, have clearly located product information, a simple and clean layout, eye-catching big images, and call-to-action (CTA) elements. Overall, this kit is great for solid product presentation.
Here’s a list of standard features of product pages in Magento | Adobe Commerce:
- Title;
- Pricing;
- Stock availability;
- Main product image;
- Image gallery;
- Reviews;
- Ratings;
- Short & long descriptions;
- Product options;
- Wishlist;
- Comparing functionality;
- Send an email to a friend functionality;
- Social sharing icons;
- ‘Add to Cart’ button;
- Tags;
- Sections with additional info.
As you see, Magento | Adobe Commerce introduces lots of useful features. Besides, having a wide range of excellent functionality, Magento product pages are still easy to read and understand. Now, we’ll find out how to use and improve them to make your product pages convert more effectively. Here’s a list of our tips to help you to do it.
Tip 1: Use High-Resolution Product Images and Videos
Online shoppers can’t touch and scrutinize products like in brick and mortar stores. That’s why your product images are so essential. Your product images should be of high quality, include pictures from several angles, and have familiar context/background to help customers to envision themselves using your goods.
One of the best ways to allow online shoppers to view the smallest detail of a product is by utilizing sizable product images. Unfortunately, this feature isn’t available in standard Magento | Adobe Commerce. You have two options to implement zoom functionality. The first one is to create a widget or use a third-party extension.
When it comes to video, in standard Magento | Adobe Commerce you can only embed video from Youtube or Vimeo.
How to Add a Product Video from Youtube
Step 1. Get your Youtube API key
- Log in to your Google account and visit the Google Developers Console.
- In the Search field at the top, enter YouTube Data API v3.
- Enable YouTube Data API v3 or make sure it’s enabled.
- Go to Credentials > click on Create Credentials > choose API key.
- Copy the API key to the clipboard.
- Click the Edit icon on the right and set the restrictions to make sure the API key is limited to the correct referrers.
- Wait a few moments while the key is generated and then copy the key to the clipboard.
- In the next step, you will paste the key into your store’s configuration.
Step 2. Configure the key in Magento | Adobe Commerce
- Admin sidebar > Stores > Settings > Configuration.
- In the left panel, expand Catalog and choose Catalog underneath.
- Product Video section > paste your YouTube API key
- Save config > refresh cache
Step 3. Link to the video
- Open a product in edit mode.
- Click Add Video in the Images and Video section.
- Enter the URL key, Title, and Description of the video.
- Upload Preview Image
- Choose the Role
- Save
Tip 2: Display Clear Product Information
Prices. Use large font sizes and eye-catching colors to make your price noticeable. If you apply discounts to your products, make them more prominent than prices. Keep in mind that customers from different countries get used to seeing total prices differently. For example, in the US online stores, all prices are displayed excluding taxes, while European stores display prices including taxes.
If you need to set price display settings, go to Stores > Configuration > Sales > Tax> Price Display Settings.
Check out our Step by Step Guide: Tax Configuration in Magento | Adobe Commerce.
Availability. Don’t shock your customers on the checkout page that products they want to purchase are out of stock. Your stock information should as noticeable as your prices. One of the best practices to notify customers that products are running out of stock is to use nudges.
For example, we developed a module that adds a notification to the product pages and informs customers about the limited quantity of products in stock (e.g. Only XXX are left). The solution stimulates customers to make purchase decisions faster, decreases cart abandonment rate, and increases conversion.
Want to Have This Feature on Your Website?
Product Description. Create a buyer persona to determine who your customers are and what they want. Product description should contain product highlights and benefits of buying it. We don’t recommend using the product descriptions provided by manufacturers as they can harm your ranking despite being well-written. Google uses a “Farmer” algorithm to find and weed unoriginal content from search results.
Tip 3: Place Returns and Payment Information
Your customers must be aware of your available payment methods and return policies as this information influences their purchase decisions. You can place logos of payment providers directly to the product page or add a widget “Returns and Orders”.
Tip 4: Display Related Products or Up-Sells
When people browse your product pages, there’s a chance that they don’t have a clear idea of what they want to buy. Displaying related products or up-sells lets your store visitors make purchase decisions faster without exiting the funnel.
How to set up default related products block in Magento | Adobe Commerce:
- Admin Sidebar > Catalog > Inventory > Products
- Find the product > click the Edit button
- Find the Related Products, Up-Sells, and Cross-Sells section
- Click the Add Related Products button
- Use the filter to find products you want to display as related and select them
- Save the product
Repeat these steps for all the products on which pages you want to configure the block.
This way, you can get not only the Magento | Adobe Commerce related products block but also up-sells and cross-sells.
If you want to reduce time on adding related products you have to use any third-party extension like Automatic Related Products by Amasty, Magento 2 Auto Related Products by Mageplaza, etc.
Tip 5: Include Product Reviews and Ratings
Reviews are one of the most effective ways to push customers to make their purchase decisions. At least half of all online shoppers read reviews before buying online. Moreover, search engines adore this type of content, improving your store’s ranking positions.
Magento’s basic functionality includes both reviews and ratings. Here’s a simple guide on how to enable product rating-review in Magento | Adobe Commerce:
- Admin Sidebar > Stores > Attributes > Rating > Add New Rating
- Enter the Default Value
- In the section Visibility, set where you want to display your rating
- For Sort Order, enter a number to determine the order of this rating when listed with others.
- If you want to show your rating on the storefront, select the Is Active checkbox.
- Save rating and flush cache.
You can make this feature more useful by installing a product reminder extension to invite customers to leave comments about your products. Moreover, you can hire developers to add rich snippet review markup to the product pages, which helps to display these pages more prominently in search results.
Mobecls team provides basic and advanced SEO audits, SEO and performance optimization services. We are SEO-focused development company that specializes in Magento | Adobe Commerce. It means that we know what and how to fix SEO issues, taking into account your UX, Marketing and Business specifics.
