---
# System prepended metadata

title: Khipi Documentation

---

# Khipi Documentation


Table of contents
1. Components/Services
    i. Prismic
    ii. Shopify
    iii. Postscript
    iv. Vercel
3. Updating website content
4. Updating weekly menu
5. TODO

## Components/Services
### Prismic

We use [prismic](https://khipi-test.prismic.io/) to manage all our website content. This includes all the text and images we see on all the content pages, and what the menu for the week is.

#### Custom Types
Custom Types in prismic are the templates used for all our content.
![](https://i.imgur.com/pjuwPFI.png)


This is where you define the various content fields that you want to use for different pages.

The following types are used for individual pages
- Cooks
- Curators
- Homepage
- Weekly Menu

##### Documents
Documents are instances of Custom Types where you fill in the defined fields. Documents are what is displayed in the UI. 
![](https://i.imgur.com/mtKV2UV.png)

Apart from `branding` and `Navbar Menu`, all other documents correspond to the content for individual pages.

### Shopify

We use [shopify](https://khipi-store.myshopify.com/admin) to manage our sellable products, orders and customers. We also use Shopify to accept payments.

### Postscript
[postscript](https://www.postscript.io/) for sms automation

### Vercel
We use [vercel](https://vercel.com/avikejariwal/khipi) to host our web application and manage deployments. 

## Updating website content
> Note: you can only edit existing fields using these instructions. You cannot add new fields to `Custom Types` or create new `Custom Types` for the UI. 

Follow the instructions below to update any static content on the website that isn't related to the products/items you're selling. e.g, landing page images. If you want to update the weekly menu, follow [Updating weekly menu]() instead

1. Select the page you want to edit
![](https://i.imgur.com/wJJMpDk.png)

2. Make changes to the content. As soon as you change a field, you'll notice the app bar turns orange letting you know that you have local changes that haven't been saved.
![](https://i.imgur.com/BcX1DGr.png)

3. Hit the save button in the top right to save your content changes. Not, this does not publish it to the website yet. 

4. Publish your changes
![](https://i.imgur.com/hqPe0bg.png)

i. If you have more updates on other pages, create a release and batch all your updates in a single release. This prevents the UI from getting built and deployed multiple times, which ensures that the updates get deployed quickly.
![](https://i.imgur.com/N9KVInW.png)

ii. If these are all the updates you want to do in the session, just `Publish it now`
![](https://i.imgur.com/5syvHGC.png)

5. Wait :)
As soon as you publish you changes/release, `Vercel` will start to update the app with the content changes. This normally takes about 3-4 minutes and the status can be tracked in the Vercel dashboard.

## Updating weekly menu

Follow the instructions below if you want to update your weekly menu.

1. Create the Menu on Canva

1. If the dish/menu item is new and hasn't been served before, duplicate any existing menu item and proceed with the steps below. Else skip this step. 
![](https://i.imgur.com/CGGP9W5.png)

    i. Add information about the meal. This includes the `Title`, `Description`, and `Media`. Ensure you've added at least one image for the dish.
    ![](https://i.imgur.com/RCkakTO.png)
    
    ii. Create variants for the different portion sizes/substitutions.
    ![](https://i.imgur.com/dhRCwtq.png)

    iii. Enter the price for each combination. This is slightly cumbersome but required. You can omit the quantity/SKU for now.
    ![](https://i.imgur.com/b5J33sp.png)
    
    
    iv. Add the cuisine tag in the following format `Cuisine: <CUISINE-NAME>`. Eg
![](https://i.imgur.com/cOusRmJ.png)

    v. Add the allergens tag in the following format `Allergens: <ALLERGEN-1> | <ALLERGEN-2>`. Ensure individual allergens are seperated by a `|`.
![](https://i.imgur.com/byL57qD.png)

    
    v. Change the product status to active and ensure that the Khipi Prismic and NextJs boxes are checked. Your menu item will NOT be visible in the website yet.
![](https://i.imgur.com/qpPONOh.png)


2. Once you've created the product in Shopify, head over to the Prismic dashboard and go to the [Documents](https://khipi-test.prismic.io/documents/working?l=en-us) page. Select the `Weekly Menu` document. 


3. Update all the required content like the Week's menu title, start/end dates etc. Minimally - 
    i. Toggle the `ordering window toggle`
    ii. subtitle (i.e. "Currently serving dishes from <Country1> and <Country2>")
    iii. Menu start date
    iv. Menu end date
    v. Weekly message

4. Delete the existing Menu items using the delete icon button on the right
![](https://i.imgur.com/gOIEVdk.png)
![](https://i.imgur.com/MGj7uyH.png)

5. Click on the`Add a new element in weekly menu` button. This should add a menu item to the list. You can add how many ever menu items as you'd like for that week.
![](https://i.imgur.com/UHDZg5U.png)

6. Click on `select a product` and select the Menu Item you wish to add.
![](https://i.imgur.com/KjH0Onu.png)

7. Save your changes
8. Publish your changes
9. Wait :)

## TODO
- How to update weekly cooks, curators
- How to add side dishes
- How to create orders manually
- How to send text messages and automate
- Postscript SMS Integration






