Creating Shopify Theme Sections with Cursor

This is not a tutorial. I'm not writing every detail of what I did, but I'll try to cover the main points.

TL;DR 😊

I asked AI (Cursor) to build a shopify theme section. It generated working Liquid, CSS, and JS and matched the theme structure I had in mind.
The downside: without clear instructions, it added more files and options than I needed. Review the output and refine your prompts is bit tough, so I decided make it small and make it grow.

---

Where we left off

In the last post, I set up the Skeleton theme with

shopify theme init

While cloning, you can also select an LLM instruction file. If you plan to use AI, pick one or use all of them.

Skeleton is a minimal Shopify starter theme with very few opinions, which makes it easier to experiment and learn the structure.

Digging into the theme structure

The readme describes each directory like this:

├── assets          # Stores static assets (CSS, JS, images, fonts, etc.)
├── blocks          # Reusable, nestable, customizable UI components
├── config          # Global theme settings and customization options
├── layout          # Top-level wrappers for pages (layout templates)
├── locales         # Translation files for theme internationalization
├── sections        # Modular full-width page components
├── snippets        # Reusable Liquid code or HTML fragments
└── templates       # Templates combining sections to define page

To me it feels similar to atomic design:

• snippets → Atoms

• blocks → Molecules

• sections → Organisms

• templates → Templates

(This is how I understand it; it might not be the official mapping.)

One advantage of the Skeleton theme is the default files. For example, it comes with:

• assets/critical.css

• snippets/css-variables.liquid

They give you basic styles without going overboard, so it's easy to overwrite. They also help you set up variables and such. (Before cloning Skeleton theme, I wasn't sure where to put variables😅)

Using AI

In normal frontend work I would build most snippets first. But I was new to Shopify theme development, and I had only designed the top page. So I decided to ask AI what it would do.

I use the Cursor editor (Auto) for most of the work.

The theme already has a default LLM instruction file, so I didn't add extra rules at first. I could have added my own coding preferences, but since I was new to Shopify and Liquid, I chose not to. (I added some later.)

First try: slideshow section

The client wanted a slideshow (carousel) on the top page. So I tried this prompt first:

I want to implement a slideshow on the top page.
Make it simple and easy to use.

Ref: https://github.com/Shopify/dawn

I know it's pretty general. But I wanted to see what would come out and give myself time to understand the result.

It generated:

• assets/component-slider.css

• assets/section-slideshow.css

• assets/slider.js

• sections/slideshow.liquid

• snippets/icon-next.liquid

• snippets/icon-prev.liquid

Yep, it worked 🤯 (It also modified related files.)

Note: As of Feb 6, 2026 (when I'm writing this), the same prompt may not create the top three files anymore, because the LLM instructions have been updated since I first tried.

What worked well ✅

1. It worked. The slideshow ran as expected. That matters. 😏

2. The structure matched what I had in mind. Files landed in the right places (sections, snippets, assets). So my mental model of the theme (snippets vs sections vs assets) was mostly correct.

3. Icons as snippets made sense. I wasn't sure whether icons should live in assets or snippets. Seeing the AI put icon-next and icon-prev in snippets helped me decide: small, reusable UI bits go in snippets.

4. Liquid objects and filters. Not in the slideshow, but in other sections, the AI used Liquid objects and filters well. I don't have time to read the whole Liquid docs. When it uses filters or objects I don't know, it helps me catch up and learn.

5. I could see how the AI behaved. By looking at the generated code, I noticed patterns (e.g. separate CSS/JS files, lots of schema options). That helped me write better prompts and rules later.

What was less ideal (and I fixed it) 😥

If I don't set rules or write clear instructions, the AI tends to:

1. Create CSS and JavaScript in separate files.
   Sometimes separate files help readability, but for simple sections they're often not necessary. You can keep styles and scripts inside the section with {% stylesheet %} and {% javascript %} instead.

2. Rely on JavaScript more than I wanted.
   Pure CSS can do a lot nowadays, so many effects don't need JS.

3. Add many options in the schema (settings in the theme editor).
   Saying "keep it simple" in the prompt isn't enough to minimize options. You have to be explicit about what you want (or don't want).
   For example, I got something like adjustable height with min, max, step, and unit. For reusability, a few presets (e.g. sm, md, lg) are enough. Too many settings in the theme editor can confuse non-developer users.

I had attached the Dawn theme as a reference, so that likely pushed it toward “full-featured” output. 😅 I had to trim the generated code to remove what I didn't need.

Takeaway: Be clear about what you want for each section. Otherwise you might accept the first result without thinking. (I'm not aiming for “vibe coding”; I want to stay in control.)

After reviewing the code for a while, I merged the change.

Conclusion ✨

That first slideshow was a good way to learn how Liquid and the theme structure fit together. These days I often do the opposite: I ask AI to create small parts first, add an option, add another, and let it grow into a section step by step. So you don't have to go "one big section, then trim." You can also start small and build up. 🛠️