In this article, I will show you how you can create landing pages using the shop theme function. For this purpose, we will work together on a somewhat more complex use case, as an example.
A landing page is a website to which a potential customer is directed via advertisements (Facebook Ads, Google Ads etc.) or other links on a website. The aim of the website is to get the potential customer to take a certain action, for example to buy a product or to register for a webinar. With a landing page, the focus is therefore on the product presentation and on a call to action (CTA), for example to buy the product, to add it to your mailing list or to register for a webinar.
For this purpose, you can use the options of the shop themes.
Use Case
You placed an advertisement on Facebook to sell your Premium course (Product A). Prospective parties who click on your ad should be directed to a landing page on which you advertise the product and ask them to buy (CTA). On the landing page, there should be a possibility to get to the product's checkout page with a click of the mouse.
Overview of this article
- Creating a shop theme for your landing pages
- Setting up the shop theme for landing pages
- Hiding the header (My recommendation)
- Editing the footer
- Do you prefer mandatory information (legal notice, etc.) in the header or in the footer?
- Creating a landing page for your product
- Editing a landing page
- Link to the checkout page
- Accessibility of your landing page
Step-by-step instructions
Creating a shop theme for your landing pages
You can create as many shop themes as you want in your account. I recommend creating your own shop theme for your landing pages. So you have all landing pages clearly arranged in one theme and can quickly duplicate and adapt them.
- Go to the overview of the shop themes and click on "Create" in the top right corner
- Now create a shop theme and give it a unique name such as "Landingpages-YourName"
You can find detailed instructions on creating a shop theme in a separate help article.
Setting up the shop theme for landing pages
After you have created a new shop theme as your landing page theme, you can start creating as many landing pages as you want in this theme.
- Go to the overview of the shop themes.
- On the far right in the line of your landing page theme, click on the "three dots" and then on the "pencil".
Then you are taken to the editing view of the theme. Here we first edit the header and footer of the theme as the basic setting for your landing pages.
Hiding the header (recommended)
- In the settings of the header of your theme, put a check mark on the far right next to “Hide.”
- This will hide the header on all pages that you create in this theme.
- If necessary, you can later add a header on individual pages.
Please note
Why do we hide the header in our example?
Landing pages focus entirely on the advertised product and therefore usually contain as few distractions as possible. Therefore, in contrast to a shop theme or a shop page, it is advisable to do without a header and menu on landing pages, as a menu always prompts you to click and look around. However, the page visitors to the landing page should only follow the CTA. In our example, click on the "buy button". That is why we are creating a landing page without a header in the example. You need the footer, on the other hand, to meet the legal requirements of your legal notice obligation, including data protection regulations.
Of course, you can also use the header if, for example, you want to provide a link to the legal notice there and prefer not to use the footer or if you would like to have a header on your landing page for another reason.
You can find detailed instructions on editing the header of a shop theme in a separate help article.
Editing the footer
- After hiding the header, stay in the editing view and keep scrolling down
- Click on the "pencil" on the far right and now edit the footer and pay attention to the legally required links to the legal notice, data protection regulations, etc.
- Alternatively, as mentioned above, you can also include this information in the header
To edit the footer, you will find a separate detailed help article.
Please note
Do you prefer mandatory information (legal notice, etc.) in the header or in the footer?
Based on practice, I recommend that you place all content that can distract your customers from your call to action (CTA) very far below and thus clearly after or behind your CTA. It is in the human psyche to be curious and follow informative signals. Menu items in the header therefore invite you to click, even with such “boring” content as legal notice information. So keep your customers under the spell of your product presentation so that they follow your call to action (product purchase, list entry, webinar registration, etc.).
Creating a landing page for your product
Now we will show you how to create one or more landing pages in your specially created shop theme.
- Remain in the editing view of the created theme. There you will find the preset pages “Main” and “Products page” in the middle area.
- Under the existing pages of the theme you will find an input screen for creating new pages.
- In the left column, you define the name of the landing page. In our example I have chosen the name “Landing page product A”.
- In the right column, you enter a URL extension that you can define independently of the name of 2your landing page.
- Then click on the “Save” button.
Editing a landing page
In the next step, you edit the newly created page (landing page product A) of your shop theme.
- To do this, stay in the editing view of the created shop theme
- In the line of the page you created (in our example “Landingpage Product A”), click on the "pencil" on the far right
You will next come to the editing view of the page you have created and you can design your landing page with the elopage Builder.
-
You can design your landing page in a variety of ways with the elopage Builder.
The following blocks are possible:
- Text
- Image
- Video
- Download files
- Testimonials - provide testimonials from your customers
- Popular products - show selected products (for purchase)
- Team members - introduce your team
- Header & menu
- Banner
- Footer
- Products
Link to the checkout page
If the visitors of your landing page are to be directed to the checkout page of your product next, it is important to place a conspicuous call to action (CTA), for example a button or a product image to click on. For this purpose, you can use all variants of links, for example:
- Product badges
- Product images
- Buttons
- Images
- Videos with links
- Text links
We will show you two examples here:
- Using the "Popular Products" option.
- Linking of an inserted sell button.
Example 1 - Use of the option “Popular products”
You want to direct your landing page visitors to the checkout page for the advertised product using the “Popular Products” option. You have already inserted a video into the landing page and in it prompt the visitor to buy (CTA). The advertised product should be added as a “Popular Product” below the video.
To do this, insert a new block under your video with your elopage Builder and select the “Popular Products” option.
Next, a preview of a product carousel that consists of three products is displayed. You can influence the number of products actually shown as well as the products shown there.
With a click on the "pencil" in the upper right corner of the inserted “Popular Products” block, you get to the editing view, where you can make various settings and select products.
Next you come to the editing view of the inserted block “Popular Products” and in the upper area you can make numerous settings for the background, colors and fonts. Set up the visual representation of the entire “Popular Products” block according to your wishes.
Then you scroll down further and come to the overview of your products. Here you choose the product that will be advertised on your landing page. You can also select more than one product. This can be useful for a landing page if you are promoting more than one product variant.
Put a tick in the line of the selected product on the far left and confirm your selection after you have made all the settings for colors and fonts in the upper area by clicking on the “Save” button at the very bottom right.
After saving you will come back to the editing view of the landing page and the selected product will be displayed including the “Buy now” button.
With a click on “Buy now,” your customer will be directed to the checkout page and can order the product.
Prerequisites
You can only use the “Popular Products” option if the product you want to sell is NOT set to “Private.” If you select and insert a product that you have set to “private” because you want to avoid it being shown on your shop page for all your products, then the product will NOT be displayed on your landing page after saving!
Why is that and how can you solve it?
You basically have the option of making your products invisible to customers and search engines. This is useful if you want to avoid someone finding your product by chance or through a search (Google). For example, if you want to sell a coaching product to specific potential customers or launch it at specific times in a webinar, it can be advantageous to only offer the product at a specific time (shortage). Then you set it to "private." You determine this in the product itself.
In this case you can NO longer set the product as “Popular Product.” Nevertheless, you can direct your landing page visitors to the checkout page for the advertised product. To do this, you provide a link to the checkout page behind any content on your landing page (button, image, text, etc.). We will show you in the second example.
Example 2 - Link of an inserted button
Nevertheless, you can direct your landing page visitors to the checkout page for the advertised product. You have already inserted a video into the landing page and in it prompt the visitor to buy (CTA). The button should be inserted below the video.
Here is what you should do:
- First copy the link on the product's checkout page to your PC's clipboard
- Then insert a new block on the landing page you created with your elopage Builder and select the option “Text”.
- Insert a button into the text field that you have previously created with a graphics program or have already uploaded (this will then be in your file library).
- Save your entries.
We will now go through these steps together in detail.
This is how you can find the link on the checkout page
You can find the link to the product's checkout page by clicking on the relevant product in the overview of all products.
By clicking on the "document" symbol on the far right, you can copy the link for the checkout page to your PC's clipboard and link it to your sell button as described above.
How to insert a text block with a linked button on your landing page
After you have copied the link from the checkout page of your product, go back to the editing view of your landing page and insert a new block “Text.” In our example, we will place the text block below the CTA video.
With a click on the "pencil" at the top right, you get to the editing view of the inserted block.
You are now in the editing view of the inserted “Text” block and you can insert a wide range of content, for example text, images, videos. In our example, we add a button “Buy now.” You can create such a button yourself with any simple graphics program, for example with Paint, and save it as an image file (.jpg or .png) on your PC.
With a click on the "image" symbol, you can either select your image (in the example the button) from the file library of your account or upload it from your PC.
Paste your prepared button into the text field. You can then adjust the size of the button by dragging the corners (1) and continue linking the button. To do this, please click on the link symbol (2).
Then enter the link on the product's checkout page (1) and confirm the insertion by clicking on “Insert” (2). Finally, complete the entry by clicking on the “Save” button (3) at the bottom right.
The linked button will then be displayed on your landing page, in our example below the video.
Accessibility of your landing page
Finally, you still have to make your landing page accessible to your customers. Typically, you will direct prospective customers to your landing page via an email link or an advertisement. So you need the correct link on your landing page and care must be taken here, because you are working with your own shop theme that you have set up for your landing pages.
You can find the URL of your landing page in the editing view of the created theme.
On the overview page of all shop themes you will find the custom shop theme ID in the preview links of the themes.
Now you have to put the two together. In our example it looks like this:
URL of the created landing page: https://elopage.com/s/deinname/landing-a
Custom ID of the shop theme “Landing Pages:” ? Shop_theme_id = 169XX
Add the two together and provide this link in your advertisement or email: https://elopage.com/s/yourname/landing-a?shop_theme_id=169XX
Please note
Test the compound URL before using it in an advertisement or other link to ensure that you did not make an error when putting it together. Simply copy them into the address line of your browser.
About the author
This help article was written by our certified partner Ingo Simon, who uses elopage for his business and therefore writes from practical experience for practical application.
Ingo also offers you support in the Facebook community by answering practical questions.