How to Create A Custom Shopify Landing Page With Tailwind CSS

Have you ever clicked on an ad and ended up on the home page of an online store? Did you feel a little confused by so many choices, when you really just wanted some more information about the ad you clicked on?

Here is the thing how can we expect our visitors that just landed on our home page to buy right away? It’s kind of like asking a girl to marry you on the first date. This is where a custom landing page comes to the rescue.

Whether you are creating a custom theme or adding a custom page to an existing theme Tailwind CSS, once you get the hang of it, can help you speed up your development time. While we won’t be going into the fine details of how Tailwind utility classes work. Here is an outstanding course for learning Tailwind from scratch.

In this tutorial, we will add the custom landing page to the Shopify Dawn theme. To speed the process up, I have used an existing Tailwind landing page template by Launchchoice to use for the basis of our custom Shopify landing page. So you should purchase the template if you intend to use code from their template for your own landing page.

We will create a JSON page template and a section with the HTML and Tailwind classes and add Liquid code and a schema for settings that the merchant can edit in the theme editor.

Setting Up Our Development Environment

Since we will add our landing page to the Dawn theme, the steps to setting up our development environment will be.

1. We will need to have a development store setup. Here is a link to the documentation in case you are not familiar with the process.
2. Next need to create a GitHub repository for our development theme.
3. You will need to install the Shopify CLI on your machine first to get up and running.
4. Next, you initialize a theme by running.

This will clone the Dawn theme by default. It will prompt you to enter a name for your theme. After the theme is cloned, navigate to the folder. Next…