Helping an LLM Think Outside the Box | Lotus Creation Concepts Ltd | Chris Li

Platform Shopify

Challenge Mobile Accordions from Standard Sections

Tools Cursor, OpenCode, Droid

Solution Start / End Bookend Sections

The Challenge

I was working on a Shopify site and needed a way to turn standard sections into mobile accordions without changing the desktop layout. It sounds simple enough to code in vanilla JS, but because of how Shopify handles dynamic sections and apps, it's actually quite tricky.

I'll be honest: I tried to one-shot this with an LLM, but the output was a mess. It was bulky, full of weird dependencies, and just felt "hacky." This is one of those problems where you have to be crafty and think outside the box—something AI still struggles to do. I knew the code wasn't good enough, so I went back to the drawing board to find a more elegant solution.

Shopify theme editor showing a list of sections such as Product pages, Expandable content, Media with text, with an Add section button — Shopify theme editor: sections that can be reordered or disabled—the context for the accordion problem.

Why Standard Solutions Fail

In client work, elegance isn't just a luxury; it's a necessity. It leaves a lasting impression. To me, an elegant solution is one with the least possible friction—it's so intuitive that the client can use it without a manual. The level of elegance you can achieve usually depends on the constraints of your platform.

LLMs default to what's popular

By design, LLMs are trained on what's popular, not what's "outside the box." Because truly elegant solutions are rare, they appear as outliers in a sea of common, mediocre code.

Not everything needs an elegant solution

Every project has a mix of simple and complex problems. Standard features like user registration or a basic CRUD to-do list are well-defined—an LLM can handle them with minimal guidance. The "complex" problems, however, require your domain expertise. Your job is to identify these areas and guide the AI toward an elegant result, especially where it provides the greatest value add.

Three older mobile phones with physical QWERTY keyboards, representing pre-2007 conventional phone design — Pre-2007: phones with QWERTY keyboards and a stylus were the norm. If you had asked an AI to design a web-browsing, email-capable phone before 2007, it would have suggested more of the same—because that's what everyone else was doing.

The Approach

To build something elegant, you have to master your domain. For me, that's a deep foundation in HTML, CSS, and JS, paired with years of experience in the Shopify ecosystem. When I approach a problem, I visualize the final state and then "mold" it to fit the platform's limitations.

Fleshing out ideas at speed

Using an LLM—specifically with tools like Exa MCP for documentation—allows me to prototype ideas at lightning speed. To keep things organized while experimenting, I rely heavily on Git Worktrees: multiple copies of your entire project folder, each linked to a different branch.

Multi-agent experiments

This allows me to run different "experiments" across different AI agents simultaneously. I'll often use Cursor, OpenCode, and Droid to tackle the same plan. It's like having three different programmers working on the same task; I simply evaluate their outputs and pick the best parts of each.

Developing a "feel" for the model

As Peter Steinberg (developer of OpenClaw) mentions, you eventually develop a "sixth sense" for LLM output. If your prompt is too broad, the AI's solutions will be wild and unstable. When I see a model start contradicting itself or looping through failed fixes, I know it's time for me to jump in and get my hands dirty.

Escalating to stronger models

I don't start with the most expensive models. I use open-weight models like GLM or DeepSeek for daily coding tasks. If a solution is 90% there but has a stubborn bug, I'll bring in the "big guns" like Claude 4.6 Opus or GPT-5.3 Codex to polish and fix the final 10%.

Pro-tip

LLMs don't do "good enough."

Models don't understand the imperfect solution. They have no idea which features you're willing to sacrifice for the sake of simplicity—that's a human judgment call. Because code is "cheap" now, an LLM will happily spit out a massive, over-engineered solution for a simple problem.

Take the original iPhone alarm picker, for example. The goal was a dial that looked and felt like a physical wheel. A "perfect" technical solution might involve building a complex 3D engine that rotates indefinitely. Apple solved it with a simple scroll illusion instead. If you ask an LLM to build that today, it will likely throw complex math and heavy methods at you. Don't accept it. Just because the code is free doesn't mean the technical debt is.

Illustration of the iPhone alarm picker or scroll-wheel concept — Simple scroll illusion instead of a 3D engine—elegant over "perfect."

The Solution

Knowing the limitations of Shopify, I went with an unconventional approach: Start and End sections. Instead of one massive, complex block, I created two thin "bookend" sections. Anything placed between them becomes part of the accordion.

The "Start" section

Acts as the brain—handling the configuration, titles, and default states—while a script traverses the DOM to wrap the content in between.

Clear plan, high accuracy

Because the plan was clear, Cursor's "Auto" mode generated the code with high accuracy. When you provide a solid architectural plan, the model doesn't have to guess—it just has to execute.

Shopify theme showing Start and End bookend sections for the accordion — The Start and End bookend sections in the theme editor—anything between them becomes part of the accordion.

Key Takeaway

LLMs default to what's popular, so truly elegant solutions require you to own the architecture: master your domain, flesh out ideas with tools like Git Worktrees and multi-agent experiments, and know when to step in. Code may be cheap, but technical debt isn't. Your job is to guide the AI toward the shortest path that still gets the job done.

Let's talk

If you're pushing for elegant solutions and want a second pair of eyes on architecture or your LLM workflow, I'd love to hear from you.

Get in touch

Topics

LLM Shopify Workflow

← Back to Blog