Reading Time: 9 minutes
How To Build A Shopify Landing Page That Converts
5 (100%) 2 votes

Driving traffic to your site is tough. Once you’ve got those hard-won clicks, you don’t want to waste them on the wrong page. This article shows you exactly how to build a Shopify landing page that customers will stick to. 

shopify landing pages

In order to make the most of your traffic, it’s important that your landing pages are tailored to the people who see them. They should outline a clear offer and tell your customers exactly what they need to do to get it. There are also some key principles to consider when building your Shopify landing page: 

To increase your landing page conversion rate, make sure your visitors know where they are and why they are there.

Although every store is different, most Shopify landing pages are built in one of four ways…

  1. Using product collections (such as seasonal promotions)
  2. Making a custom template
  3. Using a Shopify Landing Page Builder (Shogun, PageFly, etc…)
  4. Creating a landing page with a third party (Unbounce, LeadPages, etc…)

Each of these four methods will allow you to create a great landing page. The one you choose will depend on your budget, the skills you already have and the traffic you expect to get.

All Shopify themes support product collections. Shopify even provides its own instructions for creating collections pages. If you know who will be directed to these pages, you can customise them to suit that traffic.

So, if your PPC campaign is based around a seasonal promotion, you can build a collection with this in mind. 

product collection shopifyUsing a product collection as your Shopify landing page has some big advantages.

  • It shortens the distance to your “buy” button
  • Designing and writing the page is simpler
  • Customers already know how collections pages work, so there is very little “friction”

How To Set Up Product Collections Pages In Shopify

Step 1: Go to “Products” in your menu and select “Collections”. You can choose to add products manually or set up an automatic category.

product collections

Step 2: Choose a Title and URL for your page. The address you pick should be SEO friendly (so that people using the right search terms can find your page). It should match the words you use in your adverts. 

create shopify product collection

Step 3: Make a note of any tracking parameters you use for paid ads. That way, you can target web notifications, widgets, pop-ups and dynamic text to specific campaigns. 

By creating a new template within your Shopify theme, you can tailor any page to the traffic it receives. This is a slightly more complicated technique, but it allows you to do much more with your theme.

template landing page

  • What is a Shopify theme? Every Shopify store uses a theme. This changes how your store looks and what features it has.
  • What are Shopify templates? To turn your theme into a page, you need a template. Every page in your store follows the rules of a particular template, which says where each feature goes. For example, your product pages follow a template that includes a “buy” button.

By creating a new template, you can build custom landing pages within your Shopify store. This is quite simple to organise, but it will require some HTML editing.

First, you need to know if your Theme is “sectioned” or “non-sectioned”.

  • What is a “sectioned” theme? Themes created more recently are usually “sectioned”. Certain elements of the template are contained in separate blocks called “sections”. This allows a drag-and-drop editor to move elements around easily. 

To find out if your theme is “sectioned” or not, go to your “Online Store Section” and Click on “Themes”.

Once the Themes page is open, click on the drop-down “Actions” menu and choose “Edit Code”.

sectioned shopify theme

Within the theme editor is a list of directories containing “Liquid” files.

  • What is a Liquid file? Liquid is the language Shopify uses to build themes and templates. Liquid tags describe how elements are ordered and what they look like. They are always bookended with {% and %} and can also be used to load dynamic content.

You may see directories for:

  • Layout
  • Template
  • Sections
  • Snippets
  • Assets
  • Config
  • Locales

shopify theme editor

If the option is available, open the directory for Sections. If this contains files (for example, “{/} collection-template.liquid” your theme is “Sectioned”. The theme “Debut” (as shown above) is a sectioned theme.

How To Create a New Theme Template (Non-Sectioned)

Step 1: In the “Online Store” area, select the theme you want to add a template to and click on the drop-down “Actions” menu. Choose “Edit Code”.

Step 2: Go to the Templates directory and click “Add a new template.” Use the pop-up window to select a type of template and give it a name (such as “autumn-sale” or “landing-page”).

Step 3: Once you have created the template you will be taken to the editor. Your template’s working name combines the page type (in this case “page”), the name (“landing-page”) and “.liquid” in a string. You can then edit the html code and click “save”

non-sectioned template edit

Step 4: After saving your edits, your template will available to apply to pages. To assign the template to a page, add it from the Template Suffix list.

add shopify landing page template

How To Create a New Theme Template (Sectioned)

First: Follow Steps 1 to 3 for a Non-Sectioned theme. If you are able to edit the code for the feature you want in the template editor, then complete the instructions described above. If the code you want to edit is hidden inside a “Section” element, you will need to create a new section.

Step 1: Whilst still in the template editor, find the Liquid tag for the section you need to edit (in this case {% section ‘product-template’ %} and replace the name of the tag with a new name (this is what you will call the new section).

shopify template section code

Step 2: When you have made these changes and saved the template, you need to create a section with the name you just created. If the liquid tag was {% section ‘product-landing-template’ %} your new section will be called product-landing-template.liquid. Go to the Sections directory, click “Add a new section” and give the new section the name product-landing-template

Step 3: Once you have clicked “Create Section” you will be able to edit it. The editor will contain default code, so you should delete this. Copy and paste the code from the section you replaced in the template code (“product-template”). This can then be edited and saved as a new Section.

After saving your edits: You can follow the rest of the instructions above. 

Custom Templates For Your Shopify Landing Page

Creating custom templates has a number of advantages over using collections pages or landing-page builders.

  • They perfectly match the other pages in your theme
  • You can customise them as much as you want, for free
  • You can deliver a focused value proposition with a single CTA

NB. In case you get into trouble, Shopify provides further instructions for creating landing pages with custom templates.

The quickest and easiest way to build a Shopify landing page is to visit the app store and choose a page builder.These drag-and-drop programmes allow you to easily design new pages and add these to your store. They usually integrate with services like automated email systems, CRO tools or analytics accounts. 

shopify splash page

These are some of the most popular page builders in the Shopify app store.

PageFly – $0-29.95/month

shopify landing page builder pagefly

Good: The editor contains over 30 page elements, so you can really customise your landing pages. It is ludicrously easy to use, comes with plenty of templates and integrates with most other tools.

Bad: This can be an expensive way to create new pages, and best templates are restricted to the PRO and PREMIUM plans

Gem Pages – $9-39/month

gempages shopify landing page builder

Good: This tool has a larger variety of features and is exceptionally usable. There are some nice touches, such as the SEO optimisation feature.

Bad: The cheaper plans are heavily restricted (you can’t build landing pages with the Starter plan).

Shogun Page Builder – $39-149/month

shogun landing page builder

Good: This is the most comprehensive solution and is the best known Shopify landing page builder. It is easy to use and the customer service is renowned. The “preview” function is immediately accessible, giving you a quick way to check your designs.

Bad: If you’re paying such a hefty subscription fee, you need to make sure you get your money’s worth. No software is perfect and one or two users (out of thousands) have found bugs. 

Third-party software offers a more sophisticated way of designing and building Shopify landing pages. Using Shopify’s embeddable “Buy” button, you can incorporate any webpage into your store.

landing page email capture

This method gives you all the flexibility you could want, but it does come with some drawbacks. These page builders are more expensive than the alternative Shopify apps. You may also have to do some technical work on your analytics account, to ensure you track customers from the beginning of the conversion funnel.

Unbounce – $79-399/month

Unbounce is the probably the best known landing page builder available.  It comes with a range of add-ons such as drag-and-drop pop-ups and in-built A/B testing. You can track the conversion rate of your landing pages within the tool, by setting goal URLs. If you want to embed your Shopify “Buy” button into your landing page, Unbounce provides instructions.

external landing page builder for shopify

On the downside, this tool comes with a slight learning curve for first-time users. It is also more expensive than some of the other page builders. For these reasons, it is probably a tool most suited to marketing departments within medium to large businesses.

LeadPages – $25-199/month

LeadPages can be used to create any kind of webpage, and offers a large selection of templates to build from. It does not offer as many testing or customisation features as Unbounce, but it comes with some nice alternatives (such as the built-in conversion guide, which makes design recommendations).  The page builder is very Shopify-friendly, and elements such as the Shopify icon or “Buy” button can be added to a page from the drag-and-drop editor.

leadpages shopify template

Not all the templates are available for the cheaper plans, and these are still a significant investment for a small business.

NB. Beware of the “free” trial, which will automatically switch to a paid plan after 14 days “if you choose not to cancel”. 

However you decide to build your Shopify landing page, you need to make sure it contains a few key things. Without these, it won’t work as hard as it should:

  1. Winning Headers – Your H1 should clearly state the value you are offering 
  2. Signposts – Your page should use visual cues to help people digest your content
  3. CTA/Form – Visitors should know exactly what they need to do 
  4. Trust and Proof – Security icons, reviews, partner badges and social shares all build trust
  5. Testimonials – Whatever you’re offering, your visitors won’t want to be the first to try it
  6. Nudges – Subtle cues that make your offer more appealing (such as scarcity, urgency or FOMO).

An easy way to apply all of these essential elements is to use website notifications. Engaging messages with dynamic content (such as your stock levels) stand a much better chance of reaching your visitors. Nudgify, the website notification system developed by Convertize, provides drag-and-drop notifications for Shopify stores. 

shopify conversion rate

In order to create Shopify landing pages that your traffic sticks to, you need to focus on consistency, simplicity and trust. The majority of visual processing takes place in under 500 milliseconds (half a second), which means you don’t have long to make a good impression!

Once your page has been created, you need to make sure you fill it with the right material. Keep your headers focused around your value proposition and build the page around your CTA. Finally, to make sure your page is as sticky as possible, find ways to nudge your visitors towards the “Buy” button.

Stephen Courtney

by Stephen Courtney

Stephen is a digital marketer with a background in the history and theory of technology. He now writes about marketing and large technological systems.

Newsletter signup

Stephen is a copywriter and CRO fanatic. He writes about web psychology and marketing.

Subscribe to get his latest articles FREE