In this post, we're going to look at creating a landing page on Shopify for our product. If you're coming to this series for the first time, you can check out part one and two to learn more about this project.

As always, you can watch the screencast

Our landing page is going to have a few simple requirements:

  1. It should be a single page that doesn't link further into our site - because we don't have the rest of the site built yet.
  2. It should explain that the product doesn't exist yet, but showcase it.
  3. It should collect an email address if the visitor is interested in purchasing the product when it becomes available.

The mockup isn't quite ready yet as we're still waiting on a final design. But that won't stop us! We'll build our landing page with a placeholder image and fill it in later.

We're going to make use of a free Shopify theme called Minimal for our landing page. There are some great paid themes on the Shopify Theme Store that will give us a beautiful landing page, but we're on a budget here. We'll make the free Shopify themes work.

Check out the video to watch me work through creating a landing page. This is all pretty simple. We're going to remove every element that doesn't belong on a landing page, like

  • The header menu
  • Add to cart buttons
  • Any section that doesn't showcase our product - slideshows, about us, etc.

Once we have the page stripped down to the bare essentials, we'll add a Featured Product section with our rashguard and newsletter signup form. We're left with

  • An announcement bar
  • A displayed product
  • A newsletter signup
  • A bare-bones footer

We end up with something like this:

One quick note. The Minimal theme shows a link to the full description, rather than the description itself on this page. It takes a really simple code edit to display the full image.

In your Shopify admin, head to Online Store -> Themes. Under the Minimal theme, click Actions -> Edit code. Open featured-product.liquid and around line 180, you'll see the full details link. Comment out that line, and right above it add

{{ product.description }}

It will look like this:

Now, we just save all the changes and publish our new theme. You can check out our landing page live on the Lucky Kat Fightwear homepage.

And we have our simple landing page!

Next up

In the next video, we're going to take a look at Google Ads and set up the final piece of our experiment. If you want to follow along, pop your email address in the box below and I'll make sure you receive updates as I release them.