How to write prompts for Shopify sections that get it right first time

A Shopify section is a single Liquid file: markup, CSS, JavaScript and a {% schema %} block that tells the theme editor which settings and blocks to show. When an AI writes that file for you, the prompt is the whole specification. A vague prompt does not produce a bad section so much as a generic one, built around guesses you did not get to make. The tips below apply to any AI tool, and they are how we recommend writing prompts in Klorr.

Name every feature explicitly

The most common gap between what someone wanted and what they got is a feature they assumed was obvious. "A product carousel" could mean arrows, dots, autoplay, swipe, a quick-add button, a sale badge, or none of those. If you want it, write it down.

• List interactive behaviour: arrows, dots, swipe, autoplay (and whether it pauses on hover), open and close, filtering.
• List the content each item shows: image, title, price, compare-at price, rating, badge, button.
• Say what happens on click: go to the product page, add to cart, open a drawer.
• Mention the empty state: what should show when no collection or image has been picked yet.

Klorr checks each generation against the features you named and touches the section up automatically when one is missing, so a named feature is far more likely to arrive than an implied one. That only works for features that are actually in the prompt.

Describe the layout for desktop and mobile

Most stores get more mobile traffic than desktop, yet prompts usually describe only the desktop view. Say how the section should behave at each size: "four columns on desktop, two on tablet, a horizontal swipe row on mobile" is unambiguous. "Responsive" is not.

• Column counts per breakpoint, or whether items stack.
• Whether the image sits left, right or above the text on mobile.
• Which elements to hide or shorten on small screens.
• Whether the section is full width or sits inside the theme's page width.

Say what should be editable

A section is only as useful as its settings. If the merchant cannot change the heading, the button link or the background colour in the theme editor, every small change needs a developer. Tell the AI which things should be settings and which should be repeatable blocks.

• Settings: heading, subheading, button label and link, colours, spacing, image, alignment.
• Blocks: anything the merchant should be able to add, remove and reorder, such as slides, FAQ items, testimonials or feature cards.
• Limits: "up to 6 slides" becomes max_blocks in the schema.

In Klorr, the editability slider sets this for the whole section. At Maximum, every shopper-facing word becomes a setting. For more on how settings and blocks fit together, see Shopify section blocks and how to make a Shopify section editable.

Give real content and your brand

Placeholder text produces placeholder proportions. A heading of four words and one of fourteen need different layouts, so give a realistic example. The same goes for brand: name your colours as hex values, your fonts, your corner radius and the general feel.

• Example copy: a real heading, a real product name, a realistic description length.
• Colours: "background #F6F1EA, text #1C1C1C, accent #C2410C" rather than "warm colours".
• Type: whether to inherit the theme's fonts (usually best) or use specific ones.
• Theme: which theme you use, such as Dawn, so the section can match its spacing and button styles.

Before and after: three example prompts

1. A testimonial slider

Before: Make a testimonials section.

After: A testimonials slider. Each testimonial is a block with a quote, customer name, location, star rating (1 to 5) and optional photo. Desktop shows three cards side by side with arrows; mobile shows one card at a time with swipe and dots. No autoplay. Settings for heading, background colour and card colour. Up to 12 testimonials.

2. An image with text

Before: Image with text, modern style.

After: Image with text, image on the left at 50% width on desktop, image on top on mobile. Text side has an eyebrow label, heading, rich-text paragraph and up to two buttons. Settings to swap the image to the right, choose vertical alignment, and set background and text colours. Example heading: "Made in small batches in Porto".

3. A fix to an existing section

Before: My FAQ section is broken, fix it.

After: (code pasted) The accordion opens but will not close again on iPhone Safari, and all items start open on page load. They should start closed, and only one should be open at a time. Keep the existing settings and styles.

Iterate with small edit requests

Once a section is close, do not rewrite the whole prompt to change one thing. A fresh prompt means a fresh section, and the parts you liked may not survive. Ask for one change at a time instead: "make the cards' corners 12px", "add a sale badge when the product is on sale", "move the arrows below the slider on mobile".

Small requests are easier to check, cheaper to run and easy to undo. Klorr keeps the last five versions of each section behind the clock button, so if an edit goes the wrong way you can restore the version before it.

Paste existing code to fix it

If you already have a section from a theme, an app or a freelancer, paste it in and describe what is wrong rather than asking for a new one. Klorr edits the code you gave it instead of starting over, so your settings and existing content keep working. Be specific about the symptom: which device, which browser, what you expected and what happened.

If a section does not appear in the editor at all, the problem is usually the schema rather than the markup. Why a custom section is not showing in the theme editor covers the usual causes, and the section schema generator checks a schema against the rules the editor enforces.

A prompt checklist

When the section is ready, how to add a custom section to Shopify walks through installing it without an app. If you would rather start from something finished, the Klorr marketplace has sections you can install and then adjust with an edit prompt.