Prompting Best Practices

Getting great results from Dalton's AI comes down to how you write your prompts. This guide covers what works, what doesn't, and how to troubleshoot common issues.

The Golden Rule: Be Specific

The AI performs best when you tell it exactly what you want. Vague prompts lead to unpredictable results.

Instead of...	Try...
"Make it better"	"Focus on the time-saving benefit"
"Make it shorter"	"Make this one sentence"
"Change the layout"	"Move the reviews section above the product description"
"Add something here"	"Add a trust badge showing free returns"
"Improve the CTA"	"Make the button copy action-oriented, starting with a verb"

Common Web Design Terms

Understanding basic web design terminology helps you write clearer prompts. See Common Web Design Terms for a complete guide to margin, padding, alignment, and other essential terms.

Tell the AI What You Want (Not What You Don't)

Positive instructions work better than negative ones.

Instead of...	Try...
"Don't make it too long"	"Keep this under 10 words"
"Remove the fluff"	"Focus only on the main benefit"
"Don't be too salesy"	"Use a conversational, helpful tone"
"Avoid jargon"	"Use simple language a beginner would understand"

Device-Specific Prompts

Dalton can apply changes to specific devices. Add these phrases to your prompt:

• "on mobile only" - Changes apply only to mobile view
• "on desktop only" - Changes apply only to desktop view
• "for mobile" - Same as above

Examples:

• "Center this text on mobile only"
• "Make the button full-width on mobile"
• "Show a shorter headline on mobile only"

Check Both Views

Always preview both desktop and mobile after making changes, even if you specified a device. This ensures nothing unexpected happened.

One Change at a Time

Complex prompts with multiple instructions often fail. Break them into steps:

Instead of:

"Reorder these three sections, change the headline to focus on speed, and make the CTA more urgent"

Do this:

1. "Move the testimonials section above the features"
2. "Change the headline to emphasize how fast setup is"
3. "Make the CTA button copy more urgent"

Prompts That Work Well

Headlines:

• "Make the headline focus on [specific benefit]"
• "Test a question-based headline"
• "Make this headline more specific about [outcome]"

CTAs:

• "Start the button text with an action verb"
• "Add urgency to the CTA without being pushy"
• "Make the button copy benefit-focused instead of action-focused"

Layout:

• "Move [element] above [other element]"
• "Add a [trust badge/social proof/urgency indicator] near the CTA"
• "Make the [section] more prominent"

Copy:

• "Shorten this to one sentence"
• "Add a specific number or statistic"
• "Focus on [pain point] instead of [feature]"

Prompts That Don't Work

Some things are outside what the AI can do:

• Dynamic content: "Change the price" / "Update the inventory count"
• Images: "Add a product photo" / "Change the hero image"
• Navigation: "Rearrange the menu items"
• Forms: "Add a new form field"
• Animations: "Make this fade in"

For these, use URL Split Tests with a completely different page version.

How Dalton Works: Capabilities & Limitations

Understanding how Dalton operates helps you write prompts that work within the platform's constraints.

Two Main Flows

Dalton uses two different flows depending on what you're doing:

• Prompting Flow: Creates new experiments from scratch. You select an element and describe what you want to change or add. Best for new experiments, adding elements, or making initial modifications.

• Improve Flow: Iterates on existing variants. You can modify the HTML, CSS, or JavaScript of variants you've already created. Best for refining experiments, adjusting styling, or tweaking copy after initial creation. YOu cannot change the target of the experiment, and for ibgger changes, it might be better to start fresh with a more detailed prompt.

When to Use Each Flow

Use Prompting to create new experiments or when the experiment generated needs too much work. Use Improve when you want to refine an existing variant or you want to create a new one **For both flows you can use the add context button to select extra elements on the page relevant to your experiment (e.g. selecting the user reviews lower on the page for a new social proof element in your hero banner)

What Works

Dalton can modify your site through a front-end overlay (a JavaScript snippet that runs in the browser). This means it can:

• Text changes: Headlines, copy, button text, descriptions
• Styling: Colors, fonts, spacing, borders, backgrounds
• Layout: Moving elements, reordering sections, changing spacing
• New elements: Adding trust badges, social proof, banners, sections
• CSS-only animations: Transitions, hover effects, simple animations
• Simple JavaScript: Basic interactivity like accordions, tooltips, ...

What Doesn't Work

Because Dalton operates as a front-end overlay, it is hard and often not possible to do the following experiments

• Dynamic content: Prices, inventory counts, product names, user-specific data
• Forms: Adding new form fields or changing form behavior
• Backend logic: Database changes, server-side processing, API modifications

Dynamic Content Gotcha

If you're testing on product pages or template pages, never hardcode prices, product names, or reviews. These must remain dynamic. Always specify in your prompt: "Make sure the price is dynamic, not hardcoded" or "Use the existing product name, don't replace it."

Technical Constraints

Dalton uses document.querySelector to target elements via CSS selectors, then applies changes using one of three operations:

• INSERT_BEFORE: Adds new content before an existing element
• INSERT_AFTER: Adds new content after an existing element
• REPLACE: Replaces an existing element with new content

The platform works on any website (Shopify, Webflow, custom code) because it operates at the browser level, not the code level.

Scenario-Specific Guidance

Different page types and scenarios require different approaches. Here's how to prompt effectively for common situations:

Template Pages & Multi-Page Experiments

When running experiments across multiple pages (like all product pages or all blog posts):

• Ask for pure styling experiments: Focus on layout, colors, spacing, and visual hierarchy
• Specify dynamic content requirements upfront: "Make sure product prices are dynamic, not hardcoded"
• Avoid product-specific content: Don't ask to add specific product names, reviews, or details that only apply to one product

Example:

"Add a trust badge above the add-to-cart button. Use the existing product price dynamically—don't hardcode it. Style it to match the page's existing design."

Product Detail Pages (PDP)

Product pages have complex layouts and dynamic content. Be extra careful:

• Never hardcode prices, product names, or reviews: These are dynamic and product-specific
• Preserve interactivity: Color swatches, add-to-cart buttons, quantity selectors must continue working
• Handle complex layouts carefully: PDPs often use flexbox or grid layouts that can break if not handled properly

Example:

"Add shipping information near the add-to-cart button. Make sure the add-to-cart functionality still works and the price remains dynamic."

Product Listing Pages (PLP)

Collection pages display multiple products. Key considerations:

• Don't replace product cards: They contain dynamic product data
• Be careful with filters and sorting: These are interactive and must continue working
• Use JavaScript for card modifications: If you need to modify cards, use querySelectorAll to target all cards

Example:

"Add a 'New' badge to product cards that are less than 30 days old. Don't replace the cards—just add the badge using JavaScript."

Interactive Elements

When working with interactive elements (buttons, forms, swatches, dropdowns):

• Preserve event handlers: If replacing a button, proxy the click event to the original
• Hide, don't remove: Use opacity: 0 or visibility: hidden on original elements, never delete them
• Test functionality: Always verify that interactions still work after your changes

Example:

"Replace the add-to-cart button with a larger, more prominent version. Make sure clicking it still adds items to the cart by proxying the click event to the original button."

Complex Layouts (Flexbox & Grid)

Modern sites use flexbox and grid for layouts. When prompting:

• Respect existing layout structure: Don't break the container's layout system
• Consider responsive behavior: Layouts change on mobile vs desktop
• Use insertion strategies: Sometimes it's better to insert after and hide the original, rather than replacing

Example:

"Move the reviews section above the product description. Make sure this works on both mobile and desktop without breaking the page layout."

When Prompts Fail

If your prompt keeps failing or producing errors:

1. Check if the element is dynamic - Prices, inventory, size selectors can't be modified
2. Try selecting a parent element - Sometimes the specific element is inside a component the AI can't access
3. Simplify the prompt - Remove any complexity and try one change
4. Check for iframes - Content inside iframes (like embedded forms) can't be edited

See Troubleshooting for more detailed solutions.

Iterating on Results

Don't expect perfection on the first try. The best experiments come from iteration:

1. Start with a simple, specific prompt
2. Preview the result
3. If not quite right, create a new variant with a refined prompt
4. Compare variants to find what works

Undo or Start Fresh

If a variant doesn't look right, use undo to revert changes, or delete it and create a new one with a better prompt.

CRO-Optimized Example Prompts

See CRO Example Prompts for 8 real-world example prompts covering trust signals, CTA optimization, social proof, urgency messaging, section reordering, SaaS optimization, pricing tables, and mobile-specific improvements. Each example includes the prompt text, CRO hypothesis, and important considerations.