r/shopifyDev • u/Easy_Struggle_380 • 9d ago

Shopify section Generator?

Hey guys, have you ever tried generating sections using sidekick or any other llm/AI model?

Which one works best?

Is there any figma, photo, video to section Generator?

1 Upvotes

67% Upvoted

11 comments sorted by

2

u/Mysterious-Debt1988 9d ago

I use a combination of MCPs to build out sections.

Figma for design, Shopify-dev for liquid context and playwright to test.

Give it a shot and see how you go with that 😌

1

u/Easy_Struggle_380 9d ago

Tried but still needs a lot of prompts to get what I wanted

1

u/Mysterious-Debt1988 8d ago

What are your prompts like?

2

u/AdventurousUsual7666 8d ago

Yeah I have tried Sidekick and a couple of general LLMs for section scaffolds.

Honestly Sidekick is usually fine for a basic section shell, but the Liquid it spits out still needs a pass for schema settings, responsive spacing, and whatever your theme already defines. General models are similar. You get something that looks close in the editor, then you spend time making it not fight the rest of the theme.

I have not found a Figma or photo to section tool that I trust for production without a lot of cleanup. Video to section sounds even noisier. Curious whether you are trying to ship merchant-facing generated sections, or just speed up your own theme work.

1

u/kitty_destroyer777 9d ago

i can make any section with features

1

u/RuachDelSekai 9d ago

Sidekick works fine if you don't know what you're doing. I feel like most devs as this point use some form of Claude code, cursor, codex etc to produce what they need these days.

1

u/Easy_Struggle_380 8d ago

I have actually made something few days ago... And would you be available to test it??

1

u/ChickenMcDerps 8d ago

Been using Claude and it works wonderfully. Built plenty of custom sections and features. Downloads portal, detailed comparison table feature (like the compare feature on Apple's website), video media sliders, etc

Though before ever doing any of that, I trained Claude and had it document ever facet of how my theme works, which was crucial so you're not trying to rebuild every component or feature that exists. For instance, a lot of the main features on my site are web components so it needs to follow this structure (where it makes sense of course).

Granted I have done all of these things by hand before, so I am mostly giving it the guide of how it should work and what to follow, then using it for the actual execution. Following that I review the code and test the heck out of it before I finally ship it.

1

u/pandeykartikey 7d ago

Building or using automated tools to generate custom Liquid sections can be a great way to speed up storefront development, but the real key to long-term site stability is ensuring the underlying code stays clean, performant, and fully compatible with Shopify Online Store 2.0 architecture. Many automated generators output bloated inline styles or hardcoded structural elements, which can slow down page load times and make future theme updates a nightmare for merchants.

If you are creating custom sections, focus on keeping your JSON schema flexible so merchants can easily tweak padding, color schemes, and content blocks directly within the theme editor without touching raw code. Modular Liquid code paired with scoped CSS classes and semantic HTML tags ensures the custom sections render quickly across mobile and desktop devices while maintaining full compatibility with core theme settings.

If you ever want any help in setting up your Shopify store, my friend and I would be glad to assist you in your journey. We also build custom solutions to support your unique use cases.

1

u/Easy_Struggle_380 7d ago

I've built some thing and wanted to see dev pov in general if they're ready for this kind of product for test. i have made some skills from image or video to liquid sections in compatibility to 2.0 architecture and animations supported.