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.