AI Smart Store Design

AI Smart Store Design is a revolutionary store design feature. Simply describe your needs (e.g., "I want to design a store"), and AI will automatically generate a complete store design plan covering homepage layout, visual style, theme colors, and content filling. Say goodbye to tedious manual operations and enter the intelligent era of "what you think is what you get."

Quick Start

Steps:

1. In the input box, describe your needs in natural language, for example:
   • "Design a fresh-style clothing store for me."
   • "I want to design a tech-savvy digital store."
   • "Create a warm bakery with warm colors."
2. Click send, and AI will start generating for you.

Generation Results:

AI will automatically generate a complete set of store pages, including but not limited to homepage, product display areas, brand story modules, etc. After generation is complete, the system will automatically save it as the first version and display the preview effect.

Version Management

To ensure the safety and traceability of your design process, the system adopts a versioned iteration mechanism.

• Core Rule: Every time you make any modification to the store (whether it's AI fine-tuning, manual editing, or code editing), the system will automatically save the current state as a new version.
• Version Library: You can view all historical versions in the right toolbar or version history panel.
• Version List: Each version records the generation/modification time, allowing you to backtrack and compare at any time.

Detailed Explanation of Editing and Optimization Tools

After AI generates the initial version, you can use the following eight tools to deeply customize your store. Each tool's operation will generate a new iteration version.

Visual Editor

Visual editing is a code-free interface editing tool for everyone. Without writing any code, you can precisely modify the layout, text, colors, and images of the project, with real-time visible results.

Core Advantages

Advantage	Description
Visual Editing	Any interface element in the project can be freely modified
Code-free Operation	Complete all modifications independently without technical background
Efficient Iteration	Instant preview effect, significantly improving update efficiency

Style Adjustment, Click to Modify

Specific steps:

• Text: Adjust color and font style anytime, what you see is what you get.
• Spacing: Precisely control margins and padding on each side of the container for more flexible layout.
• Images: Click to select an image and directly replace it without re-uploading and repositioning.
• Links: Select a button to edit the jump link, one step to modify the path.

AI Adjustment Examples

• Block/Section: Add a border around this block, change the background to light gray
• Text: Make the tone more urgent, compress to within 20 characters
• Image: Change to a different style image, change the background to another scene, remove the background and keep only the product
• Button: Change rounded corners to full circular capsule style, change to transparent border ghost button, change button text to [Book Demo Now]
• Icon: Change to an icon related to security, change icon color to brand purple, double the icon size

Fine-tune

• Function: Based on the existing version, let AI perform local optimization through natural language instructions.
• Example: Select a version and input optimization requirements, such as "Change the navigation bar color to dark blue", "Enlarge the product images", or "Add a promotional banner".

Design

• Function: Quickly switch visual styles. Click to bring up the visual editing panel.
• Content:
  • Visual Editing: Adjust overall layout structure, spacing, rounded corners, etc.
  • Theme Color Editing: One-click switch primary color, secondary color, background color, or customize color scheme.

Code

• Function: Provided for professional developers. Supports direct modification of HTML, CSS, and JavaScript code of store themes.
• Use Case: Implement highly customized interactive effects or complex style adjustments.

Translation

• Function: Supports multi-language translation of all static content in the store (navigation bar, buttons, titles, descriptions, etc.).
• Operation: Select the target language (e.g., Spanish, French, etc.), and the system will automatically identify and translate the text content in the store, generating a multi-language version.

Preview

• View (Quick Preview): In the current editing interface, quickly view the page effect of the current version, suitable for modifying while viewing.
• Preview (New Tab Preview): Click "New Tab Preview", and the system will open the full-site effect in a new browser window. This simulates the real experience of customers visiting the store, suitable for final effect checking.

Bookmark

• Function: Favorite versions that you are particularly satisfied with or have special significance.
• Operation: In the version list, click the "Bookmark" icon next to your favorite version. Favorited versions will be pinned or displayed in the "Favorites" category for quick location.

Download

• Function: Download the currently selected version as a package to your local device.
• File Format: Standard theme package (.zip format).
• Purpose: Local backup, migration to other stores, or offline development.

Publish

• Function: Officially deploy the selected version to the online store, making it visible to customers.

Operation

1. In the version list, find the version you have confirmed.
2. Click the "Publish" button.
3. After confirming the publication, this version will immediately take effect as the online version of the store.

Note: You can republish any historical version at any time to achieve quick rollback.