What are landing pages and why does modern ecommerce need them? What should a Magento landing page consist of and how to make it perfectly engaging for your visitors? How to make a landing page with Magento? Read on to find out.
Thanks to modern e-commerce, customers can easily get almost any product from anywhere in the world. The Internet has opened up unprecedented opportunities for doing business around the world, and online stores are helping to cultivate new ways to sell goods online.
Landing pages became the must-have elements of ecommerce business, and no new product launch, marketing or advertising campaign can do without them. Each of us has been to one at least once, and intuitively we understand what they are, but this is not enough to be able to work with them and achieve great results.
In this article, you will find the answers to a number of questions, in particular: what are landing pages and how do they differ from online stores and other CMS pages? What are their advantages, what is the best place for such a page and what tools are better to use to create it? How to create a landing page in Magento and what are the best Magento landing page templates at the official marketplace.
Table of contents:
What is a landing page?
Why do you need a landing page for Magento shop?
How to structure a landing page in Magento?
Magento landing page design tips
How to create a landing page in Magento?
Top 3 Magento landing page template
What is a landing page?
Before we proceed to more specific matters, it is crucial to have a clear definition to a landing page in mind. A landing page a stand-alone webpage that is created for specific marketing or advertising purpose. A user usually arrives at a landing page after clicking an advertisement, search result or promotion. The purpose of a landing page is to get certain information from the visitor (usually, a phone number or email address) or encourage him or her to perform a certain action – click the Contact us button, reserve a call, fill in the form, and so on. Therefore, broadly speaking, the landing page serves to improve your conversions and optimize your marketing campaign by allowing you to focus on promoting a certain product or service.
A landing page should not replace your website or online store homepage; also, it is not one of the categories or product pages either. Instead, landing pages are independent unities, containing particular information and specific elements (all of this will be discussed further in the article) that encourage a customer to perform a certain action – submit an email, press Contact us button, fill in and send a form, etc. The completed action is called conversion, and the higher is the ratio between the number of landing page views and the amount of completed action, the higher are the chances that you get leads.
Landing pages have become a common practice for all types of online businesses, but they hold a special place in online retail. Commonly, online shop owners used to wish the visitors to come to their web store’s homepage, yet it all started to change when the importance of customer-first approach was acknowledged. A homepage is usually too generic to cater for thousands of visitors and has too much to offer – in the worst-case scenario, this scares customers off. Leading page, on the other hand, offers one product or service and conveys one call to action. This landing page clarity allows to offer the visitor exactly what they need and nothing extra, leading them safely to conversion.
Working with Magento ecommerce platform as a UI / UX designer, I created a number of landing pages for Magento online shops. Although there is no fundamental difference between creating a general landing page and a Magento landing page, this platform still has its peculiarities worth being aware of. Therefore, I composed a guide on how to create a landing page in Magento.
Why do you need a landing page for Magento shop?
The global aim of a landing page is to generate requests, collect information about potential buyers and, in the long run, convert visitors into leads.
If these benefits are not enough and you still need more proof of landing page value to make a decision, here are some additional reasons that will convince you:
1) It attracts new customers.
When you launch a brand new marketing campaign, it is necessary to create a landing page to accompany it. Many companies get traffic from social networks and search for traffic to their home page and instantly get results. Magento landing pages provide a very simple way to attract potential customers, who can then be easily segmented and redistributed.
2) It helps collect valuable demographic information
Each time a customer fills in a contact form, or capture form on Magento landing page, your marketing and sales team will receive valuable information about your potential customers. Your team will then be able to use this information to understand which types of visitors convert into customers and focus on specific product properties specifically designed for such buyers.
3) It is great content for marketing channels
A successful marketing strategy relies on the content. Landing pages in Magento are a great addition to your marketing mix, because they are easily shared via social networks, used as a base for an email campaign and even can be utilized for PPC (Pay per click ads) advertising.
4) It allows to measure your marketing campaign success
When you create a landing page, you add a new data asset for your body of marketing content. By tracking and analyzing the indexes of your landing page, you get wholesome and genuine information about your marketing efficiency, learn how users rate your offers and the conversion rates for your offer. All this information is a great guide for marketing strategy optimization and improvement.
Magento 2 Migration
Take your online store to the next level with BelVG Magento migration
How to structure landing pages in Magento?
Having described what a landing page is and what purpose does it serve in your ecommerce, now it is time to get into practical details and find out how to create a Magento landing page, in particular, what elements should an effective landing page consist of.
For demonstration sake, I created an infographic that demonstrates a typical landing page and its core design elements.
Screen #1: Above the fold
Above-the-fold is a more specific name for the landing page main, or first screen. It can be rightfully named the most important place of your Magento landing page, for this is the first screen the visitor sees. A well-designed above the fold screen will excite the customer, create a favorable impression, engage them and lead to conversion, while the one designed without consideration for usability will put potential customers off and create negative associations with your brand.
There is a number of must-have elements every Magento landing page should consist of:
A headline is a sentence or a phrase most commonly located at the top of the landing page or the most visible place of it. According to statistics, 8 out of 10 visitors read the headline, but only 2 out of 10 read the rest of the page, which makes this phrase a pivotal element. It must be designed and constructed to catch the eye and make an impression and at the same time contain the necessary keywords to rank your landing page among the right search results.
The best way to win a customer is to make a promise in the headline. Expressing clearly what result in your product will have if the customer makes a purchase (Lose 7 Pounds in a Month with Lighter Herbal Tea) is way effective than promise of an abstract, generalized outcome (Lose Weight with Lighter Herbal Tea).
You may experience difficulties when working on a creative landing page headline, so I am here to set you at ease and say – there is no shame in copying the headlines if you struggle. The line that you will slightly rework to customize for your service or product is a much safer option than the arguably creative one. All in all, being unoriginal is better than to be misunderstood completely or offend somebody.
Subheadline, or Supporting Headline
While headline serves to compel and catch visitor’s attention, but rarely provides an explanation of the offer you make, subheadline is the opportunity to fill in the important details missing from the headline. Right to its name, supporting headline literally supports the claim you make in the headline by getting into all the hows and whys of the benefit you claim.
Subheadline is usually placed directly below the headline in a smaller font. Although subheadline is not a must-have element and some landing pages can do great without it, I would not advise missing an additional opportunity to impress, encourage or convince. Most commonly, this element is what adds up to the push in the main headline, resulting in a conversion.
Hero Shot / Video
Humans process pictures around 60.000 times faster than text information, and the concept, presented in a picture, is more easily remembered. All these facts make imagery content the media for communicating a message more effectively and a Magento landing page design’s best friend. Actually, landing pages use a specific type of image content, called “hero shot”. Let me explain what it is.
Hero shot is the image that helps you envision what would it be like to have the product offered at the landing page. Contrary to the product image, where the item is mostly static and shot individually, a hero shot demonstrates interaction with the offered product. Here is the example of Beauty Bay webstore, where Mario Badescu care products are directly applied to the skin, demonstrating them in action and serving a better demonstration of their qualities than hundreds of words.
Do you have an idea for a hero shot but still hesitate if it will suit the purpose? Ask yourself the following questions:
- Does it evoke the emotions you want the visitor to feel?
- Is it authentic-looking?
- Does it match the design of the rest of the landing page?
- Is your hero shot relevant to the situation?
- Does it match the message conveyed by the headline?
If you answered positively to all five questions, then your hero image will work perfectly with the rest of the landing page; if not, it is better to devote some time to finding or creating a better match.
The recent tendency in landing page design is to substitute a hero image with a video. The video should be short, not longer than 60 seconds, tell a clear story of the product and the transformation it will bring to the life of the customer and end with a direct call to action. Although the video is arguably more emotion-evoking and therefore effective, it requires much more resources to be played. Therefore, I can recommend the video option to those store owners who have their pages well-optimized.
Benefits section is the summary of gains that the customer gets if they choose you. Now bear in mind, benefits do not simply equal the features of the product – they are your competitive advantages, the ones that set you apart from your competitors and will guarantee a unique experience.
Since benefits are located on the above the fold screen, you need to make them short, but actionable. The best way to format them is in a list or columns, consisting of a headline and a body of text and, preferably, an icon or an image to set it apart from the rest of the first screen content. It is not advised to offer more than 3 benefits, for the more there are, the less memorable they will turn out.
Call-to-Action Button / Lead Capture Forms
Finally, there is the element of your Magento landing page that is directly connected with its conversion rates. Depending on what your landing page is aimed at – request for contact information or a direct action like sale or quote – you can design this section as a lead capture form or a call to action button.
Call-to-Action is a piece of text (sometimes typed on a virtual button, but not necessarily), that tells the visitor what you want them to do next – sign up for a newsletter, ask for a free estimate, purchase a product, etc. Since your whole landing page was aimed at convincing to take an action and this button is the last frontier, it is your job to make it as actionable as possible.
Here are a couple of tips on how to make a great call to action button:
#1: select the color combination to make the button stand out against the background
#2: size the CTA button sensibly – not overly large, but not so small to go unnoticed.
#3: make the button look like the next obvious action – the climax of what they have learned from your landing page
#4: create a sense of urgency by making the offer look unique or limited
#5: place call to action buttons not at the first screen only, but on each screen of your landing page.
With this advice in mind, you are guaranteed to create an actionable call to action button.
A lead capture form is a separate field where the user is assumed to submit the personal data. Naturally, there is little or no interest for a visitor to submit such sensitive information, so it is necessary to offer something valuable in exchange. Most commonly, this is a newsletter subscription, an e-book, a study-guide, a free template or a Magento extension.
The effective lead capture form consists of the following elements:
- input fields;
- submission button.
It is important that the form headline and subheadline conveyed the messages similar to the ones from the top of the page. Also, ask customers to submit solely the information you need for the business development – otherwise, your forms will be left uncompleted and unsubmitted.
What is more, be sure to thank the customer after he or she submits the form and explain what happens next (for example, “our specialist will contact you and hold a free consultation”).
Magento Web design
Take your online store to the next level with BelVG Magento web design services
Screen #2: Social Proof
When a visitor comes to the landing page and sees the product presentation only from the seller’s point of view, they will not be fully convinced that the products you offer are as good as you claim them to be. This is why you need social proof, or testimonials of the customers who have already tried the product or service out. Social proof is a strong tool for creating a positive brand reputation and encouraging the customer to purchase a product or a service.
Most commonly, social proof is presented in the form of short quotes from happy customers. It is important to also leave the name and position of the person who has left the review, for it helps to build up trust. I guess, there is no need to say that such reviews should be genuine – the fabrication act will sooner or later be out and your reputation will be severely damaged.
Another way to present social proof is case studies. This format is especially useful for service providers’ landing pages. The typical case study will describe the initial problem, the delivered solution and the results / improvements that followed as a result. Case studies are a great way to demonstrate visitors the extent of your competence and how well you can achieve certain goals or deal with certain issues. And happy customers will be the ultimate proof of your expertise and trustworthiness.
Screen #3: Features List / Closing arguments statement
At the first screen, you briefly outlined the benefits of the product you offer – now it’s time to describe in more detail what you have to offer, how will you work and what value will you bring to your potential client. Actually, it is up to you what you want to stress as the competitive advantage of your brand – will it be the number of highly-qualified specialists on your team, the amount of sold items or completed projects, your corporate eco-friendliness or the family approach you take in respect of any client. The main thing here – it should be genuine and come from your heart; this is the only way to make it credible.
I have outlined the main components of a Magento landing page, but you do not have to follow me to the letter. Your landing page may have more than three screens and have all these elements combined in a different way – the main thing is that it conveyed one message and served one clear goal.
Magento landing page tips
Tip #1: evoke emotions
As you can see in all these examples, they have a common concept – to make customers show emotions, dive into the study of the services offered and start the implementation of the landing page script. An addictive Hero image like no other helps to attract the attention of visitors, which means it is a sure way to get more conversions.
Tip #2: grouped fields
Grouping related fields will help users quickly understand the information they need to submit.
Show the user exactly what they should do instead of letting them wonder and trying to figure it out on their own. Also, eliminate the unnecessary fields.
Use masks for complicated fields (like phone numbers or payment details submission) and autocompletion for long ones.
Tip #3: specific captions
Introducing captions, remember that you need to use short and clear labels (using a word or two), so that users can quickly read your form.
Use the floating tips that will be displayed by default, but as soon as the input field is activated, the built-in tooltips disappear and the label on top of the field appears.
If you have several buttons on one screen, consider the division into main and secondary action.
Tip #4: implement micro-interactions
This small animated patterns will animate your landing page.
Users may not want to fill out forms, so make this process as easy as possible. Minor changes, such as grouping related fields and specifying the type of information that you need to enter in each field, can significantly improve usability.
How to create a landing page in Magento?
Due to the introduction of such CMS tool as Page Builder to Magento Commerce, it became notably easier to create and edit versatile types of pages from the admin panel. This also concerns a Magento 2 landing page – with Page Builder, there is no need anymore for a lengthy development process to create an ecommerce landing page for a certain occasion. This functionality is greatly empowering for marketing teams, allowing to create landing pages on a regular basis without much effort.
Below you will find step-by-step instructions on how to create a landing page in Magento.
Step #1: log in to Magento Commerce admin and navigate to Content -> Elements -> Pages.
Step #2: press Add new page button.
This will get you to the new page creation menu. Let us explore from top to bottom every section of the configuration page.
Step #3: enter the name of the page to the Page Title field and set Enable Page at Yes.
Step #4: expand the Content section and craft your landing page.
Before we proceed with creating a landing page, enter content heading into the corresponding field. When done, pay attention to the field below.
This is Magento Page Builder work space, with a white field and an instrument panel on the left. The panel contains four major blocks – Layout, Elements, Media and Add Content. Select an element from each section and simply drag-and-drop them to a place at the canvas. As you drop the element, press the gear sign to expand its individual settings.
To learn more about Page Builder and its functionality, follow to our What is Page Builder in Magento 2? article.
Step #5: expand Search Engine Optimization and fill in URL Key, Meta Title, Meta Keywords and Meta Description fields.
Step #6: in Page in Websites section, define the website or even store view where to put a custom landing page in Magento website.
Step #7: define the hierarchy of the page in the Hierarchy section.
Step #8: in Design section, select the Layout and New Theme (if you wish to set up any) and enter Layout Update XML.
Step #9: press Save button.
Done! In nine simple steps, we created a Magento landing page that will serve out marketing purposes.
Top 3 Magento landing page templates
If you are short of time or are unsure of your level of designer expertise, it is not obligatory that you created your own Magento landing page from scratch. Instead, it would be perfectly fine if you downloaded and installed a Magento landing page template.
Below is a detailed review of top 3 Magento templates for landing pages.
MageWorks Landing Pages. Do you need to create and manage a great number of customizable and SEO-friendly landing pages?Then, Magento MageWorks Landing Pages is a good solution.
Try this module and you will be able to create layout and top/bottom blocks, add images and eye-catching text. In addition, it is possible to specify URLs and meta data for all the Store Views. Magento MageWorks Landing Pages will help you customize your store taking into account all marketing needs. Its core features are design, custom content, SEO optimization. They let you create and manage as many landing pages as you wish, make them SEO-friendly and customizable for various Store Views, display products based on the improved conditions.
You are able to create SEO-optimized pages for marketing goals, such as: AdWords campaigns, sales, promotions, seasonal offers, any custom selection of products, etc.
Compatibility: Community 2.2, 2.3, Enterprise 2.2, 2.3
Amasty Landing Pages. Do you want to create landing pages based on categories, attributes, search results or products on special price? All you need is Magento Amasty Landing Pages.
This module provides advanced SEO and display functionality that allows to specify meta data, create SEO-friendly URLs and choose any pages design. The main features are: flexible settings to advance your webstore SEO, creating any number of landing pages, unique URLs and metadata, dynamic categories, etc.
Compatibility: Community 2.1, 2.2, Enterprise 2.1, 2.2
Magento 2 Landing Pages. Are you dreaming of creating eye-catching and customized landing pages? Then, this Magento landing page extension will be perfect for you. You’ll have a chance to create any number of impressive landing pages that improves your SEO, gives you unique content and better conversion rates. This module allows to create striking landing pages that help clients find the products as fast as possible, without browsing through your catalog. The core features of Magento 2 Landing Pages are: choosing products to show manually or by conditions, easy and convenient administration in the back-end, multistore and multi-language support, 100% open source coding, free lifetime support and extension upgrades, etc.
Compatibility: Magento 2 CE 2.x.x , EE 2.x.x
So, considering all the core features and benefits, you can choose the best Magento Landing Pages module to customize and upgrade your ecommerce store, taking into account customer needs and desires. In addition, it will help increase your sales and improve conversion rates. Finally, you will be able to reach all marketing goals and ensure the best results in your Magento ecommerce business.
Wrapping it up
This is all for today’s topic – landing pages in Magento 2. We sincerely hope that you found our designer, marketing and Magento admin insights were useful and you will successfully apply our recommendations to your Magento promotion landing page design and development. All in all, we can conclude that a landing page is s a crucially important element of ecommerce marketing and promotion instruments stack and its efficiency was recognized by brands large and small all over the world. In Magento, it is fairly simple to create and edit a landing page – all thanks to the introduction of Page Builder tool to the admin panel. However, if you do not have time for creating a Magento landing page on your own, you can always implement one of the top Magento landing page templates we have described above or turn to an experienced Magento development agency.
Do you have any questions? Want to express your point of view and share the experience? Leave your opinion in the comments down below!
Take your online store to the next level with BelVG ecommerce development