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.