Design with Elliot

Describe how you want your store to look in plain language, watch it change in a live preview, then publish when you love it.

Elliot, the AI Builder is the easiest way to shape how your store looks. Instead of digging through theme settings or touching any code, you describe what you want in plain language – and the builder rebuilds that part of your store while you watch in a live preview.

It's like having a web designer on call: tell it what you have in mind, see the result in seconds, and keep refining until it's exactly right.

How it works

Open the Design area of your dashboard. You'll see a live preview of your store with the Elliot chat panel on the right. Type what you'd like to change, the builder makes it, and the preview updates so you can see the result right away.

Don't see the chat panel? It can be closed – click the panel icon at the right end of the Design header to open it again. On a phone, tap the message box at the bottom of the screen and the chat opens as a drawer.

If it's not quite right, just keep chatting to refine it – the builder remembers what you're working on and builds on top of your previous requests.

Builder vs. Assistant. Elliot changes how your store looks – layout, colors, sections, fonts. The AI Assistant runs your store – products, orders, and settings. The chat panel shows the AI Assistant everywhere in your dashboard; when you open the Design area, the same panel switches to the Builder for design work.

What Elliot can do

This is much more than swapping a few colors. The builder has full creative control over your storefront and can:

Whatever you ask for is applied across your whole store so it feels cohesive – not just on the homepage.

Step 1: Open the design builder

Go to the Design area in your dashboard. Your store appears in a live preview beside the Elliot chat panel. Everything is already set up – you can start typing straight away in the message box at the bottom of the panel.

Step 2: Describe what you want

Type your request in plain words. The more specific you are, the better the result. Here are examples grouped by what you might want to do.

Set the overall look

• "Make the store feel warm and handmade, with soft rounded corners and a cream background."
• "Give it a bold, modern luxury feel – lots of black, white, and generous spacing."

Change a specific section

• "Make the homepage hero bigger and add a photo of a candle in a cozy room."
• "Move the newsletter signup to the bottom of the page."
• "Add a row of customer testimonials under the products."

Adjust colors, fonts, and details

• "Use a rounder, friendlier font for the headings."
• "Make the buttons dark green and a bit larger."
• "Add a thin announcement bar at the top that says 'Free shipping over $50'."

Tip: Name the section, the look you want, and any colors or wording. "Make the buttons dark green and a bit larger" works far better than "change the buttons." If you're not sure what you want, just describe the feeling – "cozy", "premium", "playful" – and let the builder make the first move.

Step 3: Use your brand kit (optional)

If you have brand guidelines – a PDF or an image with your colors, fonts, and logo – you can upload them so the builder follows your brand automatically. Once your brand kit is set, every design choice respects your colors, typography, and tone without you repeating them each time.

You can also just tell it: "My brand color is #1F6F54 and the logo is the one I uploaded – use those everywhere."

Step 4: Add images and video

You don't need your own photography to get a rich, visual store. Ask the builder to add visuals and it will generate or source appropriate images for you:

• "Add a full-width hero image that fits a candle brand."
• "Put lifestyle photos in the 'Our story' section."
• "Add a short looping video at the top of the homepage."

Product photos you've already uploaded are used automatically wherever products appear.

Step 5: Keep refining

Design is back-and-forth. Try a change, see how it looks in the preview, then ask for a tweak. Repeat until you're happy – there's no limit to how many changes you can make.

Tip: If a change doesn't seem to appear, click the Refresh button above the preview. The preview doesn't always reload on its own.

Tip: Changed your mind while the builder is still working? Send the new instruction right away – the builder switches to it immediately instead of finishing the old request first.

Step 6: Publish when you're happy

Your changes appear in the preview first – your live store doesn't change until you choose to publish. When everything looks the way you want, publish so your customers see the new design. Your previous versions are kept, so it's safe to experiment.

Publishing – and generating images or video – runs in the background, so the chat stays free the moment you ask for it. You'll get a message when it's done instead of having to wait around.

See Publish and go live for more on going live.

Quick edits: retype text directly

Not every change needs a conversation. For a fast wording fix, use the Text toggle in the bottom row of the message box in the Elliot chat panel – the T icon next to the annotation button, labelled Edit text on the page when you hover over it. Once it's on, it turns green and reads Text. Then click straight on the line you want to change in the preview, retype it, and press Enter (or click away) to save it – Shift+Enter starts a new line and Esc cancels. Click the toggle again to stop editing. A line break only works where the text can hold one; otherwise YNS offers to ask the builder instead.

While the toggle is on, links and buttons in the preview don't react, so you can retype their labels. Sections that fold open still do: click the plus or arrow beside an FAQ question to show its answer, then click the answer to edit it.

The toggle lives in the chat panel, so if you can't see it, open the panel first (see How it works).

This only works on wording that's actually part of your storefront's text – a heading, a button label, a paragraph. It can't touch anything pulled from your catalog, like a product name or price, and if the same wording shows up in more than one place, YNS won't guess which one you meant. Either way, it offers to ask the builder for you instead, so the wording you typed isn't lost.

Like everything else here, a text edit only shows in the preview until you publish.

Tip: Reach for direct text edits for a quick typo or wording fix, and switch to chat for anything that also needs a layout, color, or design change.

Annotate the preview

You can also point at things instead of describing them. Turn on annotations with the speech-bubble icon in the bottom row of the chat panel's message box, right next to the Text toggle – it's labelled Add annotations when you hover over it, and once it's on, it turns blue and reads Annotations. Only one of the two toggles can be on at a time; click it again to stop annotating. Then click anything in the preview to pin a numbered note on it, such as "make this bigger" or "too much space here". The note is optional: a pin on its own tells Elliot which part you mean.

Pick exactly the right part

As you move over the preview, an outline shows what a click would select, with a small label naming it. If the outline is too small or too big – a single word when you meant the whole card, say – press ↑ to move the selection out to the part around it, and ↓ to go back. This works while you're hovering and while the note box is open.

Try out style changes

While you're adding a pin, click Styles in its note box to adjust that part of the page yourself and see the result right away in the preview:

Type a new value, pick a color from the swatch, or drag a field's name left or right to nudge a number up or down. Each change you make is listed as before → after with a Revert button, so you can undo one without losing the others.

These changes are a preview for you – they aren't saved to your store yet. When you send the pin, Elliot receives the exact values and makes the same change properly in your store's design, so it stays consistent everywhere.

Mark an area and sketch on it

Sometimes the thing you mean isn't one element – a gap between two sections, or a whole corner of the page. Drag across the preview instead of clicking to mark an area (a Region). You can then draw on it to show what you have in mind: pick Pen, Ellipse, Rectangle or Arrow, and use Undo (or Ctrl+Z, ⌘Z on a Mac) to remove the last mark. Esc stops drawing.

Elliot gets your sketch as an image along with the area's position on the page, and you'll see a thumbnail of it in the chat. If the sketch can't be saved, YNS keeps the area and lets you know.

Send together or one at a time

When you add a pin, its note box has a Batch edits switch:

• On (the default): pins collect in a numbered list above the message box. Add as many as you like, type an extra note if you want, then choose Send to Elliot (or send from the chat box) and the builder works through them together.
• Off: each pin goes to Elliot as soon as you save it – handy for quick, one-off fixes.

In the list, each pin shows its note (or Region for a marked area, or how many style changes it carries), and you can remove a single pin or clear them all before sending.

While the builder is working or you're using the preview, your preview session is kept awake so it doesn't time out mid-edit.

If the preview breaks right after the builder's edit, YNS reports the error to Elliot for you (you'll see a toast, Preview error sent to Elliot) so it can fix its own change. This happens at most three times per visit. A preview that has crashed or goes quiet after waking is also recovered and reloaded automatically.

Check how it looks on other screens

The strip just above the preview chooses the screen your store is shown on. Open the device menu and pick one:

A device other than Responsive shows your store at that screen's real size inside a device frame, with its width × height beside the menu. Three switches next to it help you check the result:

• Rotate turns the device sideways, to check landscape.
• Fit (on by default) shrinks the device so it fits the panel. Turn it off to see it at full size and scroll around it.
• Rulers add pixel rulers along the top and left edges of the page.

These three only work with a device picked, not with Responsive. Switching devices doesn't reload the page, and the preview goes back to Responsive the next time you open the Design area.

X-ray, at the right end of the strip, works with every device: it outlines every element on the page so you can see how the layout is put together – handy for spotting where extra space comes from before you pin a note on it. If it's greyed out, the preview doesn't support it yet; hovering over it says so.

Design sessions

The toolbar above the preview also has a Start design session button. You don't need it to edit your store yourself – the chat, annotations and the Text toggle are all on the Design page already.

A design session is for bigger, reviewed work: your store is frozen in a shareable preview, you and your reviewers annotate it, and our team oversees applying the whole batch. It's a billable design-work service, and while a session runs, the Design page shows the session instead of the chat and preview. If you started one by mistake, cancel it from that screen to get the Design tools back.

Tips for great results

• One idea at a time for big changes, so it's easy to see what each request did. You can batch small tweaks together.
• Describe the goal, not the code. You never need technical words – "make it feel more premium" is a perfectly good instruction.
• Reference real things. Mention your brand, your products, or a store you admire ("clean like an Apple page") to steer the style.
• It's safe to experiment. Nothing is public until you publish, and earlier versions are kept.

FAQ

What's next

• Wondering where themes went after setup? See Choose a theme and change your store's look.
• Set your visual identity in Set your logo and branding.
• Run the rest of your store by chat with the AI Assistant.