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

# Storefront

> Create a branded, mobile-friendly Dodo Payments store that lists your one-time payment and subscription products, with no website to build.

<Frame>
  <img src="https://mintcdn.com/dodopayments/mOQO5ej_lx0yH9p-/images/cover-images/Storefront.png?fit=max&auto=format&n=mOQO5ej_lx0yH9p-&q=85&s=01a8c507034e9c40fd4bd7c2afd51226" alt="Dodo Payments Storefront cover image" style={{ maxHeight: '500px', width: 'auto' }} width="1200" height="630" data-path="images/cover-images/Storefront.png" />
</Frame>

A Storefront is a branded online store, hosted by Dodo Payments, where customers browse your one-time payment and subscription products and buy them through Dodo Payments checkout. You sell online without building or maintaining a website.

## Key Highlights of the Feature

1. **Branded Storefront**
   * Customize your store with a store name, logo, and banner.
   * Share your store URL, for example `store.dodopayments.com/your-store`.
2. **Product Segregation**
   * The store groups your products into a **Products** section for one-time payment products and a **Subscriptions** section.
3. **Simple Checkout Flow**
   * Customers select a product and quantity, then click **Buy now** to go to Dodo Payments checkout.
4. **Publish/Unpublish**
   * Choose which products appear on your store from the dashboard, where you can add or remove them at any time.
5. **No Extra Setup**
   * You don't need a separate CMS. You manage pricing, descriptions, and subscription details in the dashboard, and the store uses them.
6. **Mobile-Friendly**
   * The storefront layout is responsive, so it works on phones, tablets, and desktops.

## Store Front Setup

To set up and manage your storefront, follow these steps.

<Frame>
  <img src="https://mintcdn.com/dodopayments/5D2vY2CKcFOZLLyz/images/store-front/sf-1.png?fit=max&auto=format&n=5D2vY2CKcFOZLLyz&q=85&s=085dab26f05d5f0ea48cb31fd6e8e0f9" alt="Storefront settings in the Dodo Payments dashboard with store name, URL, logo, banner, and product fields" style={{ maxHeight: '500px', width: 'auto' }} width="1920" height="1440" data-path="images/store-front/sf-1.png" />
</Frame>

### Accessing Your Storefront Settings

1. In the Dodo Payments dashboard, go to **Settings → Storefront**.

### Store Branding

1. **Store Name**: Enter the public name of your store. It appears at the top of your storefront.
2. **Store Logo**: Upload a square image of your brand logo.
3. **Store Banner**: Upload a 16:9 banner for the top of the storefront. The recommended size is 1920×1080. Keep your logo and key text centered, because wider screens crop the top and bottom.
4. **Store URL**:
   * Enter the slug for your store address, for example `store.dodopayments.com/my-store`.
   * The slug can contain only lowercase letters, numbers, and hyphens. You can change it later.
5. **Listed Products**: Select the products you want to show on your storefront.

Logo and banner images can be PNG, JPG, JPEG, GIF, SVG, or WebP files of up to 5 MB.

### Saving & Viewing Your Store

<Frame>
  <img src="https://mintcdn.com/dodopayments/5D2vY2CKcFOZLLyz/images/store-front/sf-2.png?fit=max&auto=format&n=5D2vY2CKcFOZLLyz&q=85&s=b0b3e18d91f835b0812ee708ee7a8d8b" alt="Storefront settings with the Publish button and the store preview" style={{ maxHeight: '500px', width: 'auto' }} width="1920" height="1440" data-path="images/store-front/sf-2.png" />
</Frame>

1. **Click Publish**: Click **Publish** to save your storefront setup and the products you listed.
2. **Preview Store**: Preview your storefront at its URL, or click **Visit Store** to open it.
3. **Share URL**: Share the link with your customers by email, on social media, or on your website.

### Test Mode

<Frame>
  <img src="https://mintcdn.com/dodopayments/5D2vY2CKcFOZLLyz/images/store-front/sf-3.png?fit=max&auto=format&n=5D2vY2CKcFOZLLyz&q=85&s=01545a337bee2e0d3914af1712d0710c" alt="Storefront in test mode showing the test mode banner at the top of the page" style={{ maxHeight: '500px', width: 'auto' }} width="1920" height="1440" data-path="images/store-front/sf-3.png" />
</Frame>

Test mode and live mode have separate storefronts. A storefront you create in test mode shows a test mode banner at the top of the page.

Use test mode to try the browsing and purchase flow yourself. To take real payments, share the live mode store link with your customers.

When you're happy with how your store looks in test mode, you can copy the design and storefront branding to live mode instead of rebuilding them. See [Copy Design From Test to Live Mode](/features/design#copy-design-from-test-to-live-mode).

## Customer Experience

<Frame>
  <img src="https://mintcdn.com/dodopayments/5D2vY2CKcFOZLLyz/images/store-front/sf-4.png?fit=max&auto=format&n=5D2vY2CKcFOZLLyz&q=85&s=4acd4e306ff344645e8cb218fd6876e8" alt="Customer view of a storefront with the store banner, logo, and product cards" style={{ maxHeight: '500px', width: 'auto' }} width="1920" height="1440" data-path="images/store-front/sf-4.png" />
</Frame>

### Landing on the Storefront

* **Visual Branding**: Customers see your store name, logo, and banner first.
* **Organized Products**: Products appear in two sections: **Products** for one-time payments and **Subscriptions**.

### Browsing Products

* **Product Cards**: Each card shows the product name, description, and price. To read the description, customers click the **i** icon on the bottom right of the card.
* **Quantity Selection**: Customers choose how many items to buy.
* **Subscription Frequency & Trial**: Subscription cards show the billing frequency, for example monthly, and any free trial, for example a 7-day trial.

<Frame>
  <img src="https://mintcdn.com/dodopayments/5D2vY2CKcFOZLLyz/images/store-front/sf-5.png?fit=max&auto=format&n=5D2vY2CKcFOZLLyz&q=85&s=38357ae5c9893b01d684a01eb1c106d4" alt="Product card on a storefront with the quantity selector and the Buy now button" style={{ maxHeight: '500px', width: 'auto' }} width="1920" height="1440" data-path="images/store-front/sf-5.png" />
</Frame>

### Buying Process

1. **Select Buy Now**: The customer clicks **Purchase** on a product, selects the quantity, and clicks **Buy now**.
2. **Redirect to Dodo Payments Checkout**: The customer goes to Dodo Payments checkout and completes the secure checkout flow there.
3. **Confirmation**: After a successful payment, Dodo Payments shows a confirmation. Storefront checkout links don't include a redirect URL, so you can't send storefront customers to your own "Thank You" page.

<Card title="Design & Theme Customization" icon="palette" href="/features/design">
  Customize your storefront's appearance with pre-built themes, typography, colors, and a live preview on the Design page.
</Card>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.