Build Store Sections with Your Own AI
Bring ChatGPT, Claude, or another AI to create custom sections for a Roastify Store
Pro members can bring their own AI to add custom sections to supported pages in a Roastify Store. Describe what you want inside the Store editor, copy Roastify's prepared prompt into the AI of your choice, and paste the returned HTML and CSS back into the section.
Roastify prepares the prompt and renders the result, but it does not send the request directly to an AI provider. You can use ChatGPT, Claude, or another AI that can return HTML and CSS.
Add a New AI Section
In the Merchant App, open Stores, select the Roastify Store you want to change, and choose Edit Store.
Use the page selector to open the Home, Catalog, About, Contact, or supported product page where the new section should appear.
Select Add a section, then choose Design with AI. The new item appears as an AI Section in the editor navigation.
Explain the layout, message, visual style, buttons, product behavior, and destination links you want. Be specific about what the customer should see and do.
Select Copy AI prompt. Roastify adds your store theme, page context, products, and supported store components to the request.
Paste the prompt into ChatGPT, Claude, or another AI and ask it to complete the request. Copy the full response when it finishes.
Return to the AI Section and paste the response into HTML & CSS. The editor removes common code fences and surrounding chat text when possible.
Check the live preview at desktop and mobile sizes, confirm links and product actions, then save or publish the store changes.
Write a Strong Description
Include the following details when they matter:
- Purpose: announcement, brand story, featured coffee, reviews, comparison, FAQ, or call to action
- Layout: full-width banner, two columns, card grid, image left, centered text, and so on
- Content: exact headline, supporting copy, and button labels
- Destination:
/catalog,/about,/contact, a specific product, or another store page - Product action: show a live price, link to a product, or include an add-to-cart button
- Style: quiet and minimal, bold editorial, seasonal, rustic, bright, or another visual direction
Example:
Create a full-width section about our small-batch roasting process. Use a warm cream background, a large headline, a short paragraph, and two buttons: one to
/aboutand one to/catalog. On desktop, place the text beside a rounded image; stack it on mobile.
Revise an Existing AI Section
After code has been added, the description field changes to Describe your changes.
Fix Warnings
The editor checks pasted code for unsupported or broken content. If it finds an issue:
- Review the warning list.
- Select Copy fix prompt.
- Paste that prompt into your AI.
- Replace the section with the corrected response.
What AI Sections Support
AI Sections accept HTML and CSS. Roastify automatically removes or blocks unsafe content such as:
- JavaScript and script tags
- Forms
- Untrusted embeds
- Unsupported attributes or URLs
The prepared prompt also explains Roastify's store-aware components. These can render live product prices, add-to-cart buttons, and product lists when the section uses valid product and variant IDs from the store.
Always test every link, price, and purchase action in the preview. AI-generated output can be incomplete even when it looks correct.
Images in an AI Section
After an AI Section includes image URLs, the editor lists the images used in that section. Use the image picker to replace them with uploaded or saved store images without asking the AI to rewrite the section.
Practical Tips
Start Small
Build one focused section at a time. A clear banner or product feature is easier to review than an entire page in one prompt.
Keep the Prompt
Save strong descriptions outside the editor if you want to reuse a layout on another page.
Check Mobile
Resize the preview and confirm text, images, and buttons stack cleanly on narrow screens.
Revise in Place
Use the revision prompt for changes so the AI retains the current structure and store context.