AI HTML Widget for BigCommerce¶

What is the AI HTML Widget?¶

The AI HTML Widget is your personal design assistant inside BigCommerce Page Builder. Instead of hunting for the right widget or hiring a developer, you simply describe the section you want — a hero banner, a feature grid, a countdown timer, a signup form — and the AI builds it and places it on your page for you.

You chat with it in plain English. You can ask for changes as many times as you like, paste in a picture for inspiration, or start from one of hundreds of ready-made templates. It is the fastest way to add polished, on-brand content to your store without touching any code.

Page Builder name: AI HTML Generator | PapaThemes

Version: 1.2.0

What You Can Do¶

• Generate complete page sections just by describing them
• Apply the AI's work to your page instantly, with one message
• Edit any element visually with a docked design panel — no chatting required
• Tune styles per breakpoint for Desktop, Tablet, and Mobile
• Start from a gallery of ready-made section and popup templates
• Paste an image as a reference, or ask the AI to create an image for you
• Refine anything with simple follow-up requests
• Step back to an earlier version if you change your mind
• Stop a long answer at any time and keep going
• Compact a long conversation to keep your credit usage low

Getting Started¶

1. Add the widget to your page¶

1. Open Page Builder in your BigCommerce admin.
2. In the widget panel, find AI HTML Generator | PapaThemes.
3. Drag and drop it onto the spot where you want your new content.
4. The widget shows a friendly placeholder card until you generate something.

2. Open the AI assistant¶

1. After adding the widget, a purple AI button appears in the bottom-right corner of Page Builder.
2. Click it to slide open the chat assistant from the right side of the screen.

3. Describe what you want¶

1. Type a description of the section you want into the message box.
2. Click Send (or press Enter).
3. The AI builds the section and applies it to your page automatically as you watch.
4. A new version is saved so you can always come back to it.

4. Refine it¶

Send follow-up messages to fine-tune the result. The assistant remembers the whole conversation, so you can say things like "make the heading bigger" or "change the button to match my brand color" and it will adjust what it already built.

The Welcome Screen and Starter Prompts¶

The first time you open the assistant, a short welcome message introduces what it can do. Below it you will find starter prompt buttons — one-click ideas like building a hero section or a feature grid. They are a quick way to see the assistant in action if you are not sure where to begin. Just click one and watch it work, then customize from there.

Writing Effective Prompts¶

The more clearly you describe what you want, the better the result. A few simple habits make a big difference.

Be specific about the content. Instead of "make a banner," try: "Create a full-width hero banner with a background image, a large white headline centered in the middle, a short subtitle, and a blue 'Shop Now' button."

Mention how it should look on mobile. For example: "Show three columns on desktop and stack them into one column on phones."

Reference your brand. Say "match my store's color scheme" — the assistant can look at your current page to pick up your fonts, colors, and spacing.

Build up step by step. Start with the overall layout, then refine colors, spacing, and wording in follow-up messages.

Show, don't just tell. Paste a screenshot of a design you like and say "recreate something like this."

Ready-Made Templates¶

Rather than starting with a blank page, you can browse a large library of professionally designed section and popup templates and drop one onto your page with a single click.

Browse and apply a template¶

1. Open the AI assistant.
2. Below the message box, click Browse Blocks to open the full template gallery.
3. Browse by category, filter by tags, or search by name.
4. Click any template to open a full-size preview with Desktop, Tablet, and Mobile views so you can see how it looks on every device.
5. Click Use This Block to apply it to your widget. A new version is saved automatically.
6. The assistant then invites you to customize it: "Tell me what to customize."

After applying a template, just tell the assistant what to change — colors, text, images, layout, timing, anything.

Working with Images¶

Paste an image for reference¶

1. Copy any image to your clipboard — a design mockup, a screenshot, or inspiration from another site.
2. Click in the message box and press Ctrl+V (Cmd+V on Mac).
3. A thumbnail appears above the box. Add a description and send.

Great uses include recreating a mockup, showing the assistant your current page, or pointing out something that looks off so it can fix it. You can attach more than one image to a single message, and remove any thumbnail before sending by clicking the X on it.

Ask the AI to create an image¶

You can also ask the assistant to generate an image for you right inside the conversation — for example, "add a background photo of a cozy coffee shop." The generated image is placed into your section automatically.

Handy Controls¶

Stop a long response¶

If a response is taking longer than you need, you can stop it mid-way. Anything generated up to that point is kept, and you can carry on with your next request. If you type a new message while the AI is still working, it will be sent automatically as soon as the current response finishes.

Compact the conversation to save credits¶

Long conversations cost more, because the assistant re-reads the whole chat each time. The compact conversation button condenses the earlier back-and-forth into a short summary — keeping the important context while reducing how much you are charged on future messages. Use it when a chat has been going for a while.

Go back to an earlier version¶

Every time the AI builds or updates your section, a new version is saved. Use the version arrows at the top of the chat (for example, v2/5) to step back and forth. The page updates instantly as you move between versions, so you never lose earlier work. If you step back and then send a new message, the assistant continues from that earlier version.

Visual Editor (Design Mode)¶

Sometimes you want to nudge a colour, shrink a padding, or change a heading size without typing a full message to the AI. The Visual Editor lets you edit any element of your section directly, just like a page-builder design tool.

Switching to Design mode¶

At the top of the chatbot sidebar, click Design (next to Chat) to switch modes. Click Chat any time to go back. The conversation is preserved while you design.

Selecting an element¶

1. In Design mode, hover over your section in Page Builder — elements highlight as your mouse moves.
2. Click the element you want to edit. The right-side panel opens with its current styles.
3. If you click an element that has no class of its own, the editor automatically selects its nearest styled parent — so you always have something useful to edit.

What you can change¶

The Design panel groups styles into familiar sections:

Edits preview live as you adjust each control — nothing is committed until you click Save changes.

Responsive editing — Desktop, Tablet, Mobile¶

At the top of the panel, three buttons show the active breakpoint: Desktop, Tablet, Mobile. The active one follows your Page Builder preview width automatically, so what you see is what your shoppers will see at that size.

When you edit on Tablet or Mobile, your change is saved as a responsive override for that screen size only — Desktop stays untouched. This is the same approach professional design tools use.

Shared classes — "affects N elements"¶

The AI builds sections using shared styles for repeated elements (think a row of feature cards or a grid of product tiles). If the element you are editing shares its style with others, you will see a small badge — for example "affects 3 elements".

That means your change will apply to all matching elements at once. This is usually what you want — keeps the design consistent. If you only want to change one of them, ask the AI in chat to give that element its own style.

Saving and discarding¶

While you have unsaved edits, the Save changes and Discard buttons light up at the bottom of the panel.

• Save changes publishes your edits to the widget and saves a new version, so you can roll back later just like with chat-generated content.
• Discard reverts every change you have made since the last save.

If you try to leave Page Builder with unsaved edits, the browser will warn you so nothing is lost.

Quality Levels and Credits¶

The assistant offers three quality levels, which you choose from the dropdown at the top of the chat. Your choice is remembered for next time.

How credits work¶

The widget itself is free. The AI work is paid for with credits in your PapaThemes account (measured in US cents — a $10 top-up gives you 1,000 credits).

• You are charged a small amount once per response, based on the quality level you chose and the length of the request and result.
• A running cost and usage meter is shown at the bottom of the chat so you always know where you stand.
• If your balance runs out, the assistant lets you know and you can top up at any time.

You can check your balance and buy more credits in the PapaThemes app in your BigCommerce admin.

Saving Your Chat History (Optional)¶

By default, your conversation and saved versions live in your browser and are cleared when you close the tab. An optional history-saving subscription keeps everything safely on the server instead, so your conversations, images, and versions are restored every time you reopen the assistant — even on another device.

• A free trial starts automatically the first time you use the assistant.
• When the trial nears its end, you will see a notice with options to turn on auto-renew, switch back to browser-only, or dismiss the message.
• With auto-renew on and enough credits, it renews automatically with no interruption.
• You can manage the subscription, view your balance, and buy credits in the PapaThemes app under Settings.

Page Builder Settings¶

Most of the time you control the widget entirely through the chat assistant, but two settings are available in the Page Builder panel when the widget is selected:

Example Prompts to Try¶

"Create a hero section with a large background image, a centered headline, a subtitle, and a call-to-action button. Add a dark overlay on the image so the text is easy to read."

"Build a 3-column grid showing product features. Each column has an icon, a title, and a description. Stack to one column on mobile."

"Create a countdown timer to December 25^th showing days, hours, minutes, and seconds, with large white numbers on a dark background."

"Design a testimonials carousel with customer quotes, names, and star ratings. Show three at a time on desktop, one on mobile, rotating every five seconds."

"Build an FAQ section with five questions that expand and collapse when clicked."

"Create a newsletter signup with a heading, a short description, an email field, and a submit button on a gradient background."

Tips for Best Results¶

• Be specific — the clearer your description, the closer the first result will be.
• Mention mobile behavior so your section looks great on every screen.
• Reference your brand so colors and fonts match your store.
• Iterate in small steps rather than asking for everything at once.
• Use images — paste a mockup and ask the assistant to recreate it.
• Start from a template when one fits, then customize.
• Compact or clear long conversations to keep credit usage low.

Common Questions¶

Do I need any coding experience?¶

No. You describe what you want in plain English and the assistant does the rest. You never see or edit code.

How much does it cost?¶

The widget is free. You only pay credits for the AI work, based on the quality level you pick and the size of the request. Use Mini for small jobs to keep costs down.

Can I use it with any BigCommerce theme?¶

Yes. It works with all BigCommerce themes, and the content it creates stays neatly contained so it does not interfere with the rest of your store's design.

Why isn't the AI button showing?¶

Make sure you are in Page Builder edit mode and that the widget is on the page. Refreshing Page Builder usually brings it back.

Can I undo a change?¶

Yes. Every change is saved as a version. Use the version arrows at the top of the chat to step back to any earlier version — nothing is lost.

Will my section look good on phones and tablets?¶

Yes. The content the assistant builds is responsive and adapts to desktops, tablets, and phones. You can also ask it to adjust the mobile layout specifically.

Is my chat history saved?¶

By default it lives in your browser for the current session. Turn on the optional history-saving subscription to keep your conversations, images, and versions across sessions and devices.