How To Create A Landing Page For Shopify [With Best Practices]

Last updated December 14, 2018
instagram-ecommerce

If you wanna know how to integrate a custom landing page in your Shopify store, you’re in the right place. In this guide you’ll learn the benefits of using landing pages for ecommerce and even design best practices. First up… Let’s discuss a common misconception in ecommerce… Think your Shopify store can succeed without utilizing landing pages? That’s a huge mistake. These pages are crucial for a business to succeed in today’s highly-competitive ecommerce world.

instagram-ecommerce

Not only do they create leads, keep your website tidy, and help you discover what offers actually work they also allow you get an inside look at your audience.

Shopify landing pages let you see exactly where visitors are coming from (Facebook, newsletter, Google ad, etc.) and exactly what they’re responding to.

You can then use this invaluable data to better tailor your product offerings and descriptions, create better marketing campaigns, and, ultimately, create the best possible online shopping experience for your customer.

Although there can’t be a magic Shopify landing page formula for the many different types of products and audiences out there, there are aspects that highly successful landing pages have in common.

Read on to learn 8 Shopify landing page best practices, how to effectively build these pages, and what successful pages look like.


Shopify Landing Page Best Practices

1. Spark and Keep Attention with a Powerful Headline

Although first impressions tend to last, they also can last only a second in this day and age. What’s the best way to attract and keep a visitor’s attention? A powerful tagline that will spark their interest.

According to Marketo, roughly 96% of visitors who arrive at an eCommerce landing page aren’t ready to buy. That’s why it’s so crucial to have an attention-grabbing headline to pique the visitor’s interest.

Hook them in with a headline that has trigger words like “get” or “save” and finish it off with benefit-driven language that clearly shows the value of the product you’re offering.

Apple did this benefit-forward advertising particularly well when they were first promoting the iPod:

iPod Marketing Shogun@2x

You can do this by telling the visitor how their life will be better after purchasing this product. Once they start imagining their happier future selves, wallets start opening.


2. Keep it Simple

Landing pages perform best when they lose the clutter and utilize white space. White space (AKA negative space) is any area of a page that’s left unmarked.

That means it’s important to limit your links and keep your colors simple. If your Shopify landing page colors are too busy and loud, it will deter from your CTA (which should be the loudest and proudest spot on the page).

Simplicity and white space allow elements on your Shopify landing page to breathe so the eye can easily pinpoint where it’s supposed to land (e.g. the CTA).

We get it, it’s tempting to just add one more thing that might help. By doing this, though, you’re taking elements away from the spotlight that should shine (and convert users).


3. Take Advantage of Scarcity

Using scarcity in your landing pages can be a huge help in driving sales and reducing cart abandonments.

Not sure how to use it to your advantage? A great example is to incorporate time limits to your sales or offers. This lets the visitor know that what you’re offering is precious and won’t be around forever.

If the visitor doesn’t act now, they may not get this chance again.

Take this example from an online retailer that tested a limited next-day shipping offer against a version that didn’t include the same offer.

d4426989 3720 4db4 9c54 265aa688b267

According to Sumo, this limited time shipping offer boosted sales by a whopping 226%.


4. Include Straightforward CTA

Tell users exactly what to do when they arrive on your landing page with a clear call to action (CTA). When it comes to conversions, A CTA is, arguably, the most important element on your Shopify landing page.

A successful CTA will practically jump out of the screen when a user takes one glance at your landing page. That means it needs to be bright, bold, and clearly (yet simply) let a customer know exactly what action they should take.

It’s best to limit CTA’s so your visitor isn’t overwhelmed by too many options. They’re on your landing page for a reason, so don’t complicate their sales journey.


5. Utilize High-Quality Images

According to Statista, Instagram has been the 2nd most popular app in the United States this year. That means 111 million people per month are seeking interesting imagery to scroll through.

What’s that mean for your eCommerce business? The images on your Shopify landing page (especially when it comes to hero images) need to be high-quality and eye-catching. Dull, low-quality images cause visitors are sure to instantly lose interest.

Users have grown accustomed to constantly viewing these types of images and keeping their attention means keeping up with their standards.

This hero image from H .Bloom does exactly what it’s intended to do: draw attention, spark interest, and not distract from the headline or CTA:

image06 1


6. Keep the Design Cohesive

A big mistake eCommerce businesses make is creating different designs for different steps of the sales journey.

For instance, if a user is coming to your landing page from an email campaign, they should feel a sense of familiarity from their previous path. This means that from the time a user opens an email to the time they click “Order”, the entire sales journey should feel cohesive.

You can create this sense of ease and familiarity by creating email campaigns or Facebook ads that perfectly correlate with your landing page. This can include anything from colors to fonts to copy or imagery.


7. Increase Trust with Testimonials

Credibility is essential when it comes to guiding through the consumer journey. Research has shown that including customer reviews on a landing page makes an immense impact on conversion rates.

Have you ever purchased something from Amazon without scrolling down to check out a review or two? Chances are, you haven’t.

Instead of including them at the top of the page, use them toward the bottom as a way to seal the deal. Make sure these testimonials are clean, don’t take attention away from the main copy, and include photos and names.

People trust the opinions of actual people, so avoid using anonymous reviews. This is about building trust, so give users a reason to really trust your eCommerce company and your store.


8. Continue to A/B Test

If you think you’re done with your Shopify landing page after it’s live, you’re wrong. If you don’t continue to A/B test this page to see what works best, you’re leaving a bunch of money on the table. A/B testing (AKA split testing) is exactly what it sounds like—an experiment where you test out different versions of a landing page at the same time.

Not sure which images to use? A/B test them.

Wondering what CTA works for what audience? Data can answer that question for you.

Shopify landing pages that aren’t tested are not taking advantage of the information that could be gained. They’re also not getting the sales they should be getting.

Continuing to A/B test is the best way to measure results and see where/how conversion rates increase. It’s also the best way to have the most successful landing page possible.

Here are some of the elements you can A/B test on your landing page:

  • Headline
  • CTA
  • Images
  • Directional cues
  • CTA button design and color

How to Start Building Your Shopify Landing Page

Want to create a Shopify landing page, but not sure where to start (and don’t know how to code)? Shogun Page Builder’s Shopify App allows users to build beautiful custom pages with a simple and powerful drag & drop page builder.

Here’s a quick overview of how you can build a Shopify landing page using Shogun:

Here’s a quick overview of how you can build a Shopify landing page using Shogun:

Step 1: Using the Sections Element to Build Vertically

Shogun uses an element called Sections to help structure your Shopify landing pages and build them vertically. Simply drop the Sections element onto your page and give it a minimum height:

Screen Recording 2018 09 07 at 03.41 PM

The sections element is a great tool If you want to have an image, video, or color background for your landing page:

Screen Recording 2018 09 07 at 03.43 PM

Add Elements to Sections

The sections element also functions as a containing element. This means you can drop any elements you like inside of the section.

For example, if you’d like to add a button in your section, just drag and drop the columns element onto your page (more on columns in step 2), choose how many columns you’d like to include, and proceed to drag and drop the button in whichever column you’d like:

Use Padding to Align Elements

Want that button to be in the center of your image background? No problem. Simply add padding to your button until it’s placed where you’d like:

Screen Recording 2018 09 07 at 03.50 PM 1


Step 2: Using the Columns Element to Build Horizontally

Columns are extremely important as they are used to place elements side-by-side within your Shopify landing page.

Want an image to be placed alongside your copy plus a button below that?

  1. Click on the Columns element, drag it onto your page, and make sure the number of columns is set to 2.
  2. Drag and drop the Image element into the left column.
  3. Drag and drop the Text element into the right column.
  4. Drag and drop the Button element below the text.


Step 3: How to Space Elements with Margins and Padding

Use margins to push elements away from one another and give them breathing room.

Screen Recording 2018 09 07 at 03.59 PM

Use padding to push elements deeper inward to create space within a column or section:

Screen Recording 2018 09 07 at 04.01 PM 1

You can have up to 6 columns across on your landing page.


Step 4: Check Responsiveness

It’s crucial to check how your pages will look across different screen sizes. Shogun makes this super easy by allowing you to switch between widescreen, desktop, tablet, and mobile view.

Screen Recording 2018 09 07 at 04.02 PM 1


Step 5: The Details

Make sure to check out at all of the standard elements you have available to you. Below those elements, you’ll have all of your Shopify product fields .

Screen Recording 2018 09 07 at 04.04 PM 1

Don’t forget about the sidebar on the left hand side where you can add your page name, include important SEO information, choose your page layout, and jump back to past versions of your pages if you’re saving drafts:


To summarize, here are some main tips when it comes to building a landing page in Shogun:

  1. Think of your page layout in terms of Sections.
  2. Use Columns to align elements on a page or put elements side by side.
  3. Use Margins and Padding to put space between elements and align elements.
  4. Preview your page across different screen sizes before publishing.

Shopify Landing Page Examples

Need some inspiration when it comes to making your Shopify landing page? Take a look at these well-crafted, high-converting landing pages all created using Shogun.

Eight checks all of the boxes with this beautiful Shopify landing page. Take note of their powerful headline, benefit-driven language, scarcity tactic at the top, trustworthy testimonial, simple design, and high-quality images.

screencapture eightsleep pages features 2018 09 07 12 13 36 1

Web design agency, Huemor, used Shogun to create this ultra-visually appealing landing page for their client. Notice how simple they keep their color scheme and how it complements their crisp, high-quality the images:

huemor shopify landing page shogun 1


How to Create a Shopify Landing Page that Converts

Effective Shopify landing pages are crucial when it comes to your store succeeding in the eCommerce world. Here’s the good news—with the right tips and tools, they’re pretty simple to create.

Before you start building (or editing) your landing pages, copy and paste this list to your notes to make sure you don’t miss a step in this important process:

  1. Create an eye-catching headline that will not only pique a visitor’s interest but keep them on your landing page. Using trigger words and benefit-driven language so a user will know the value your product will give them.
  2. Keep your design simple by incorporating white space and minimizing links and CTA’s. It’s vital to let crucial elements shine so you can maximize your sales.
  3. Use scarcity tactics to give the impression that your products or offers are precious. This will cause visitors to take action immediately instead of finding reason to put it off.
  4. Incorporate a singular, clear CTA so a visitor knows exactly what action they need to take when they arrive on your Shopify landing page. This should be the first place the eye goes to, so make these CTA’s pop off the page.
  5. Use high-quality images so your Shopify landing page is beautiful, sleek, and holds a visitor’s attention. This is the age of Instagram, after all.
  6. Stay consistent across platforms by making sure your email campaigns and advertisements complement the landing page they’re linked to. This will offer the user a smooth and familiar sales journey.
  7. Include testimonials to gain trust from your visitors. Don’t forget to add names to prove validity.
  8. Keep A/B testing even after the Shopify landing page is up and running. It’s important to see how visitors are responding and then use this information to tailor your page.

Now that you’re a Shopify landing page pro, start building or editing your landing pages today using Shogun Page Builder.

giles thomas

Author:

Hi, I’m Giles Thomas. Founder of AcquireConvert, the place where ecommerce entrepreneurs & businesses go to learn how to increase conversions & profits. I’m also the founder of ecommerce growth agency Whole Design Studios. I’m a head marketing mentor at the Google Launchpad Accelerator & Google Marketing Expert. Ps. Check out my new blog RisePro.co

Comments

Speak your mind