# Add AI features to your app
Source: https://docs.meowgic.ai/cloud/ai

Add chat, summaries, image generation, and voice features to your Meowgic app without managing API keys or backend infrastructure.

Adding AI to an app normally means selecting models, protecting API keys, building backend calls, and monitoring cost. Meowgic Cloud handles that foundation for you. Describe the feature you want to build, and Meowgic can set up the AI capability behind it.

AI features inside your app are separate from the Meowgic AI agent that helps you build it:

* **In-app AI** serves your customers, such as a support assistant or product-copy generator.
* **Build AI** supports your development workflow, such as creating pages or updating code.

## What you can build with AI

Common use cases include:

* **Product and content summaries**: Turn long descriptions, reviews, or documentation into clear takeaways.
* **Support and shopping assistance**: Answer questions, recommend products, and guide shoppers before purchase.
* **Sentiment and intent analysis**: Review customer feedback at scale and surface issues that need attention.
* **Knowledge-base Q\&A**: Answer customer questions using your help center, policies, and internal documentation.
* **Copy and localization**: Draft campaign copy, product titles, emails, and localized content.
* **Image generation and editing**: Create campaign visuals or adapt product imagery to a new style.
* **Voice features**: Read content aloud or turn spoken input into searchable text.

## Enable AI features

1. Make sure Cloud is enabled for your app: **App → Cloud → Enable Meowgic Cloud**.
2. Open the **AI** tab in Cloud.
3. Configure AI permissions to match your team's approval policy.

## How it works

Meowgic handles the underlying infrastructure:

* **Managed credentials**: Meowgic manages model credentials so you do not need to paste keys into your app.
* **Server-side calls**: Requests run through a managed backend instead of directly in the browser, keeping sensitive data protected.
* **Streaming responses**: Chat and generation features can stream output so customers see results sooner.
* **Usage visibility**: Each request records its status, duration, and credit consumption to help you troubleshoot and optimize.

## Choose the right model

If you are unsure which model to use, describe the business outcome you need and start with Meowgic's recommendation. Then refine your choice based on quality, speed, and cost.

* **Chat and Q\&A**: Start with a fast general-purpose model that balances quality and cost.
* **Complex reasoning or accuracy-sensitive work**: Use a stronger model when slower responses and higher cost are acceptable.
* **High-volume batch work**: Choose an efficient model for classification, tagging, and simple summaries.
* **Image work**: Select a model based on whether final quality or production cost matters more.

You can use different models for different jobs. For example, use a fast model for customer support and a more capable one for analyzing complex return or order disputes.

## Chat models

Chat models understand and generate text. Use them for customer support, product copy, review classification, and knowledge-base Q\&A.

If you are not sure where to start, choose a reliable, fast general-purpose model. Move up when you need more accuracy or deeper reasoning.

<Note>
  Available models may vary. Refer to the model list in your Meowgic workspace for the current options.
</Note>

| Model | Best for |
| - | - |
| **DeepSeek V4 Flash** | High-volume, low-latency work such as first-line storefront support, product FAQ replies, and review triage. |
| **DeepSeek V4 Pro** | Tasks that need stronger logical consistency, such as interpreting return policies, routing complex cases, and explaining operating rules. |
| **Kimi K3** | Long-context work, such as turning extensive product documentation into selling points or summarizing long support conversations into next steps. |
| **GPT 5.4 mini** | Cost-conscious everyday work, including bulk product titles, campaign snippets, email polishing, and localization. |
| **GPT 5.5** | Accuracy-sensitive tasks, such as high-value customer cases, complex knowledge-base questions, and analysis across multiple sources. |
| **GPT-5.6 Luna** | Lightweight, high-throughput tasks such as intent detection, tag extraction, short summaries, and real-time shopping prompts. |
| **GPT-5.6 Terra** | A general-purpose choice for support assistants, product recommendation explanations, campaign copy, and medium-complexity reasoning. |
| **GPT-5.6 Sol** | Demanding work such as multi-step business reasoning, complex promotion rules, and decision-support analysis. |
| **GLM 5.2** | Chinese-language customer conversations, Chinese copy adaptation, and Chinese knowledge-base Q\&A. |

Practical guidance:

1. Establish a baseline model and track success rate, average latency, and credits per request.
2. Test the same input set with different models to compare quality and cost.
3. Choose models by task instead of asking one model to do everything.

## Image models

Image models create and edit product images, campaign assets, and social content.

| Model | Best for |
| - | - |
| **Nano Banana** | Low-cost, fast visual exploration, such as campaign drafts, initial cover variations, and creative previews for A/B tests. |
| **Nano Banana 2** | Everyday marketing production, including product-image variations, promotion graphics, and batches of social media assets. |
| **Nano Banana Pro** | High-quality brand visuals, such as hero imagery, seasonal campaign key art, and polished marketing creative. |
| **GPT Image 1 Mini** | High-volume lightweight work, including thumbnail generation, rapid style exploration, and inexpensive draft batches. |
| **GPT Image 2** | High-fidelity creative production, such as refined product hero images, final ad creative, and complex compositing. |

For image generation, a two-stage workflow often controls cost best:

1. Generate a broad set of concepts with a lower-cost model.
2. Refine the selected concepts with a higher-quality model.

## Other models

Other models handle focused image-processing and editing tasks.

| Model | Best for |
| - | - |
| **Face Cutout** | Isolating people in images, such as cropping creator content, extracting profile images, or layering talent into campaign graphics. |
| **Remove Background** | Preparing product and marketing assets, including clean catalog images, standardized product imagery, and transparent exports. |

## Monitor AI usage and performance

In **App → Cloud → Usage → AI usage**, you can review:

* Daily request volume
* The share of requests by model
* Credits consumed by requests

Use this data to answer three important questions:

* Which requests are most common?
* Which features consume the most credits?
* Where would a different model reduce cost or improve speed?

## Usage and billing

Meowgic Cloud AI features consume credits based on usage. Go to **Settings → Usage** to review your workspace balance, billing history, and daily cost.

To manage costs, start with these three practices:

1. Review your highest-volume use cases before switching to a lower-cost model.
2. Process long documents in smaller chunks to avoid expensive single requests.
3. Add request limits and useful fallback messages to critical features.

## Best practices

1. Define success metrics before you build: accuracy, response time, and cost per request.
2. Validate prompts and models with a small traffic segment before a full rollout.
3. Keep a non-AI fallback for critical flows, such as human review or rule-based logic.
4. Group request logs by business use case so you can improve the right workflow.
5. Review your top failure and top-cost scenarios each week.

## FAQ

<AccordionGroup>
  <Accordion title="Is in-app AI the same as the Meowgic build assistant?">
    No. In-app AI serves your customers through features like chat, summaries, and generation. The build assistant helps you create and update your app.
  </Accordion>

  <Accordion title="Do I need to provide a model-provider API key?">
    Usually not. When you use Meowgic Cloud's built-in AI features, Meowgic handles credential management and the server-side integration.
  </Accordion>

  <Accordion title="Can I choose a specific model?">
    Yes. Tell Meowgic which model you prefer, or start with the recommended model and refine the choice based on quality and cost.
  </Accordion>

  <Accordion title="Why might I receive a 429 or 402 response?">
    A 429 usually means your request rate exceeded the limit. A 402 usually means your workspace does not have enough credits. Reduce concurrency, add retry logic, or add credits to restore service.
  </Accordion>

  <Accordion title="How can I lower AI costs quickly?">
    Start with high-volume workflows: use lighter models for simple tasks, remove unnecessary context, limit output length, and set request thresholds based on business value.
  </Accordion>
</AccordionGroup>


# Meowgic cloud
Source: https://docs.meowgic.ai/cloud/index

Meowgic Cloud is a full-stack cloud platform for building and running e-commerce apps, with built-in database, authentication, storage, edge functions, and AI capabilities — no infrastructure setup required.

Meowgic Cloud is a full-stack cloud platform built for AI-powered e-commerce app creation. From the storefront experience your users interact with to the backend services running behind the scenes, Meowgic handles every part of your application automatically.

Simply describe what you want in Meowgic, and it generates both the frontend and backend for your app — ready to run instantly in the Cloud. No server setup, infrastructure management, or complex deployment workflows required.

With built-in hosting, database, authentication, storage, edge functions, and AI capabilities, Meowgic Cloud provides scalable compute and storage that automatically grow with your app and business.

## Why choose Meowgic Cloud

* **Scales as you grow**: From your first e-commerce app to large-scale production workloads, Meowgic Cloud scales seamlessly with your business and traffic growth.
* **Secure by default**: Enterprise-grade authentication, secure cloud infrastructure, fine-grained access controls, and modern security best practices help protect your apps, customer data, and business operations.
* **Cost-effective**: Manage multiple apps and projects in one workspace with flexible usage-based pricing. Meowgic Cloud is designed for extremely low operating costs, helping you launch, test, and scale your apps without expensive infrastructure overhead.

## Enabling Meowgic Cloud

By default, our AI agent automatically detects whether your app requires Cloud features and will proactively prompt you to enable them when needed. You can also manually enable Meowgic Cloud anytime by going to **App → Cloud → Enable Meowgic Cloud**.

## Region selection

Meowgic Cloud projects can be hosted in three different regions:

* Americas
* Europe
* Asia Pacific

Choosing a region closer to your users results in:

* Lower latency
* Faster database responses
* Region-based data hosting
* Better overall backend performance

<Note>
  After Cloud is enabled, you cannot change the selected region, and you
  cannot move existing projects between regions.
</Note>

## Meowgic Cloud features

You can access the Cloud tab inside any Meowgic project by clicking the Cloud button next to Preview mode.

### Database

* **Generate schemas automatically**: describe the data your app needs in plain language, and Meowgic automatically creates the database tables and schema for you.
* **Manage without SQL**: view, edit, and organize records directly in the UI. Update values, inspect tables, and keep your app’s data in sync without writing queries.

### Storage

* **File handling without code**: upload, manage, and serve files such as product images, user uploads, documents, videos, and other static assets directly in Meowgic Cloud — no backend setup required.
* **Storage buckets**: files are securely stored in dedicated project buckets, with URLs and references ready to use in your app.
* **Limits**: Supports files up to 1 GB.

### AI

* **Built-in AI capabilities**: Meowgic Cloud comes with built-in AI features, allowing you to quickly create smarter, more interactive, and more engaging app experiences without additional setup.
* Some examples of AI powered features include:
  * **AI summaries** – automatically condense long text into clear takeaways
  * **AI chatbot or agent** – build conversational helpers into your app
  * **Sentiment detection** – understand user feedback at scale
  * **Image style tool** — Transform images into different artistic styles
* You can monitor Meowgic AI usage and performance for your project from the AI overview.

### Usage

The **Usage** tab provides a visual overview of how your app is consuming Meowgic Cloud resources over a selected time period, including compute, storage, database, AI usage, and other cloud services.

The time period defaults to **Last 7 days**. You can switch to **Last day** from the dropdown to adjust the period shown. Cloud usage updates daily at 10 AM CET.

Usage is broken down across **resource categories**, displayed as a segmented bar and listed individually with a percentage:

* **Database server**: used when your app queries or updates data. Scalable data services are coming soon.
* **Database storage**: the disk space used by your database to store your app’s data (like users, orders, and settings).
* **Compute**: used when your app’s code runs.
* **Storage**: used to store files like images, videos, and uploads.
* **Live updates**: used to send real-time updates to users (for example, notifications or chat).
* **Network**: used when your app sends or receives data over the internet.

## Usage-based Cloud and AI pricing

Meowgic includes Cloud hosting and built-in AI capabilities across all pricing plans, including the Free plan. Cloud services use a flexible usage-based pricing model, meaning costs scale based on your app’s actual resource usage and are billed separately from your subscription plan.

From your app, go to Settings → Usage. Here, you can:

* View your workspace balance status
* Top up and add funds to your workspace balance (available for paid plans only)
* Access your invoice history and manage payment preferences
* Track total Cloud and AI usage costs across your workspace
* View detailed Cloud and AI usage costs for each project

The Cloud & AI balance usage screen updates as follows:

* Cloud usage updates daily at 10 AM CET
* AI usage updates continuously

### Adding funds (paid plans only)

Adding funds to your workspace balance for Meowgic Cloud and AI usage is available exclusively on paid subscription plans.

Usage is billed separately and not included in your subscription.

* **Cloud usage**: depends on activity (number of users and interactions) and data transfer (uploads/downloads).
* **AI usage**: costs depend on the AI model selected and the complexity of the task. More advanced models typically consume more resources and result in higher usage costs. To verify pricing details, please refer to the official sources linked in the supported AI models section of Meowgic AI.

Workspace owners and admins on paid plans can top up balances either by doing a manual one-time top-up or by configuring automatic top-ups. <Badge>Coming soon</Badge>


# Subscription & Credits
Source: https://docs.meowgic.ai/getting-started/subscription-ai-credits

Meowgic is a subscription-based AI platform for building e-commerce apps. Users who subscribe to the Pro or Business plan receive credits, which are used for generating, editing, and refining e-commerce apps through AI conversations.

## Subscription plan

### Pro

| Monthly AI Credits | Paid Monthly | Paid Annually (Save 20%) |
| - | - | - |
| 200 | USD 20 | USD 192 |

### Business

| Monthly AI Credits | Paid Monthly | Paid Annually (Save 20%) |
| - | - | - |
| 400 | USD 40 | USD 384 |
| 800 | USD 80 | USD 768 |
| 1200 | USD 118 | USD 1,133 |
| 2000 | USD 195 | USD 1,872 |
| 3000 | USD 290 | USD 2,784 |
| 4000 | USD 385 | USD 3,696 |
| 5000 | USD 480 | USD 4,608 |
| 7500 | USD 720 | USD 6,912 |
| 10000 | USD 950 | USD 9,120 |

<Note>
  When upgrading your subscription plan, your current plan will be terminated and the new subscription plan will be created and activated immediately. Credits included with the new plan are issued instantly.

  For example, if you upgrade from a 100-credit plan to a 200-credit plan, you will immediately receive the 200 credits from the new plan. If you still have 100 unused credits remaining from your previous plan, your total available balance will become 300 credits.

  Credits do not expire and can continue to accumulate over time in Meowgic.
</Note>

## Credits

Credits are used to generate, modify, and refine e-commerce apps through AI conversations. After each task is completed, credits are dynamically calculated and deducted based on the task’s complexity.

More complex tasks typically consume more credits.

Scenarios that may consume credits include:

| Credit Consumption | Examples |
| - | - |
| Requirement Understanding | Understanding user requirements, breaking down tasks, and planning the application structure. |
| Component Generation | Generating e-commerce app components such as buttons, forms, modals, navigation menus, and product cards. |
| Code Modification | Modifying styles, logic, interactions, or API integrations. |
| Debugging & Fixes | Fixing errors, regenerating code, or adjusting application structures. |
| Preview Build | Generating a previewable version of the application. |
| Third-Party Calls | Calling external services or APIs. |

After a task is completed, credits are deducted based on the actual usage.

Credits are consumed in the following order: remaining credits first, then monthly credits, and finally yearly credits. This helps ensure tasks can be completed successfully while maximizing credit usage efficiency.

| Credit Type | Description |
| - | - |
| Trial Credits | Trial credits are valid during the 7-day trial period and will be automatically cleared after the trial ends. |
| Monthly Credits | Credits are issued immediately after a monthly subscription is activated. At the start of each new billing cycle, credits are reset and reissued based on the subscription plan. |
| Yearly Credits | The subscription fee is charged annually. After subscribing, the first month’s credits are issued immediately, and additional credits are issued monthly according to the billing cycle for a total of 12 months. |
| Remaining Credits | Unused credits from a previous billing cycle. After switching plans, remaining credits from the original cycle can continue to be used without expiration. |

## Faq

<AccordionGroup>
  <Accordion title="Is there a trial credit program?">
    Yes. After subscribing to the Business plan, trial credits are issued as a one-time bonus. You can use them within the 7-day validity period. Any unused trial credits will be automatically cleared after expiration.
  </Accordion>

  <Accordion title="Can I cancel my subscription during the trial period?">
    Yes. After cancellation, any remaining trial credits will be automatically cleared.
  </Accordion>

  <Accordion title="When are monthly credits issued?">
    Monthly credits are issued immediately after a monthly subscription is activated, and will continue to be issued monthly based on your billing cycle.
  </Accordion>

  <Accordion title="How are yearly credits issued?">
    Yearly credits are distributed monthly over a total of 12 months. After subscribing to the yearly plan, the first month’s credits are issued immediately, and the remaining credits are issued monthly according to the billing cycle.
  </Accordion>

  <Accordion title="Will my existing credits remain after switching plans?">
    Yes. Any previously issued remaining credits can continue to be used without expiration. You will also receive credits from your new subscription plan.
  </Accordion>

  <Accordion title="If I cancel a yearly subscription, will I still receive the remaining yearly credits?">
    Yes. Canceling a yearly subscription only disables automatic renewal for the next year and does not affect the current subscription period. During the active yearly subscription period, remaining yearly credits will continue to be issued monthly until all 12 distributions are completed.
  </Accordion>

  <Accordion title="What happens to my credits if I switch from a yearly plan to a monthly plan?">
    Your previous yearly subscription will end immediately, and the new monthly subscription will take effect right away. However, because the yearly plan still includes remaining scheduled monthly credit distributions, your account may continue receiving yearly credits during the monthly subscription period. If you also have an active monthly plan, you will receive both monthly credits and the remaining yearly credit distributions.
  </Accordion>

  <Accordion title="What is the difference between switching plans and canceling a subscription?">
    Canceling a subscription stops automatic renewal for the next billing cycle, while the current subscription remains active until the end of the cycle. Switching plans immediately ends the current subscription and activates the new plan right away.
  </Accordion>

  <Accordion title="What happens if I run out of credits?">
    You can upgrade to a higher-credit subscription plan. Once the new plan becomes active, the corresponding credits will be issued immediately.
  </Accordion>

  <Accordion title="Can I get a refund after subscribing?">
    No. Once a subscription is activated and credits are issued, subscription fees are non-refundable. You may cancel your subscription at any time to stop future renewals.
  </Accordion>

  <Accordion title="What happens if a task consumes more credits than my current balance?">
    The system will always complete and display the full task result before deducting the actual credits used. If your balance becomes negative after deduction, you will not be able to start new AI conversation tasks until new credits are issued. Future credits will automatically offset the negative balance first.
  </Accordion>
</AccordionGroup>


# Welcome to Meowgic
Source: https://docs.meowgic.ai/index

Work with an AI commerce team in Task, build apps for your store, and use ready-made Meowgic Tools for everyday e-commerce work.

Meowgic is a place to get e-commerce work moving. Bring a goal to your AI team, turn a store idea into an app, or open a ready-made tool for the job in front of you.

Planning a launch? Imagining a new storefront feature? Need to finish something today? Start here.

<ZoomableImage alt="Three ways to use Meowgic: work with an AI team in Task, turn ideas into apps, or open ready-to-use Tools." />

## Choose where to start

### Task: Work with your AI team

Want to understand how sales changed this week or map out a new product launch? Start a Task.

Tell Meowgic what you're trying to accomplish and share the details you have. Your AI team coordinates the work, and you can review what it produces.

<div>
  <ZoomableImage alt="A merchant shares a goal while the Meowgic AI team coordinates the work in Task." />
</div>

If the task needs real store data, connect a Shopify, SHOPLINE, or Shoplazza store first.

### Apps: Build the feature you have in mind

Want shoppers to personalize a product, or give a new product a showcase that feels like your brand?

Describe your idea, and Meowgic AI helps you build an app around it.

<div>
  <ZoomableImage alt="A Meowgic FAQ Section in preview, with publishing and store installation options visible." />
</div>

Preview your app before publishing it. Apps that appear on storefront pages also need to be installed in your store theme using the steps for your platform. Publishing alone does not put them in front of shoppers.

### Tools: Ready when you are

Need a new image, a design extracted from a print-on-demand mockup, or product copy translated for another market?

Meowgic makes ready-to-use Tools for e-commerce work. Pick one, use it, and move on to your next task.

<div>
  <a href="https://app.meowgic.ai/tools/ai-image-generator">
    <img alt="AI Image Generator cover showing different visual styles created from photos." />

    <span>AI Image Generator</span>
  </a>

  <a href="https://app.meowgic.ai/tools/pod-artwork-extractor">
    <img alt="POD Artwork Extractor cover showing a design separated from a product mockup." />

    <span>POD Artwork Extractor</span>
  </a>

  <a href="https://app.meowgic.ai/tools/localtone">
    <img alt="Text and Image Translator cover showing a product image translated for another market." />

    <span>Text & Image Translator</span>
  </a>

  <a href="https://app.meowgic.ai/tools/remove-background">
    <img alt="Background Remover cover showing a clean cutout from a photo." />

    <span>Background Remover</span>
  </a>

  <a href="https://app.meowgic.ai/tools/prompt-reverse">
    <img alt="Image to Prompt Generator cover showing an image turned into an editable prompt." />

    <span>Image to Prompt</span>
  </a>

  <a href="https://app.meowgic.ai/tools/face-cutout">
    <img alt="Face Cutout cover showing a face isolated for use in a design." />

    <span>Face Cutout</span>
  </a>
</div>

## A product launch, three ways to begin

Start with the part of the launch you're working on right now.

<div>
  <div>
    <div>
      <span>Task</span>
      <span>Map out the launch with your AI team.</span>
    </div>

    <img alt="A merchant shares a product launch goal with the Meowgic AI team, which organizes the work on a calendar." />
  </div>

  <div>
    <div>
      <span>Apps</span>
      <span>Build a product personalization feature.</span>
    </div>

    <img alt="A merchant and the Meowgic cat review a product page with customer-selectable color options." />
  </div>

  <div>
    <div>
      <span>Tools</span>
      <span>Create launch visuals with an AI image tool.</span>
    </div>

    <img alt="A merchant uses an image tool to make a promotional visual for a new cup." />
  </div>
</div>

Use one path on its own, or bring them together as your launch takes shape.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="How are Apps different from Tools?">
    With Apps, you describe a feature you want and Meowgic AI helps you create it. Tools are made by Meowgic and are ready to use.
  </Accordion>

  <Accordion title="Do I need to connect a store before starting a Task?">
    No. You can plan and work from the information you provide. Connect a store when the task needs real store data.
  </Accordion>

  <Accordion title="Does publishing an app add it to my storefront?">
    No. You can preview and publish an app first. To show a storefront feature to shoppers, follow the installation steps for your platform.
  </Accordion>
</AccordionGroup>

## Start with what needs doing

What's one thing you'd like to move forward today? Choose the way you want to begin.

<CardGroup>
  <Card title="Explore Task" icon="list-checks" href="/tips-tricks/how-to-use-task">
    See how your AI team works together on a goal.
  </Card>

  <Card title="Build an app" icon="blocks" href="/tips-tricks/create-app-let-it-work-on-your-store">
    Learn how to preview, publish, and install your app.
  </Card>

  <Card title="Browse Tools" icon="wrench" href="https://app.meowgic.ai/en/tools">
    Find a ready-made tool for your next job.
  </Card>
</CardGroup>


# Integrate Meowgic Apps with E-Commerce Platforms
Source: https://docs.meowgic.ai/integrations/introduction

After creating an e-commerce app with Meowgic, you can embed it into your store theme as a Section, Block, or other theme component. It works just like a native theme feature, giving you full control over its placement, configuration, appearance, and management.

<Columns>
  <Card title="Integrate with Shopify" href="/integrations/shopify" />

  <Card title="Integrate with SHOPLINE" href="/integrations/shopline" />

  <Card title="Integrate with Shoplazza" href="/integrations/shoplazza" />
</Columns>


# Integrate your Meowgic app with Shopify
Source: https://docs.meowgic.ai/integrations/shopify

Learn how to integrate your Meowgic app into a Shopify store and complete setup and configuration.

<Frame>
  <ZoomableImage alt="Integrate with Shopify" />
</Frame>

## Prepare your app

Open your app, click **Publish** in the upper-right corner, then select **Install to your store**.

<Columns>
  <Frame>
    <ZoomableImage alt="Integrate with Shopify" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Integrate with Shopify" />
  </Frame>
</Columns>

Choose **Shopify** as the target platform to start the integration flow.

<Frame>
  <ZoomableImage alt="Integrate with Shopify" />
</Frame>

## Start integration

You can integrate your app in two ways:

* Automatic integration: If your Meowgic account is already connected to your Shopify store, you can pick a target theme and let Meowgic handle installation and future updates automatically.
* Manual integration: Download your theme file from Shopify and upload it to Meowgic. Meowgic AI applies the integration, and you then download the updated theme file and upload it back to Shopify.

### Automatic integration (coming soon)

<Note>This feature is on the way. Stay tuned.</Note>

### Manual integration

On the integration page, you can view the current app version and target platform. You can also switch versions to review their integration history.

<Frame>
  <ZoomableImage alt="Integrate with Shopify" />
</Frame>

Go to your Shopify admin and download your store theme file.

<Frame>
  <ZoomableImage alt="Integrate with Shopify" />
</Frame>

Upload the theme file, then click **Start** to begin integration.

<Columns>
  <Frame>
    <ZoomableImage alt="Integrate with Shopify" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Integrate with Shopify" />
  </Frame>
</Columns>

Meowgic AI analyzes your theme file and embeds the app for you. When integration is complete, it generates an updated theme file. Click **Download theme file** to save it.

<Frame>
  <ZoomableImage alt="Integrate with Shopify" />
</Frame>

Return to Shopify and upload the updated theme file.

<Columns>
  <Frame>
    <ZoomableImage alt="Integrate with Shopify" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Integrate with Shopify" />
  </Frame>
</Columns>

After the upload finishes, click **Customize theme**, then locate the page template tied to the app you created.

<Columns>
  <Frame>
    <ZoomableImage alt="Integrate with Shopify" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Integrate with Shopify" />
  </Frame>
</Columns>

<Warning>
  When you create or edit an app, Meowgic AI uses both your conversation context and app details to decide the best placement in your theme. For example, if you asked to place a countdown app in the product info area, it will only appear in product page templates.
</Warning>

Once you open the app's template, the Meowgic app is already embedded by default. Select it to enable it and start configuration.

<Frame>
  <ZoomableImage alt="Integrate with Shopify" />
</Frame>

After setup, save the theme and publish it. Your Meowgic app is now integrated with your Shopify store.

Back on the Meowgic integration page, you can review all integration runs and related change records for the current app version.

<Frame>
  <ZoomableImage alt="Integrate with Shopify" />
</Frame>

## Tips

* If you run into issues while configuring your Meowgic app in Shopify, or want further adjustments, describe what you need directly on the integration page. Meowgic AI can apply the changes automatically. You usually only need to return to the app editor when the app's admin settings or core behavior changes significantly.
* If your app covers product-related scenarios, such as color options, product customization, or gift features, the system integrates based on the requirements you defined during app creation. After integration, you can keep refining behavior with Meowgic AI, such as attaching custom parameters on add-to-cart or adjusting cart styles and interactions.
* You can also use Meowgic AI to design your theme.
* Explore more features and use cases as your store evolves.


# Integrate your Meowgic app with Shoplazza
Source: https://docs.meowgic.ai/integrations/shoplazza

Learn how to integrate your Meowgic app into a Shoplazza store and complete setup and configuration.

<Frame>
  <ZoomableImage alt="Integrate a Meowgic app with Shoplazza" />
</Frame>

<div>
  <div>
    <img alt="Integrate with Shoplazza" />

    <div>
      <h3>Meowgic: Build Store Features with AI</h3>
      <p>Build the features your store actually needs using AI. Create Sections, Blocks, pages, tools, and lightweight apps, add them to your store theme, and update them anytime. No coding required.</p>
    </div>
  </div>

  <div>
    <a href="https://appstore.shoplazza.com/listing/meowgic/">
      <svg>
        <path />
      </svg>

      <div>
        <p>Find Meowgic on</p>
        <p>Shoplazza App Store</p>
      </div>
    </a>

    <a href="https://www.shoplazza.cn/pages/affiliate-register?ref=32052">
      <div>
        <p>Don't have a store yet?</p>
        <p>Create a Shoplazza store</p>
      </div>
    </a>
  </div>
</div>

## Prepare your app

Open your app, click **Publish** in the upper-right corner, and select **Install to your store**.

<Columns>
  <Frame>
    <ZoomableImage alt="Publish a Meowgic app" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Install a Meowgic app to your store" />
  </Frame>
</Columns>

Select **Shoplazza** as the target platform to begin the integration process.

<Frame>
  <ZoomableImage alt="Select Shoplazza as the integration platform" />
</Frame>

## Start integration

Meowgic supports two integration methods:

* **Automatic integration:** If your Meowgic account is connected to a Shoplazza store, you can select a target theme and let Meowgic automatically add the app and apply future updates.
* **Manual integration:** Download your theme file from Shoplazza and upload it to Meowgic. Meowgic AI will integrate the app into the theme automatically. Once complete, download the updated theme file and import it back into your Shoplazza store.

### Automatic integration (coming soon)

<Note>This feature is coming soon.</Note>

### Manual integration

On the integration page, you can view the current app version and target platform. You can also switch between versions to review their integration history.

<Frame>
  <ZoomableImage alt="View the app version and Shoplazza integration history" />
</Frame>

Open your Shoplazza admin and download your store theme file.

<Frame>
  <ZoomableImage alt="Download a theme file from Shoplazza" />
</Frame>

Upload the theme file to Meowgic. Once the upload is complete, click **Start** to begin the integration.

<Columns>
  <Frame>
    <ZoomableImage alt="Upload a Shoplazza theme file to Meowgic" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Start the Shoplazza theme integration" />
  </Frame>
</Columns>

Meowgic AI will analyze the theme files and embed your app in the appropriate location. Once the integration is complete, Meowgic will generate an updated theme package. Click **Download theme file** to save it.

<Frame>
  <ZoomableImage alt="Download the updated Shoplazza theme file" />
</Frame>

Return to your Shoplazza store and upload the updated theme file.

<Columns>
  <Frame>
    <ZoomableImage alt="Upload an updated theme to Shoplazza" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Import the updated Shoplazza theme" />
  </Frame>
</Columns>

After the theme file has been uploaded, click **Edit theme**, then open the page template associated with your app.

<Columns>
  <Frame>
    <ZoomableImage alt="Edit the uploaded Shoplazza theme" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Open the page template associated with the app" />
  </Frame>
</Columns>

<Warning>
  When you create or edit an app, Meowgic AI uses your conversation and app details to determine the most suitable location in the theme.

  For example, if you asked for a countdown timer to appear in the product information area, the app will only be available within product page templates.
</Warning>

After opening the relevant page template, the Meowgic app will already be embedded in the theme. Select the app to enable it and begin configuring its settings.

<Frame>
  <ZoomableImage alt="Enable and configure the Meowgic app in Shoplazza" />
</Frame>

Once the configuration is complete, save the theme and publish it to your live store. Your Meowgic app is now integrated with Shoplazza.

Return to the Meowgic integration page to view all integrations and modification records associated with the current app version.

<Frame>
  <ZoomableImage alt="View Shoplazza integration and modification history" />
</Frame>

## Tips

* If you encounter an issue while configuring the Meowgic app in your store, or need to make further adjustments, describe the issue or request directly to Meowgic AI from the integration page. Meowgic AI can update the integration for you. You only need to return to the main app editor when making major changes to the app's admin system or core functionality.
* If your app is related to products, such as color options, an online customizer, or gifting features, Meowgic will integrate it according to the requirements you provided while building the app. After the initial integration, you can continue asking Meowgic AI to add cart parameters, modify the cart design, or adjust its interaction logic.
* You can also use Meowgic AI to customize and redesign your store theme.
* Explore more features and integration possibilities as you continue building with Meowgic.


# Integrate your Meowgic app with SHOPLINE
Source: https://docs.meowgic.ai/integrations/shopline

Learn how to integrate your Meowgic app into a SHOPLINE store and complete setup and configuration.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

<div>
  <div>
    <img alt="Integrate with SHOPLINE" />

    <div>
      <h3>Meowgic: AI Store Builder</h3>
      <p>Create the exact features your store needs with AI. Build sections, blocks, pages, tools, and simple apps, then add them to your theme, customize anytime, and launch without coding.</p>
    </div>
  </div>

  <div>
    <a href="https://apps.shopline.com/detail/meowgic">
      <svg>
        <path />

        <path />
      </svg>

      <div>
        <p>Find Meowgic on</p>
        <p>SHOPLINE App Store</p>
      </div>
    </a>

    <a href="https://admin.myshopline.com/user/signUp?ref=9uq7l9ug&nozk=true">
      <div>
        <p>Don't have a store yet?</p>
        <p>Create a SHOPLINE store</p>
      </div>
    </a>
  </div>
</div>

## Prepare your app

Open your app, click **Publish** in the upper-right corner, then select **Install to your store**.

<Columns>
  <Frame>
    <ZoomableImage alt="Integrate with SHOPLINE" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Integrate with SHOPLINE" />
  </Frame>
</Columns>

Choose **SHOPLINE** as the target platform to start the integration flow.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

## Start integration

You can integrate your app in two ways:

* Automatic integration: If your Meowgic account is already connected to your SHOPLINE store, you can pick a target theme and let Meowgic handle installation and future updates automatically.
* Manual integration: Download your theme file from SHOPLINE and upload it to Meowgic. Meowgic AI applies the integration, and you then download the updated theme file and upload it back to SHOPLINE.

### Automatic integration

Choose a store that is already linked to your account.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

Select the theme you want to update in that store.

<Note>Right now, you can only edit draft themes. Direct updates to live themes are not supported.</Note>

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

After the integration finishes, click **Edit theme** to open the SHOPLINE theme editor directly.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

When you open the page template linked to this app, the Meowgic app is already embedded by default. Select it to enable it and start configuring.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

### Manual integration

On the integration page, you can view the current app version and target platform. You can also switch versions to review their integration history.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

Go to your SHOPLINE admin and download your store theme file.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

Upload the theme file, then click **Start** to begin integration.

<Columns>
  <Frame>
    <ZoomableImage alt="Integrate with SHOPLINE" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Integrate with SHOPLINE" />
  </Frame>
</Columns>

Meowgic AI analyzes your theme file and embeds the app for you. When integration is complete, it generates an updated theme file. Click **Download theme file** to save it.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

Return to SHOPLINE and upload the updated theme file.

<Columns>
  <Frame>
    <ZoomableImage alt="Integrate with SHOPLINE" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Integrate with SHOPLINE" />
  </Frame>
</Columns>

After the upload finishes, click **Edit theme**, then locate the page template tied to the app you created.

<Columns>
  <Frame>
    <ZoomableImage alt="Integrate with SHOPLINE" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Integrate with SHOPLINE" />
  </Frame>
</Columns>

<Warning>
  When you create or edit an app, Meowgic AI uses both your conversation context and app details to decide the best placement in your theme. For example, if you asked to place a countdown app in the product info area, it will only appear in product page templates.
</Warning>

Once you open the app's template, the Meowgic app is already embedded by default. Select it to enable it and start configuration.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

After setup, save the theme and publish it. Your Meowgic app is now integrated with your SHOPLINE store.

Back on the Meowgic integration page, you can review all integration runs and related change records for the current app version.

<Frame>
  <ZoomableImage alt="Integrate with SHOPLINE" />
</Frame>

## Tips

* If you run into issues while configuring your Meowgic app in SHOPLINE, or want further adjustments, describe what you need directly on the integration page. Meowgic AI can apply the changes automatically. You usually only need to return to the app editor when the app's admin settings or core behavior changes significantly.
* If your app covers product-related scenarios, such as color options, product customization, or gift features, the system integrates based on the requirements you defined during app creation. After integration, you can keep refining behavior with Meowgic AI, such as attaching custom parameters on add-to-cart or adjusting cart styles and interactions.
* You can also use Meowgic AI to design your theme.
* Explore more features and use cases as your store evolves.


# Best practices
Source: https://docs.meowgic.ai/tips-tricks/best-practices

Learn how to use screenshots, reference product links, and visual editing to build apps more accurately and avoid common mistakes.

## Create apps with images

Upload images to the chat, replace images through Visual Editing, or add images using external URLs. This helps make your app UI closer to the reference screenshots and gives the UI a more concrete, visual direction.

**Upload the image to the prompt chat**

<Columns>
  <Frame>
    <ZoomableImage alt="Create apps with images" />
  </Frame>

  <Frame>
    <ZoomableImage alt="Create apps with images" />
  </Frame>
</Columns>

**Using an external image URL**

One way to add images to your project is by referencing an image from an external URL. This method allows you to use images hosted on external platforms like Unsplash, Imgur, or any other image-hosting service. Be mindful of use copyrights!

## Create apps with link

Add your reference links to help the Agent understand your purpose and the final result you want to achieve.


# How to create, publish, and install a Meowgic app in your store
Source: https://docs.meowgic.ai/tips-tricks/create-app-let-it-work-on-your-store

This tutorial walks you through creating an app in Meowgic, confirming requirements, previewing the app, configuring publish settings, uploading and integrating theme files, and finally installing the generated app in a Shopify, SHOPLINE, or Shoplazza store.

<Note>
  This tutorial uses a customizable FAQ section as the example. It does not cover app generation tips or adjustment methods.
</Note>

## Completion path

<CardGroup>
  <Card title="Create the app" icon="square-pen">
    Enter your idea and let Meowgic build the first version.
  </Card>

  <Card title="Publish the app" icon="rocket">
    Publish your own app.
  </Card>

  <Card title="Integrate it into your store" icon="upload">
    Upload the theme and complete installation.
  </Card>
</CardGroup>

# 1. Create the app

First, go to the [Meowgic homepage](https://app.meowgic.ai/en).

<Frame>
  <ZoomableImage alt="Meowgic homepage with the app prompt box and suggested app templates." />
</Frame>

<br />

Enter the app you want to create in the **Meowgic prompt box**, just like writing a prompt for an AI image generator.

<Frame>
  <ZoomableImage alt="User enters an app idea in the Meowgic homepage prompt box." />
</Frame>

<br />

For example: create a customizable FAQ section.

<Frame>
  <ZoomableImage alt="Screenshot of the Custom FAQ Section editor with the Publish panel open, highlighting the publish URL and Publish button." />
</Frame>

<br />

After you finish entering the prompt and press Enter, Meowgic will analyze your requirements and ask follow-up questions. Choose or answer based on what you have in mind.

<Frame>
  <ZoomableImage alt="Meowgic asks how FAQ content should be managed, with theme editor blocks selected." />
</Frame>

<br />

After the requirements plan is complete, Meowgic will generate a design checklist for you to confirm.

<Frame>
  <ZoomableImage alt="Meowgic shows the planned FAQ section design and the Approved, Start building option." />
</Frame>

<br />

After you confirm, Meowgic will list the to-do items and start building your app.

<Frame>
  <ZoomableImage alt="Meowgic displays a build to-do list while generating the FAQ section app." />
</Frame>

<br />

When the build is complete, Meowgic will send you a message in the chat, and the app will appear in the preview area.

<Frame>
  <ZoomableImage alt="Completed FAQ section preview with a two-column question grid and a contact button." />
</Frame>

<br />

For the first app build, **Preview V1** appears in the left-side generation result panel.

Each build creates a new version, such as V2, V3, V4, and so on.

<Frame>
  <ZoomableImage alt="Meowgic preview panel showing the completed FAQ section as the current V1 version." />
</Frame>

<br />

Use **App Settings** in the upper-right preview toolbar to edit the app, just like editing a theme template. You can also use the same toolbar to switch between desktop, mobile, and full-screen previews.

<Frame>
  <ZoomableImage alt="Top-right preview controls for app settings, desktop view, mobile view, and full screen." />
</Frame>

<Frame>
  <ZoomableImage alt="App settings sidebar for editing FAQ items, heading text, colors, and contact prompt settings." />
</Frame>

<br />

# 2. Publish the app

After you finish testing the app, click **Publish** in the upper-right corner to publish it.

<Frame>
  <ZoomableImage alt="Publish button in the top-right corner of the Meowgic preview workspace." />
</Frame>

<Frame>
  <ZoomableImage alt="Publish dialog with fields for the app icon, title, and optional description." />
</Frame>

<br />

1. Enter the app name.

2. Enter the app description. If you leave it blank, AI will generate one automatically.

After filling in the fields, click **Continue** at the bottom of the publish dialog.

<Frame>
  <ZoomableImage alt="Publish form for entering the app name and optional description before continuing." />
</Frame>

<br />

1. Meowgic will automatically generate an app link for you. You can open this link in a browser to preview the app, and you can also customize the link prefix.

2. After you click the publish button, this app version will be officially published.

<Frame>
  <ZoomableImage alt="Publish dialog showing the generated app URL and the final Publish button." />
</Frame>

<br />

After the app is published, you can choose how to install it.

If your store is built on Shopify, SHOPLINE, or Shoplazza, choose the matching platform option in the published app panel to start the integration process.

Self-hosted site users can copy the app link and embed it into their own site.

<Frame>
  <ZoomableImage alt="Published app panel with the app link and store installation options." />
</Frame>

<Tip>
  If you only want to quickly check the result, open the app link first. When you are ready to install it in your store, continue with the theme integration.
</Tip>

<Note>
  If you update or modify the app after publishing it, publish it again. Otherwise, the integration or preview link will not use the latest version.
</Note>

<br />

# 3. Integrate your app into your store

After entering the integration page, first download the theme template you are currently using, then upload it to Meowgic.

<Warning>
  When downloading the theme template, choose the theme your store is currently using. Uploading the wrong theme file may make the integration result inconsistent with your live store.
</Warning>

Choose your store platform to find the download location:

<Tabs>
  <Tab title="Shopify">
    Shopify theme template download location:

    <Frame>
      <ZoomableImage alt="Shopify Online Store themes page with the theme actions menu open to Download theme file." />
    </Frame>
  </Tab>

  <Tab title="SHOPLINE">
    SHOPLINE theme template download location:

    <Frame>
      <ZoomableImage alt="SHOPLINE theme page with the theme menu open to Download code." />
    </Frame>
  </Tab>

  <Tab title="Shoplazza">
    Shoplazza theme template download location:

    <Frame>
      <ZoomableImage alt="Shoplazza Themes page with the theme menu open to Download theme file." />
    </Frame>
  </Tab>
</Tabs>

<br />

After the download is complete, click **Add file**, or drag and drop the theme file ZIP package directly into the upload area.

<Frame>
  <ZoomableImage alt="Meowgic integration page showing a theme ZIP file being added by Add file or drag and drop." />
</Frame>

<br />

After the theme ZIP is added, click **Upload file** next to the selected file.

<Frame>
  <ZoomableImage alt="Selected Shopify theme ZIP on the Meowgic integration page, ready for Upload file." />
</Frame>

<br />

After the upload is complete, click **Start** next to the uploaded theme file to begin the integration.

<Frame>
  <ZoomableImage alt="Uploaded Shopify theme ZIP listed in Meowgic with the Start button ready to begin integration." />
</Frame>

<br />

After you click **Start**, Meowgic will automatically begin the integration based on your theme template file.

<Frame>
  <ZoomableImage alt="Meowgic starts processing the uploaded theme file after the Start action." />
</Frame>

<Frame>
  <ZoomableImage alt="Meowgic integration workspace showing the automatic theme integration to-do list." />
</Frame>

<br />

After the integration is complete, Meowgic generates a new theme template file. Click **Download theme file** to download it.

<Frame>
  <ZoomableImage alt="Meowgic reports the FAQ section was integrated and offers Download theme file." />
</Frame>

<br />

Return to the theme template editing page in your site admin, then upload the new theme file.

<Frame>
  <ZoomableImage alt="Shopify Online Store themes page with the Import menu open to Upload zip file." />
</Frame>

<Frame>
  <ZoomableImage alt="Shopify Upload theme dialog with the Meowgic-generated theme ZIP ready to upload." />
</Frame>

<br />

After the upload is complete, open the theme editor. The generated app appears in the theme editor's section list.

<Frame>
  <ZoomableImage alt="Shopify theme editor with Custom FAQ Section selected on the home page." />
</Frame>

<Note>
  If the app does not work properly after integration, or if it does not look like the preview in Meowgic, describe the issue in the integration page chat and ask Meowgic to fix it.

  <Frame>
    <ZoomableImage alt="Meowgic integration chat where users can describe issues for Meowgic to fix after installation." />
  </Frame>
</Note>

<br />

## FAQ

<AccordionGroup>
  <Accordion title="Do I need to publish the app again after editing it?">
    Yes. If you update the app after publishing, publish it again so the preview link and integration use the latest version.
  </Accordion>

  <Accordion title="Can I install the same Meowgic app on Shopify, SHOPLINE, and Shoplazza?">
    Yes, but each platform requires you to download and upload its own theme file.
  </Accordion>
</AccordionGroup>

<br />

## Related reading

<Columns>
  <Card title="Use Task" icon="list-check" href="/tips-tricks/how-to-use-task">
    Learn how to use Meowgic Task to put an AI e-commerce team to work.
  </Card>

  <Card title="Create and install an app" icon="wand-sparkles" href="/tips-tricks/create-app-let-it-work-on-your-store">
    Learn how to create, publish, and install a Meowgic app in your store.
  </Card>

  <Card title="Build a product customization order flow" icon="shopping-cart" href="/tips-tricks/how-product-customization-orders-work">
    Learn how customization details move from the product page to the cart and order.
  </Card>

  <Card title="Submit an app to the App Store" icon="rocket" href="/tips-tricks/how-to-submit-your-app-to-the-meowgic-app-store">
    Learn how to prepare and submit an app to the Meowgic App Store.
  </Card>
</Columns>

<br />

<Update label="07/06/2026">
  ## Article created

  Created this article.
</Update>


# How to build a product customization order workflow with Meowgic
Source: https://docs.meowgic.ai/tips-tricks/how-product-customization-orders-work

Build a no-code product customization order workflow with Meowgic, link customer data to carts and orders, and retrieve it in your app admin.

A complete product customization experience requires both customer-facing customization options and a reliable order workflow.

<Frame>
  <ZoomableImage alt="Product customization iceberg model: input fields, live preview, image upload, and the customization button appear above the surface, while data storage, customization ID generation, product linking, cart and order integration, and admin lookup form the order workflow below." />
</Frame>

<Note>
  This guide focuses on building the product customization order workflow. It does not cover which customization inputs you should collect.

  We recommend starting with a customization button, a modal, and a separate product template.

  This setup has the least impact on other parts of your store, minimizes the work required from merchants, and helps customers stay focused on customization.
</Note>

## Product customization order workflow overview

<CardGroup>
  <Card title="Describe the order workflow" icon="list-check">
    Tell Meowgic how to save customization data, generate a customization ID, add the product to the cart, and carry the ID through to the order.
  </Card>

  <Card title="Configure customizable products" icon="store">
    Create a separate product template, hide the original purchase buttons, and confirm that other products are not affected.
  </Card>

  <Card title="Test and look up orders" icon="clipboard-check">
    Complete a test order and confirm that you can use the customization ID to retrieve the customer's data in the app admin.
  </Card>
</CardGroup>

## 1. Describe the product customization order workflow in Meowgic

When creating your app, add the following order workflow requirements to the feature description:

<Frame>
  <ZoomableImage alt="Entering product customization order workflow requirements in Meowgic, including saving customization data, generating a customization ID, and linking it to the cart and order." />
</Frame>

```text theme={null}
Create a product customization Block and place it in the purchase area of the product page.

The Block displays a “Custom Now” button. When a customer clicks it, open the customization modal.

Enable an admin area for the app and save the complete customization data submitted by the customer.

After the customer completes the customization, save the data first, then generate a unique customization ID.

Write the customization ID to the product as a line item property, then add the product to the cart.

Make sure the ID appears in both the cart and the order.

Provide an ID lookup feature in the app admin so merchants can view the complete customization data submitted by the customer.

If saving the data fails, do not add the product to the cart.
```

## 2. Configure a separate product template for customizable products

We recommend using a separate product template for customizable products.

<Note>
  The steps below use Shopify as an example. Other ecommerce platforms may use different menu locations and interface labels, but the configuration principles are the same.
</Note>

<br />

In the Shopify theme editor, create a dedicated template for customizable products based on the default product template.

<Frame>
  <ZoomableImage alt="Selecting Create template from the product template menu in the Shopify theme editor to create a separate template for customizable products." />
</Frame>

<br />

Enter a template name, then click **Create template**.

<Frame>
  <ZoomableImage alt="Entering Custom Pillow in the Shopify Create a template dialog and clicking Create template." />
</Frame>

<br />

Find the **Buy buttons** block and click the visibility icon on the right.

<Frame>
  <ZoomableImage alt="Locating the Buy buttons block in the customizable product template and clicking the visibility icon to hide the native purchase buttons." />
</Frame>

<br />

Confirm that **Buy buttons** is hidden and that only **Custom Now** remains on the product page.

<Frame>
  <ZoomableImage alt="The Buy buttons block is hidden in the Shopify theme editor, leaving only the Custom Now button on the customizable product page." />
</Frame>

<br />

Check whether other product templates contain the product customization Block. If they do, hide it so it does not affect regular products.

<Frame>
  <ZoomableImage alt="Checking the default product template for the Pillow Customizer block to prevent the customization entry from appearing on regular products." />
</Frame>

<br />

Go to the Shopify product editor and find the **Theme template** setting.

<Frame>
  <ZoomableImage alt="Locating the Theme template setting on the Shopify product editing page, where the product currently uses the Default product template." />
</Frame>

<br />

Select **custom-pillow**, then click **Save**.

<Frame>
  <ZoomableImage alt="Assigning the custom-pillow theme template to the customizable product and clicking Save." />
</Frame>

<br />

Open your storefront and check the purchase buttons on both the customizable product and other products.

After you hide the original purchase buttons, customers must complete the customization before purchasing and cannot bypass the workflow.

<br />

Check the customizable product.

<Frame>
  <ZoomableImage alt="The customizable product page displays only the Custom Now button, with the native Add to cart and Buy it now buttons hidden." />
</Frame>

<br />

Check another product.

<Frame>
  <ZoomableImage alt="A regular gift bag product page displays the quantity selector, Add to cart, and Buy it now buttons without a Custom Now button, showing that it is unaffected by the customizable product template." />
</Frame>

> If your theme includes quick-add or sticky purchase buttons, check whether customers can use them to bypass customization.

## 3. What does the customization ID do?

A customization ID works like a claim ticket:

* The complete customization data stays in the app admin.
* The cart and order store only the customization ID.
* The merchant uses the ID from the order to retrieve the complete data.

A Shopify `line item property` is an extra piece of information attached to an item in the order.

<Frame>
  <ZoomableImage alt="A customization ID works like a claim ticket: full customization details stay in the app, the cart and order store only the ID, and the merchant uses the customization ID from the order to retrieve the complete details." />
</Frame>

The complete customization data flow is:

**Customer completes customization → App saves the data → App generates a customization ID → ID appears in the cart and order → Merchant uses the ID to retrieve the data**

## 4. How to test a product customization order

Before publishing, complete an entire order as a real customer would.

### 1. Check the customizable product buttons

Open the customizable product page. Confirm that it displays only **Custom Now** and that the native **Add to cart** and **Buy it now** buttons are hidden.

<Frame>
  <ZoomableImage alt="The customizable product page displays only the Custom Now button, with the native Add to cart and Buy it now buttons hidden." />
</Frame>

<br />

### 2. Upload a test image

Click **Custom Now** and upload a test image that represents a realistic customer request.

<Frame>
  <ZoomableImage alt="After the customer clicks Custom Now, the image upload dialog lets them upload a JPG, PNG, or WebP image and choose Remove background or Face cutout." />
</Frame>

<br />

### 3. Adjust the crop and processing method

Drag the crop frame to select the part of the image you want to keep. Choose **Remove background** or **Face cutout** based on the product, then click **Confirm & continue**.

<Frame>
  <ZoomableImage alt="After uploading a cat photo, the customer adjusts the crop frame, selects Remove background, and clicks Confirm and continue." />
</Frame>

<br />

### 4. Adjust the preview and add the product to the cart

After the preview loads, adjust the outline width and color, then click **Confirm & add to cart**.

<Frame>
  <ZoomableImage alt="The custom pillow preview shows the cat with its background removed, along with controls for outline width and color and a Confirm and add to cart button." />
</Frame>

<br />

Wait for the system to save the design. Do not close the page or click the button again until saving is complete.

<Frame>
  <ZoomableImage alt="The custom pillow preview is saving the design, with the button showing a Saving your design status." />
</Frame>

<br />

### 5. Confirm the customization ID in the cart and order

Once the design is saved, a dialog displays the customization ID and confirms that the product has been added to the cart.

<Frame>
  <ZoomableImage alt="After customization is complete, a success dialog displays the customization ID PC-79HMCYR2 and confirms that the product was added to the cart." />
</Frame>

<br />

Open the cart and confirm that the same customization ID appears below the product.

<Frame>
  <ZoomableImage alt="The customized pillow in the shopping cart displays the customization ID PC-79HMCYR2." />
</Frame>

<br />

After checkout, check the customization ID on the order confirmation page.

<Frame>
  <ZoomableImage alt="The customized product on the order confirmation page displays the same customization ID, PC-79HMCYR2, as the shopping cart." />
</Frame>

<br />

Open the corresponding order in the Shopify admin and confirm that the same ID appears below the product.

<Frame>
  <ZoomableImage alt="The Shopify order details page displays the customization ID PC-79HMCYR2 beneath the customized product." />
</Frame>

<br />

### 6. Look up the complete customization data by ID

Enter the customization ID from the order in the Meowgic app admin, then search for it.

<Frame>
  <ZoomableImage alt="Entering the customization ID PC-79HMCYR2 in the Meowgic app admin to find the corresponding customer customization record." />
</Frame>

<br />

Open the result and confirm that you can view the complete customization data submitted by the customer.

<Frame>
  <ZoomableImage alt="The Meowgic app admin displays the complete data for customization ID PC-79HMCYR2, including the original image, background-removed image, and trimmed result." />
</Frame>

<br />

### 7. Check the purchase flow for other products

Finally, open a product that does not use the customizable product template. Confirm that its original purchase buttons and order flow still work normally.

If every check passes, your product customization order workflow is ready.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="What steps are included in a Meowgic product customization order workflow?">
    The complete workflow includes collecting the customer's customization content, saving the data in the app admin, generating a unique customization ID, linking the ID to the product, adding the product to the cart and order, and using the ID to retrieve the complete data.
  </Accordion>

  <Accordion title="Why do you recommend a customization button, a modal, and a separate product template?">
    This setup has the least impact on other parts of the store, reduces the work required to configure and maintain the experience, and helps customers stay focused on completing their customization without bypassing the workflow.
  </Accordion>

  <Accordion title="Why do I need to hide Shopify's original purchase buttons?">
    If the native **Add to cart** or **Buy it now** buttons remain visible, customers may bypass the customization workflow and place an order without the required customization data.
  </Accordion>

  <Accordion title="What does the customization ID do?">
    The customization ID is the unique link between the customer's customization data and the Shopify order. The complete data stays in the Meowgic app admin, while the cart and order store only the ID. Merchants use the ID to retrieve what the customer submitted.
  </Accordion>

  <Accordion title="Is the customer's complete customization data saved in the Shopify order?">
    With the approach described in this guide, the complete customization data is not written directly to the Shopify order. The cart and order store only the customization ID, while images, text, previews, and other details stay in the Meowgic app admin.
  </Accordion>

  <Accordion title="Will product customization affect regular products in my store?">
    Using a separate product template and assigning it only to customizable products limits the changes to those products. Regular products can continue using their original purchase flow.
  </Accordion>

  <Accordion title="Do I also need to hide quick-add and sticky purchase buttons?">
    Check them. If customers can use these buttons to bypass **Custom Now** and add a customizable product directly to the cart, hide or disable them on customizable product pages.
  </Accordion>

  <Accordion title="Can the product be added to the cart if saving the customization data fails?">
    No. With the workflow described in this guide, the app must not add the product to the cart when saving fails. This prevents orders whose complete customization data cannot be retrieved.
  </Accordion>

  <Accordion title="What should I test before publishing a product customization feature?">
    Complete a realistic order as a customer. Confirm that only customizable products display **Custom Now**, regular products still work normally, the app generates a customization ID, the cart and order display the same ID, and you can use that ID to retrieve the complete data in the Meowgic app admin.
  </Accordion>
</AccordionGroup>

<br />

## Related reading

<Columns>
  <Card title="Use Task" icon="list-check" href="/tips-tricks/how-to-use-task">
    Learn how to use Meowgic Task to put an AI e-commerce team to work.
  </Card>

  <Card title="Create and install an app" icon="wand-sparkles" href="/tips-tricks/create-app-let-it-work-on-your-store">
    Learn how to create, publish, and install a Meowgic app in your store.
  </Card>

  <Card title="Build a product customization order flow" icon="shopping-cart" href="/tips-tricks/how-product-customization-orders-work">
    Learn how customization details move from the product page to the cart and order.
  </Card>

  <Card title="Submit an app to the App Store" icon="rocket" href="/tips-tricks/how-to-submit-your-app-to-the-meowgic-app-store">
    Learn how to prepare and submit an app to the Meowgic App Store.
  </Card>
</Columns>

<br />

<Update label="08/04/2026">
  ## Article created

  Created this article.
</Update>


# How to submit your app to the Meowgic App Store
Source: https://docs.meowgic.ai/tips-tricks/how-to-submit-your-app-to-the-meowgic-app-store

Learn how to configure preset data, complete your App Store listing, submit your Meowgic app for review, and manage its review status.

<Note>
  This guide explains the app submission process. It does not cover review criteria or tips for passing review.
</Note>

## Process overview

<CardGroup>
  <Card title="Configure preset data" icon="sliders-horizontal">
    Set up preset data for your app.
  </Card>

  <Card title="Submit your app" icon="file-up">
    Complete your app information and submit it for review.
  </Card>

  <Card title="Check review status" icon="hourglass">
    Track the status and result of your app review.
  </Card>
</CardGroup>

<br />

## 1. Configure preset data

After you publish your app, click **Submit your app**.

<Frame>
  <ZoomableImage alt="The published app sidebar with the Submit your app option highlighted." />
</Frame>

<br />

Meowgic asks whether you want to provide preset data.

If your app does not have an Admin area, click **Keep data empty**.

If your app has an Admin area and you want to include initial data, click **Provide preset data**.

<Info>
  **Preset data (Provide preset data)** is the initial data included with your app for other Meowgic users. When users get your app from the Meowgic App Store, they receive this data with it.
</Info>

<Frame>
  <ZoomableImage alt="A dialog asking whether the app provides preset data, with Keep data empty and Provide preset data buttons." />
</Frame>

<br />

After you click **Provide preset data**, choose how to provide it. Select one of the following options, or use a custom option to describe which data you can provide:

* **Auto-filter safe preset data**: Meowgic uses AI to review your current app data and selects only data that is safe to display publicly as preset data.
* **Use all current data**: Use all of your app's current data as preset data.
* **Do not provide preset data**: Do not provide any preset data for your app.
* **Other**: Add your own instructions to specify which data can be used as preset data.

<Frame>
  <ZoomableImage alt="The preset data options: Auto-filter safe preset data, Use all current data, Do not provide preset data, and Other." />
</Frame>

<br />

Meowgic saves preset data based on your selection. Continue after you see a success message.

<Frame>
  <ZoomableImage alt="The Meowgic chat panel shows Auto-filter safe preset data selected and preset data processing in progress." />
</Frame>

<br />

## 2. Submit your app for review

After you configure preset data, click the app name in the upper-left corner to open its menu, then select **Submit your app**.

<Frame>
  <ZoomableImage alt="The app name menu button in the upper-left corner of the Meowgic editor." />
</Frame>

<Frame>
  <ZoomableImage alt="The Submit your app option in the app name menu." />
</Frame>

<br />

In the **Submit your app** window, complete the basic app information, App Store listing content, demo URL, pricing details, and contact information.

<Frame>
  <ZoomableImage alt="The Basic app information section of the Submit your app form, with app name, app icon, and category fields." />
</Frame>

<br />

When you finish, click **Submit** in the lower-right corner.

<Frame>
  <ZoomableImage alt="The Submit button in the lower-right corner of the completed Submit your app form." />
</Frame>

In the confirmation dialog, click **Submit** again to send your app for review.

<Frame>
  <ZoomableImage alt="The confirmation dialog for submitting the app, with Later and Submit buttons." />
</Frame>

<br />

## 3. Check review status

After you submit your app, its status changes to **Pending Review** and the Meowgic team starts reviewing it. At this stage, click **Withdraw** to cancel the submission.

<Frame>
  <ZoomableImage alt="The app submission list with the status set to Pending Review and a Withdraw button." />
</Frame>

<br />

When the status is **In Review**, the Meowgic team is reviewing your app.

<Frame>
  <ZoomableImage alt="The app submission list with the status set to In Review." />
</Frame>

<br />

After approval, the status changes to **Live**. Click **App detail** to view your app's listing in the Meowgic App Store.

To remove a live app, click **Remove**.

<Frame>
  <ZoomableImage alt="The approved app submission with the status set to Live and App detail and Remove buttons." />
</Frame>

<br />

If your app does not pass review, do not worry. Click **View reason** to see Meowgic's feedback. Make the requested updates, then submit your app for review again.

<Frame>
  <ZoomableImage alt="The rejected app submission with a View reason button." />
</Frame>

<Frame>
  <ZoomableImage alt="The rejection-reason dialog for an app that did not pass review." />
</Frame>

<br />

Ready to get started? Turn your idea into an app that more users can discover.

<br />

## Frequently asked questions

<AccordionGroup>
  <Accordion title="What is preset data?">
    Preset data is the initial data included with your app for other Meowgic users. When users get your app from the Meowgic App Store, they receive this data with it.
  </Accordion>

  <Accordion title="Does my app need preset data if it has no Admin area?">
    No. When you submit your app, click **Keep data empty**.
  </Accordion>

  <Accordion title="How should I choose a preset data option?">
    We recommend **Auto-filter safe preset data** in most cases. Meowgic uses AI to select data that is safe to display publicly. Choose **Use all current data** only if all of your current data can be shared. Choose **Other** if you have specific requirements.
  </Accordion>

  <Accordion title="What information do I need to submit?">
    Complete the basic app information, App Store listing content, demo URL, pricing details, and contact information. This includes your app name, icon, category, introduction, details, features, video URL, screenshots, support email, and app submission email.
  </Accordion>

  <Accordion title="Can I withdraw a submission?">
    Yes. When the status is **Pending Review**, click **Withdraw** to cancel the submission.
  </Accordion>

  <Accordion title="What should I do if my app does not pass review?">
    Click **View reason** to see Meowgic's feedback. Make the requested updates, then submit your app for review again.
  </Accordion>

  <Accordion title="How can I preview an approved app listing?">
    When the status changes to **Live**, click **App detail** to view its listing in the Meowgic App Store.
  </Accordion>
</AccordionGroup>

<br />

## Related reading

<Columns>
  <Card title="Use Task" icon="list-check" href="/tips-tricks/how-to-use-task">
    Learn how to use Meowgic Task to put an AI e-commerce team to work.
  </Card>

  <Card title="Create and install an app" icon="wand-sparkles" href="/tips-tricks/create-app-let-it-work-on-your-store">
    Learn how to create, publish, and install a Meowgic app in your store.
  </Card>

  <Card title="Build a product customization order flow" icon="shopping-cart" href="/tips-tricks/how-product-customization-orders-work">
    Learn how customization details move from the product page to the cart and order.
  </Card>

  <Card title="Submit an app to the App Store" icon="rocket" href="/tips-tricks/how-to-submit-your-app-to-the-meowgic-app-store">
    Learn how to prepare and submit an app to the Meowgic App Store.
  </Card>
</Columns>


# How to use Meowgic Task for e-commerce operations
Source: https://docs.meowgic.ai/tips-tricks/how-to-use-task

Use Meowgic Task to put an AI e-commerce team to work on campaign planning, store data analysis, inventory updates, and more.

## What is Meowgic Task?

Meowgic Task gives you an AI e-commerce team that can take on everyday operations and focused projects.

You can use Task to:

* Build a product launch plan
* Prepare a seasonal marketing campaign
* Review today's orders and summarize sales performance
* Update inventory for a list of SKUs
* Audit a product page and prioritize improvements
* Review your current theme and recommend specific changes
* Find growth opportunities in your store data

Tell Task what outcome you need. The Team leader will fill in any missing details and bring in the right specialists to complete the work.

<Frame>
  <ZoomableImage alt="A merchant describes an e-commerce project in Meowgic Task, and the Team leader coordinates the AI specialists needed to complete it." />
</Frame>

## Meet your AI Team

<Frame>
  <ZoomableImage alt="The Meowgic AI Team: Ethan coordinates the team, Olivia handles store operations, Daniel develops apps, Noah works on storefront development, Ava handles visual design, and Maya focuses on growth and analytics." />
</Frame>

Ethan coordinates the AI Team. Olivia, Daniel, Noah, Ava, and Maya specialize in store operations, app development, storefront development, visual design, and growth analytics.

## How Task works

<Steps>
  <Step title="Describe the work">
    Select **New task** in the Meowgic sidebar, then explain what you want to accomplish and what a useful result should include.
  </Step>

  <Step title="Answer follow-up questions">
    If important information is missing, the Team leader will ask for it. For example, if you have connected more than one store, you will need to choose the store for this Task.
  </Step>

  <Step title="Let the Team leader assign specialists">
    The Team leader decides which specialists are needed and assigns the work. You can see who is involved and what each team member is working on inside the Task.
  </Step>

  <Step title="Review the result">
    Once the specialists finish their work, the Team leader brings the results together. If the next action would change store data, Task will show you the proposed changes first.
  </Step>

  <Step title="Approve store changes">
    You can approve the changes, request revisions, or stop the action. Task will not change store data without your confirmation.
  </Step>
</Steps>

<Frame>
  <ZoomableImage alt="The Team leader assigns work to different specialists and shows what each specialist is doing in Meowgic Task." />
</Frame>

## How to write a clear Task request

To help Task produce a useful result, include these four types of information:

| Information | What to include |
| :- | :- |
| **Goal** | What do you want Task to accomplish? |
| **Context** | What should Task know about the business, product, market, or campaign? |
| **Boundaries** | What may Task work on, and what must remain unchanged? |
| **Expected result** | What should Task deliver, and how will you know the work is complete? |

A vague request:

```text theme={null}
Analyze today's traffic.
```

A clearer request:

```text theme={null}
Analyze today's traffic for my store and tell me:

1. Which channel drove the most visits?
2. If ad attribution data is available, which ad ID drove the most traffic, and which product did it promote?
3. Based only on the available data, list the likely reasons customers did not complete checkout. Include the evidence and uncertainty behind each reason.

End with the one issue I should prioritize today and the next action you recommend. Read and analyze only. Do not change any store data.
```

The second request defines the time period, the questions to answer, what Task is allowed to do, and the result you want.

## When does Task need store data?

Use one simple rule: if the work requires Task to read or change information in a real store, select a connected store.

<CardGroup>
  <Card title="No store data needed" icon="message-square-text">
    Start immediately when Task can work from the information you provide, such as planning a campaign, organizing ideas, or reviewing pasted materials.
  </Card>

  <Card title="Store data needed" icon="store">
    Select a connected store when Task needs to review orders, products, inventory, traffic, or the current theme.
  </Card>
</CardGroup>

<Tip>
  You can use Task without connecting a store, but we strongly recommend connecting one to get the most from your AI Team.

  Even for a product launch plan, working from current store data produces a more relevant plan than working from assumptions alone.
</Tip>

<Note>
  You only need to connect a store once. After that, you can select it in future Tasks without authorizing it again each time.
</Note>

<Frame>
  <ZoomableImage alt="Comparison of the work Meowgic Task can complete with and without access to a connected store." />
</Frame>

If your store is not connected yet, follow the guide for your platform:

<CardGroup>
  <a href="/integrations/shopify">
    <span />

    <span>
      <span>Connection guide</span>
      <span>Shopify</span>
    </span>

    <span>→</span>
  </a>

  <a href="/integrations/shopline">
    <span />

    <span>
      <span>Connection guide</span>
      <span>SHOPLINE</span>
    </span>

    <span>→</span>
  </a>

  <a href="/integrations/shoplazza">
    <span />

    <span>
      <span>Connection guide</span>
      <span>Shoplazza</span>
    </span>

    <span>→</span>
  </a>
</CardGroup>

## Ready-to-use Task examples

### Plan a product launch

This example works from the information you provide, so it does not require a connected store.

```text theme={null}
I plan to launch a line of personalized phone cases in the United States next month.

Create a launch plan that covers the information needed on the product page, the customization steps customers need to understand, the pre-launch checklist, and ideas for promotional content.

Keep the current brand positioning. Do not assume product capabilities I have not provided. Ask follow-up questions when important information is missing.
```

### Review today's orders

This Task needs access to real order data, so select the connected store you want to review.

```text theme={null}
Review today's orders for my store.

Summarize the order count, sales revenue, best-selling products, and any unusual activity that needs attention. Read and analyze only. Do not change orders, products, or inventory.

End with the three findings I should prioritize.
```

### Update inventory for multiple SKUs

This Task needs to read and update real inventory. Select a connected store and approve the proposed changes before Task applies them.

```text theme={null}
Check the current inventory for the SKUs below and prepare to update each SKU to the quantity provided:

[Add the SKUs and target quantities here]

First, show a table with the SKU, current inventory, and new inventory. Do not change any other SKUs. Show me the complete list of proposed changes and wait for my confirmation before applying them.
```

### Review a product page

This Task needs to read the current theme, so select a connected store. Task can inspect the page and recommend specific improvements, but it cannot edit or publish the live theme.

```text theme={null}
Review the product information area on the current product page. Focus on the product title, price, variant selector, quantity selector, and Add to cart button.

Identify the one issue that has the greatest effect on customer understanding or purchase completion. Tell me:

1. Where does the issue appear?
2. Why could it affect customers?
3. What should I change?
4. How should I verify the result after the change?

Keep the current brand style. Limit the review to the product information area. Do not extend the recommendations to the header, footer, product data, pricing, inventory, or other theme templates.

Provide analysis and recommendations only. Do not edit or publish my live theme.
```

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Do I need to connect a store before using Task?">
    No. You can start immediately when Task only needs the information you provide, such as when you are planning a campaign or organizing an operational plan.

    Select a connected store when Task needs to read orders, products, inventory, traffic, or theme data, or when you want it to update inventory.

    If the store is already connected, select it without authorizing it again.
  </Accordion>

  <Accordion title="Do I need to choose the specialists?">
    No. The Team leader selects the specialists needed for the work. Not every Task uses every team member.
  </Accordion>

  <Accordion title="Which store platforms can I connect to Meowgic?">
    Meowgic supports Shopify, SHOPLINE, and Shoplazza stores.
  </Accordion>

  <Accordion title="Will Task change my store automatically after I connect it?">
    No. Reading and analyzing data does not change your store.

    If you ask Task to update inventory, it will show the proposed changes and wait for your confirmation before applying them.
  </Accordion>

  <Accordion title="Can Task edit my live theme?">
    No.

    Task can review and inspect your current theme. If you want to make changes, it will guide you to create a draft copy first, and all edits will be made in that draft.
  </Accordion>

  <Accordion title="What if I have more than one connected store?">
    Task will ask which store to use for the current work.

    Check the store name and platform before continuing.
  </Accordion>
</AccordionGroup>

<br />

## Related reading

<Columns>
  <Card title="Best practices" icon="dumbbell" href="/tips-tricks/best-practices">
    Learn how to provide images, reference links, and useful context so Meowgic can understand your goal more accurately.
  </Card>

  <Card title="App integrations" icon="store" href="/integrations/introduction">
    Explore app integration guides for Shopify, SHOPLINE, and Shoplazza.
  </Card>

  <Card title="Create and install an app" icon="wand-sparkles" href="/tips-tricks/create-app-let-it-work-on-your-store">
    Learn how to create, publish, and install a Meowgic app in your store.
  </Card>

  <Card title="Welcome to Meowgic" icon="paw-print" href="/">
    Learn about Meowgic's core capabilities and the complete workflow.
  </Card>
</Columns>

<br />

<Update label="September 21, 2026">
  ## Article update

  Added guidance on store data access, change approvals, and live theme limitations.
</Update>