Google Sheets Powered Restaurant Menu

restaurant menu with google sheets

 

Running a restaurant is not easy business.

Anyone in the industry will tell you it’s a lot of hard work, with a lot of hours. The last thing that you want to do when you run a restaurant is pick up some clunky, pricey CMS (content management system) specifically for restaurants: and have to spend a bunch of time learning how the system works. Why do you have to learn all this stuff just to get a nice looking dynamic menu on your site? You don’t need 95% of the functionality this thing offers to you. You already have a website that works and looks great. You just want to be able to update a menu item here or there quickly and easily.

If only there was a way to do it using an environment you’re already familiar with.

Check this out:

Looks nice, huh? It gets better. Take a look at this.

It’s the exact same menu, but in Google Sheets.

And it turns out that this spreadsheet is actually powering that menu. Whenever I make a change to that sheet, it gets reflected on the website. How cool is that?

Using SheetDream, you can generate HTML markup to display your sheet data with just a few clicks. SheetDream is a low-code platform that can automatically generate HTML and JavaScript (and more coming soon like React!) for you to quickly get something up and running on your site.

This particular layout is called an “accordion”, a term popularized by Bootstrap. You can select the accordion option in SheetDream and it will automatically generate the code for you to display your restaurant menu’s data with a folding display. Here’s the HTML that powers the restaurant menu:

Inside the accordion folds are “cards” — which are another Bootstrap term referring to the boxes which include an image, title, and description. SheetDream generates these for you as well!

You can see the fields from the sheet sprinkled throughout the code with this {{Field}} syntax. This is called Handlebars.js, and it lets you inject spreadsheet data into your HTML. SheetDream generates these for you as well. You just need to copy + paste and move them around.

Really, all that you need to know if you want to be a SheetDream expert app builder is just know your way around a little bit of HTML/CSS. Even if you don’t, HTML/CSS developers are a dime a dozen and you could probably find someone on Upwork to do it for you at an extremely affordable price. Heck, we’ll help you out with it as part of our Ultimate plan.

This particular use case is very simple, but it goes a long way. The power behind being able to stylishly display your Google Sheets data on your website is immense: no longer are you cuffed by some specialty CMS system. Instead you have the tremendous flexibility and familiarity you get in an environment you’ve already grown with for years now: Google Sheets.

 

 

More Use Cases