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

# Build your website

> Create your shop's website in Sapt, find your way around the editor, change the look and business details, and publish when you are ready.

Sapt hosts a website for your shop. It uses your business details from Sapt and Google, and every form on it sends requests straight into Sapt.

## Before you start

* You edit your website on the web at [app.sapt.ai](https://app.sapt.ai), on a computer if you can. The phone app shows whether your site is live, but it does not edit it.
* Your role needs permission to manage the website and edit content. If you see **Ask an admin to create it.**, ask whoever runs your Sapt team. See [Your team](/docs/mintlify/account/team).

## Create your site

<Steps>
  <Step title="Open Website">
    In the sidebar, click **Website**.
  </Step>

  <Step title="Click Create now">
    The **Create your website** card shows the address your site will use, such as `ridgeline-auto-demo.sapt.ai`. Click **Create now**. Your site goes live at that address right away, with its forms already connected to Sapt.

    <Frame>
      <img src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/create.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=54ec0537d01fd2af6b9d28c35acfc546" alt="The Create your website card saying it goes live at ridgeline-auto-demo.sapt.ai, with the Create now button" width="1568" height="507" data-path="docs/mintlify/images/website/create.webp" />
    </Frame>
  </Step>

  <Step title="Turn on editing">
    The editor opens full screen. If the left side shows **Make this site yours**, click **Enable editing** once.
  </Step>
</Steps>

## Find your way around the editor

<Frame>
  <img src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/editor.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=95dd057793d6f5ce1abfb7cb969c825f" alt="The website editor with the Hero section picked: the Sections tab on the left, the home page in the middle, and the Hero's editing controls on the right" width="1456" height="824" data-path="docs/mintlify/images/website/editor.webp" />
</Frame>

* **Top bar:** your site's address, a status such as **Unsaved changes**, **Private draft saved** or **All changes published**, Undo and Redo, the sliders button for **Website settings**, and **Publish**.
* **Left side:** four tabs. **Sections** arranges the page you are on. **Pages** lists every page. **Website** holds details shared by every page. **Style** sets colors and fonts.
* **Middle:** your page. Pick a page at the top, switch between **Desktop canvas** and **Mobile canvas** (the computer and phone icons), and switch between **Editing** and **Preview**.
* **Right side:** **Editing controls** for whatever you clicked.

To change something, click it on the page and use the controls on the right. Double-click a headline to type right on the page. Then click **Save changes** in the bar at the bottom, or press Ctrl+S (⌘S on a Mac).

Your changes stay private until you publish. Visitors see the old version until then.

<Frame>
  <img src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/editor-mobile-canvas.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=39937774b4f6606646364ee5052cb2eb" alt="The editor on Mobile canvas, showing the home page as it looks on a phone" width="1456" height="824" data-path="docs/mintlify/images/website/editor-mobile-canvas.webp" />
</Frame>

<Tip>
  Most of your visitors are on a phone. Click **Mobile canvas** before you publish and check the page there too.
</Tip>

<Note>
  Forms do not send from inside the editor, even in **Preview**. Test them on your live site. See [Test your form](/docs/mintlify/website/forms#test-your-form-before-you-launch).
</Note>

## Change the look

Click the **Style** tab. The panel on the right is called **Make it yours**.

<Frame>
  <img src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/style-tab.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=73188e0e756616d26f41816bf31156bb" alt="The Style tab: Make it yours with the Workshop, Evergreen and Midnight looks, four colors and three fonts" width="1456" height="824" data-path="docs/mintlify/images/website/style-tab.webp" />
</Frame>

* **Start with a look:** pick a ready-made style, such as Workshop, Evergreen or Midnight. It keeps your brand color if your branding has one.
* **Colors:** Accent, Background, Surface and Text.
* **Typography:** fonts for Headings, Body text and Buttons.
* **Corner radius:** from Sharp to Soft.
* **Use project branding:** go back to the colors and fonts from your Sapt branding.

## Edit your business details

Click the **Website** tab. Under **Across your website** you find what every page shares.

<Frame>
  <img src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/website-tab.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=12812136245a541ec7bdb9238d7be2fc" alt="The Website tab listing header, business details, buttons and shared forms, with Address open on the right and its Use Sapt value button" width="1456" height="824" data-path="docs/mintlify/images/website/website-tab.webp" />
</Frame>

* **Header & navigation:** your logo and name, the menu and its button, and the contact strip.
* **Business details:** name, phone, address, hours, email, category, description, amenities, service areas and social links. Each one follows your Sapt and Google details until you change it here. To go back, click **Use Sapt value**.
* **Buttons:** your main button's label and what it does, such as **Open Sapt booking** or **Call the business**.
* **Search, footer & tracking:** how your home page looks in search results, the footer, and **Hide from search engines**.
* **Shared forms:** your booking form and any other forms. See [Forms](/docs/mintlify/website/forms).

## Show your site on Google

If the Website page shows **Hidden from search**, your site is asking Google to leave it out. Click **Show on Google**.

If you have changes you have not published yet, Sapt asks you to publish them first. You can also turn it off yourself: **Website** tab, **Search, footer & tracking**, then switch off **Hide from search engines** and publish.

<Frame>
  <img className="shot-detail" src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/search-settings.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=8923e88f7284b99bb4b9a93e1e3b4a97" alt="Search & shared content with Home search title, Home search description and the Hide from search engines switch turned on" width="643" height="828" data-path="docs/mintlify/images/website/search-settings.webp" />
</Frame>

## Publish

<Steps>
  <Step title="Click Publish">
    **Publish** is in the top right. It turns on once you have changes. A box called **Ready to go live?** lists what will change.

    <Frame>
      <img className="shot-detail" src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/publish.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=6c7c8ff5e0ce4061b1bbf56679df615b" alt="The Ready to go live? box listing two changes, About our shop and Website layout, with Keep editing and Publish website" width="941" height="589" data-path="docs/mintlify/images/website/publish.webp" />
    </Frame>
  </Step>

  <Step title="Click Publish website">
    Your live site updates shortly, usually within a minute. Open it from the address under **Your website** in the top bar.

    <Frame>
      <img src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/live-desktop.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=5ea969cc4270a09594457fa5fdcfc084" alt="The published Ridgeline Auto home page on a computer, with Call and Request service buttons" width="1400" height="850" data-path="docs/mintlify/images/website/live-desktop.webp" />
    </Frame>

    <Frame>
      <img className="shot-phone" src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/live-phone.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=dac41c15052340702be7a2335f0ab25b" alt="The published Ridgeline Auto home page on a phone, with the Request service button" width="780" height="1500" data-path="docs/mintlify/images/website/live-phone.webp" />
    </Frame>
  </Step>
</Steps>

Changed your mind? Click **Discard draft** at the bottom of the left side, then **Discard draft** again. Your published site stays as it is. New pages you made stay as unpublished pages.

## Your website on your phone

In the phone app, open **Growth** and scroll to **Website** at the bottom. It shows whether your site is **Live**, waiting on your domain, or off, with **Open website** to see it. Editing happens on the web.

<Frame>
  <img className="shot-phone" src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/phone/growth.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=c5fb9af1947b28e770ea52e1eeab7bfb" alt="The Growth tab in the phone app, which opens on Reviews. Website is at the bottom." width="780" height="1688" data-path="docs/mintlify/images/phone/growth.webp" />
</Frame>

## If something looks wrong

* **"Your site goes live when your plan starts."** Your site turns on once your Sapt plan has started.
* **You see Pages, Content, Brand and Settings instead of the editor.** Your role can see the site but not use the full editor. Ask whoever runs your Sapt team.
* **A card says Your location.** Sapt found more than one Google location. Click **Choose location** and pick the right one.
* **"The live website may still show the previous version."** Your changes are published. The live site often catches up 10 to 40 seconds later, even with this banner showing. Wait a moment, then click **Check again** or reload your site.

  <Frame>
    <img src="https://mintcdn.com/sapt/uTSH2FdHG3EzpkYv/docs/mintlify/images/website/publish-not-confirmed.webp?fit=max&auto=format&n=uTSH2FdHG3EzpkYv&q=85&s=ee38dda884855aa00117a3d7f2c656ca" alt="A banner under the top bar: your changes are published, but the live-site refresh could not be confirmed, with Check again" width="1568" height="108" data-path="docs/mintlify/images/website/publish-not-confirmed.webp" />
  </Frame>
* **Publishing failed.** Your draft is safe. Click **Try publishing again**.

## Keep going

<CardGroup cols={2}>
  <Card title="Pages and sections" href="/docs/mintlify/website/pages-and-sections" description="Add pages and arrange the sections on each one." />

  <Card title="Forms" href="/docs/mintlify/website/forms" description="Edit your forms and choose where requests go." />

  <Card title="Connect your domain" href="/docs/mintlify/website/connect-your-domain" description="Move your site to a domain you own." />
</CardGroup>


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