> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopi.lk/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom storefronts

> Build fully customized Shopi.lk storefronts with the Shopi SDK, custom frontend tools, animations, and Shopi Whiz inside ChatGPT.

Sri Lankan customers do not only check whether a business has a Facebook page anymore. They check whether the business looks real, professional, fast, and easy to buy from.

A **Shopi custom storefront** gives your brand a complete online home — not just a basic catalog, not just a template, and not just a social media profile.

Developers can build fully customized online storefronts with their own frontend stack, custom layouts, animations, and UI systems. No-coders can build their own storefront using **Shopi Whiz**, an AI website builder inside ChatGPT.

<Note>
  With Shopi Whiz, you do not need to spend extra money on separate AI API keys to start building. Use your ChatGPT account, connect it with Shopi Whiz, and start creating a fully customized Shopi storefront.
</Note>

## What is a Shopi custom storefront?

A custom storefront is the customer-facing website or shopping experience built on top of Shopi.lk.

Shopi powers the commerce foundation. Your storefront controls the experience.

This means your business can have a storefront that matches your brand, products, audience, and sales strategy instead of being locked into one fixed design.

<CardGroup cols={2}>
  <Card title="For developers" icon="code">
    Build with React, Vite, custom components, animations, landing pages, and the Shopi Storefront SDK.
  </Card>

  <Card title="For no-coders" icon="wand-magic-sparkles">
    Use Shopi Whiz inside ChatGPT to describe your store, generate pages, update sections, and prepare the storefront.
  </Card>

  <Card title="For Sri Lankan brands" icon="map-pin">
    Create a professional online presence for local customers who search before they trust and buy.
  </Card>

  <Card title="For future growth" icon="chart-line">
    Start simple, then add new pages, campaign sections, product layouts, and custom experiences as the business grows.
  </Card>
</CardGroup>

## How it works

A Shopi custom storefront connects your frontend experience with Shopi's commerce layer.

<Frame caption="Simple diagram showing frontend, Shopi SDK, Shopi API, and Shopi backend">
  <img src="https://mintcdn.com/shopitechnologies/ZWHMPgAwUlHtZ_jj/images/shopi-sdk-explanation.png?fit=max&auto=format&n=ZWHMPgAwUlHtZ_jj&q=85&s=c84130906208197e33a1536a3a78d139" alt="Shopi Sdk Explanation" width="1586" height="992" data-path="images/shopi-sdk-explanation.png" />
</Frame>

<Steps>
  <Step title="Create or connect a Shopi store">
    The seller prepares the shop, products, categories, and business details inside [shopi dashboard](https://admin.shopi.lk), where they run all their business operations. 
  </Step>

  <Step title="Build the storefront experience">
    Developers can use the Shopi SDK and their preferred frontend tools. No-coders can use Shopi Whiz inside ChatGPT.
  </Step>

  <Step title="Preview before publishing">
    Review the storefront experience, pages, layout, content, and mobile responsiveness before the live publish.
  </Step>

  <Step title="Publish the final storefront">
    Once the storefront is ready, publish it as the business website or online store.
  </Step>
</Steps>

## Two ways to build

<Tabs>
  <Tab title="Developer build">
    Developers can build fully customized storefronts using the Shopi Storefront SDK, APIs, and modern frontend frameworks.

    This is the best option when you need:

    * A unique brand experience
    * Custom animations and sections
    * Advanced product or collection layouts
    * SEO-focused landing pages
    * Campaign pages for offers and launches
    * Full control over frontend code

    ```typescript theme={null}
    import { Shopi } from '@shopi-lk/storefront-sdk';

    const shop = new Shopi({
      apiKey: process.env.SHOPI_API_KEY!,
    });

    const products = await shop.products.list();
    ```
  </Tab>

  <Tab title="Shopi Whiz no-code build">
    Shopi Whiz helps non-technical business owners build a fully customized Shopi storefront through ChatGPT.

    You can ask in normal language:

    * "Create a premium homepage for a Sri Lankan shoe brand."
    * "Add a best-selling products section."
    * "Make the website mobile-friendly."
    * "Use a clean layout with animations."
    * "Create an offer page for a seasonal sale."

    <Tip>
      Shopi Whiz is ideal for business owners who want a professional storefront without learning code or paying for separate AI API keys.
    </Tip>
  </Tab>
</Tabs>

## Why build custom instead of using a basic template?

Templates are useful for starting fast, but many businesses need more control as they grow. A custom storefront helps your brand stand out, explain your offer clearly, and create a better buying experience.

<AccordionGroup>
  <Accordion title="Your storefront can match your exact brand">
    You can control the layout, sections, typography, colors, animations, product presentation, and customer journey. This is useful when your brand needs to look different from competitors.
  </Accordion>

  <Accordion title="You can build beyond basic product pages">
    A custom storefront can include hero sections, offer blocks, testimonials, FAQs, story sections, collection highlights, contact sections, and SEO-friendly landing pages.
  </Accordion>

  <Accordion title="Developers can use their own frontend workflow">
    Developers are not forced into one fixed theme structure. They can use modern tools, components, animations, and deployment workflows while keeping Shopi as the commerce foundation.
  </Accordion>

  <Accordion title="No-coders can still build with AI guidance">
    With Shopi Whiz, business owners can describe what they want and improve the storefront through conversation instead of manually editing code.
  </Accordion>
</AccordionGroup>

## What you can build

<CardGroup cols={3}>
  <Card title="Fashion stores" icon="shirt">
    Clothing, shoes, accessories, and lifestyle brands with premium product pages.
  </Card>

  <Card title="Grocery stores" icon="shopping-basket">
    Category-based storefronts for supermarkets, mini marts, and local grocery sellers.
  </Card>

  <Card title="Beauty stores" icon="sparkles">
    Cosmetic, perfume, skincare, and personal care storefronts.
  </Card>

  <Card title="Electronics stores" icon="smartphone">
    Mobile accessories, gadgets, electronics, and product-focused catalog websites.
  </Card>

  <Card title="Food businesses" icon="utensils">
    Restaurant, bakery, catering, and food ordering storefront experiences.
  </Card>

  <Card title="Service businesses" icon="briefcase-business">
    Landing pages for businesses that sell services but still need online trust.
  </Card>
</CardGroup>

<Frame>
  <img src="https://mintcdn.com/shopitechnologies/ZWHMPgAwUlHtZ_jj/images/sdk-full-experience.png?fit=max&auto=format&n=ZWHMPgAwUlHtZ_jj&q=85&s=3ff71069f6d96f5107b144f460e3a956" alt="Sdk Full Experience" width="1448" height="1086" data-path="images/sdk-full-experience.png" />
</Frame>

## Developer workflow

Developers can treat Shopi as the commerce base and focus on building a polished frontend experience.

```typescript theme={null}
import { Shopi } from '@shopi-lk/storefront-sdk';

const shop = new Shopi({
  apiKey: process.env.SHOPI_API_KEY!,
});

export async function getStorefrontData() {
  const [shopInfo, products, collections] = await Promise.all([
    shop.store.get(),
    shop.products.list(),
    shop.collections.list(),
  ]);

  return {
    shopInfo,
    products,
    collections,
  };
}
```

<Warning>
  Do not hardcode real storefront API keys in public repositories. Use environment variables or a secure configuration flow when building production storefronts.
</Warning>

### Good for agencies and freelancers

A developer-built Shopi storefront is useful when the client needs a higher-quality experience than a normal template.

| Need                 | How custom storefronts help                                                         |
| -------------------- | ----------------------------------------------------------------------------------- |
| Brand-focused design | Build a storefront around the brand instead of forcing the brand into a template    |
| Animations           | Add motion, transitions, and interactive sections where they improve the experience |
| SEO pages            | Create landing pages for categories, offers, locations, and product campaigns       |
| Mobile-first UX      | Design for Sri Lankan customers who browse and buy from mobile devices              |
| Client flexibility   | Keep the commerce data in Shopi while customizing the frontend experience           |

## No-code workflow with Shopi Whiz

Shopi Whiz helps business owners create and improve a storefront by chatting inside ChatGPT.

<Steps>
  <Step title="Open ChatGPT">
    Start from your existing ChatGPT account. You do not need to buy separate AI API keys just to begin.
  </Step>

  <Step title="Use Shopi Whiz">
    Describe your business, products, preferred colors, pages, and design style.
  </Step>

  <Step title="Generate the storefront">
    Shopi Whiz helps create the first version of your Shopi storefront.
  </Step>

  <Step title="Ask for changes">
    Request improvements like new sections, better content, mobile layout fixes, animations, or product page updates.
  </Step>

  <Step title="Preview and publish">
    Review the storefront before publishing it as your official online store.
  </Step>
</Steps>

<Frame caption="Placeholder: Add a screenshot of Shopi Whiz inside ChatGPT building a storefront">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shopitechnologies/images/custom-storefronts/shopi-whiz-chatgpt-builder.png" alt="Shopi Whiz AI website builder inside ChatGPT" />
</Frame>

## Example prompts for Shopi Whiz

Use simple instructions. Shopi Whiz is designed to understand business needs, not just technical commands.

<AccordionGroup>
  <Accordion title="Create a new storefront">
    Create a modern online storefront for a Sri Lankan shoe brand. Use a premium hero section, product grid, customer reviews, and a clean mobile-first layout.
  </Accordion>

  <Accordion title="Improve the homepage">
    Make the homepage look more professional. Add a strong headline, best-selling products, trust badges, delivery information, and a contact section.
  </Accordion>

  <Accordion title="Add animations">
    Add smooth animations to the hero section, product cards, buttons, and section transitions. Keep it professional and fast.
  </Accordion>

  <Accordion title="Create a campaign page">
    Create a New Year offer page with a hero banner, offer cards, countdown section, featured products, and WhatsApp contact CTA.
  </Accordion>
</AccordionGroup>

## Shopi.lk for Sri Lankan businesses

Shopi.lk is built for practical online selling in Sri Lanka.

A social media page can help people discover your business. A proper storefront helps customers trust your business, understand your products, and take action.

<Check>
  A Shopi storefront gives your brand a permanent online place where customers can explore products, read business information, and buy or contact you with confidence.
</Check>

## Key benefits

<CardGroup cols={2}>
  <Card title="Full design freedom" icon="palette">
    Build storefronts that match the brand instead of relying only on common layouts.
  </Card>

  <Card title="Developer-friendly" icon="terminal">
    Use the Shopi SDK, APIs, React, Vite, and your preferred frontend workflow.
  </Card>

  <Card title="No-code friendly" icon="message-circle">
    Let business owners build and update storefronts through Shopi Whiz inside ChatGPT.
  </Card>

  <Card title="No extra AI API key cost" icon="badge-dollar-sign">
    Start with your ChatGPT account instead of paying separately for AI API keys.
  </Card>

  <Card title="Built for local trust" icon="shield-check">
    Help Sri Lankan businesses look real, professional, and ready to sell online.
  </Card>

  <Card title="Ready to grow" icon="rocket">
    Add new pages, campaigns, sections, products, and experiences as the business grows.
  </Card>
</CardGroup>

## Build options

| Build option     | Best for                                           | Skill level | Main advantage                                           |
| ---------------- | -------------------------------------------------- | ----------- | -------------------------------------------------------- |
| Developer build  | Agencies, freelancers, startups, advanced brands   | Technical   | Full frontend control with custom code and animations    |
| Shopi Whiz build | Small businesses, creators, first-time sellers     | No-code     | Build through ChatGPT without separate AI API key cost   |
| Hybrid build     | Businesses that want AI speed and developer polish | Mixed       | Start with AI, then let developers refine the storefront |

## Recommended assets before you start

Prepare these items before building your storefront.

* Logo in light and dark versions
* Brand colors
* Product images
* Product names and descriptions
* Business contact details
* Delivery or pickup information
* Customer reviews or testimonials
* Homepage sections you want to include
* Example websites or styles you like

## Final thought

A custom storefront is not only about design. It is about trust, control, and growth.

With Shopi.lk, developers can build advanced storefronts with full creative freedom. No-coders can use Shopi Whiz inside ChatGPT to build their own website without spending extra money on separate AI API keys.

For Sri Lankan businesses, the message is simple:

<Note>
  Start small. Look professional. Grow with a storefront that truly belongs to your brand.
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="Create your Shopi store" icon="store">
    Prepare your shop, products, brand information, and storefront requirements.
  </Card>

  <Card title="Choose your build path" icon="route">
    Use the developer workflow, Shopi Whiz no-code workflow, or a hybrid approach.
  </Card>

  <Card title="Preview the storefront" icon="eye">
    Review design, mobile layout, pages, content, and customer journey before publishing.
  </Card>

  <Card title="Publish when ready" icon="cloud-upload">
    Launch the storefront and continue improving it as your business grows.
  </Card>
</CardGroup>