Build Shopify Landing Page

Navigation bar, page bread­crumbs, or a search bar can send the visitor to unknown destinations. A landing page is the narrowing area of a funnel.

Article Masquerading as a Landing Page

Advertising is the wide end of the marketing funnel. You can reach an audience with Internet banner ads, social media influ­encers, radio, cable or television ads. The call to action must send respon­dents somewhere to take the next appro­priate action. Such reaction can include watching a video, subscribing to some­thing, down­loading an e-book, or purchasing what is advertised.

A landing page is the narrowing area of a funnel. There are two types: click-through landing page and the lead-generation landing page. You cannot expect people looking for one thing to navi­gate your entire web­site. They come for the sharpest kitchen knife. Your home page might feature other kitchen­ware. These are distrac­tions. Even landing on a specific product page can result in a leaky funnel.

The naviga­tion bar, page bread­crumbs, an area with related items, or search bar can each send the visitor to unknown destina­tions. The page you are now reading is a blog article styled as a landing page, for demonstra­tion purposes.

• Text area is wider than normal.
• There are no breadcrumbs.
• Links to prior and next articles are hidden.
• There is no comment section.
• Other navigational elements are absent.

See: Maintain Healthy Business Conversion Funnel

Shopify is a popular e-commerce website hosting service. Behind the scenes, program­mers work hard to inte­grate mer­chant sites with Amazon, Google, eBay, Pinterest and other marketing platforms. In addition to a home page, merchants can create numerous product pages, blog pages, and general pages. Products may be grouped into directories called collections. Blogs also have a distinct directory. The general pages have no directory or table of contents. Marketing is usually directed to a product page with the afore­mentioned distrac­tions. By default, none of the pages are true landing pages.

Choose Alternate Template

Preparing a landing page usually requires rolling up your sleeves (or those of a hired programmer) and digging into the underlying programming language called Liquid. This is an open-source template language created by Shopify and written in Ruby. Accessing the code, it is possible to create a new template that may be selected when creating and product or blog page. This template can remove distracting elements. More than likely, you will need to create at least three new templates along with some modifications to the cascading stylesheet (CSS). It may be necessary to repeat this for each landing page.

Install Third-Party App

If your eyes are already glazing over, third-party apps, which for a monthly fee, shield you from underlying code modifications. The current most highly rated ones in the Shopify app store are listed below.

Available trials and “free” options are generally designed to get you to spend enough time customizing that you feel compelled to upgrade to a paid option. With prices averaging from $10 to $30 monthly, each of these apps allow you to create a feature page that significantly departs from your site theme. Either choose an existing template or create one from scratch within a WYSIWYG editor.

Host Landing Page Elsewhere

Alternatively, there are separate websites that host landing pages for a monthly fee. Responsive landing-page builder platforms are built with conversions in mind. With A/B testing, theses options can begin around $50, climbing to hundreds of dollars per month.

Modify Existing Templates

When launching my first Shopify site, I used Shogun to build landing pages. I also experimented with several other apps for different purposes. After a year, of paying hundreds of dollars per month, I began to code my own solutions.

Instead of creating a separate landing page template, I opted to modify existing Shopify theme templates based on a hidden tag for product and blog articles. The tag inherits the default site styling, removes navigation from the header, eliminates extraneous page elements, disables blog comments, alters meta data page sharing options, adds an email field to the footer, increases the font size, and suppresses articles from the blog directory. By editing the styles.scss.liquid stylesheet, it can do more. For a better example on this site, visit this page.

See: Advantages of Shopify Backend

It is true that you can do all of this by selecting a separate modified template. But as a programmer, my Liquid code changes frequently. For me it is impractical to maintain multiple versions of each template. The direction you choose should be based upon your own business needs. Let’s get back to the subject of how to build a landing page using Shopify. Within the desired Liquid template, wrap elements that you wish to suppress within “unless” code.

{% if article.tags contains 'meta-landing' %}{% assign landing = true %}{% endif %}{% unless landing %}{% comment %} some code {% endcomment %}{% endunless %}

To shorten code used repeatedly, the captured condition is turned into a variable called “landing.” (You can use any name you desire.) All tags preceded with “meta-” are hidden from user view. To prevent pagination issues with your other blogs, you can create a new blog just for landing pages.

Best Option For You

You still need to author page content so that it is compelling. Visual appeal with simplicity is key. Endeavor to reduce page links. Preferably, create a buy link that bypasses the shopping cart or takes the visitor to a product landing page. Your layout should look good on a variety of mobile devices in addition to desktop computers.

Follow ClinicalPosters on YouTube for updates as we develop more video content.

Advertisement

Depending on your budget, frequency of advertising, and need for performance analysis, a homegrown landing page may not suite everyone. But if you have a strong store theme and desire a quick or temporary promotion, adding a tag to a page is a handy option.

Tips and suggestions are offered without warranty or support. Export a copy of the theme file before editing. Consult an independent Liquid programmer if you are unfamiliar with coding.