Learn Shopify Theme Customization for 2023

Using Tailwind CSS & Alpine JS for styling and animations

Mike Haslam
8 min readDec 30, 2022

--

Shopify development with tailwind css & alpine js

Creating a Restaurant Menu Section

Awhile back someone asked me how to go about making a restaurant menu, using the Shopify dawn theme.

My first thought was that each menu could be a collection of products (food items). Next, I began experimenting with the dawn theme to see if we could accomplish this by using existing sections.

I found while you could use the featured collection & collection list to display a kind of menu, it just did not seem that customizable out of the box.

So I decided to a create a custom restaurant menu section and share my process here. Hopefully, it’s helpful to others and I am always open and welcome feedback.

What I Will Cover in This Tutorial

  • How to use Tailwind CSS with Shopify for styling.
  • How to manage state with Alpine JS.
  • How to create animations with Tailwind & Alpine JS.
  • How to create custom liquid sections
  • How to create a reusable snippet
  • How to use settings & blocks in sections for theme customizations.
  • You can download the code for this tutorial here.

Getting Your Development Environment Set Up

Setting up a development environment for your first time can be challenging, but you can do it!

While I am not going into great detail about setting up a local development environment, I will link to some helpful resources.

Requirements:

  • Node 14.17.0 or higher
  • Ruby
  • Git
  • Shopify CLI

Resources:

Great book that helped me learn Shopify Theme Customization

Great Shopify CLI 3.0 tutorial

Install Node on windows

--

--

Mike Haslam

I love my wife coding & travel