How to Create a Mouthwatering Menu with Images on Squarespace
If you have a bakery, having a menu on your website is a must.
You can only answer the same questions about flavors and varieties so many times over the phone. Putting a clean, easy-to-read menu on your website gives your customers a place to find the information themselves. Plus, it’s all in writing, so instead of forgetting once they hang up the phone, they have a reference.
Squarespace actually has a Menu block that makes adding this feature to your website super simple.
It’s pre-formatted, so everything lines up the way you want it, and you don’t have the headaches of trying to do it on your own.
First, decide where you’ll want your menu.
You can add it to your Services or Products page, whatever makes the most sense to you. Here, I’ll show you how it can be on a page all on its own, and it’ll stand out in your navigation. Chances are, your menu is the number one thing people will want to see on your website, so making it easy to find is a must.
Start by adding a new page to your site by choosing Pages from the Home page. For our purposes, we’re adding a Menu page to the Secondary Navigation, so click the plus sign there for a new page. In the Create New Page box, select the Page icon. On the next screen, add the title of your page, Menu, and choose a layout. The default is blank page, which is what I always use, so just click Start Editing.
This is what your new blank page will look like. Click the teardrop-shaped insert point on the left, and the Content Block options will appear. To save you from scrolling and searching, simply type Menu in the search bar, and you’ll easily find the Menu block. Click Menu, and the next screen will prompt you to start editing.
Since we’re adding a bakery menu, I’ve changed Meals and Drinks to Cakes and Cookies. Add your details, following the existing formatting as your guide. You have the ability to create multiple tabs on your menu, and all of the information will be on the same scrolling page in the menu editing box. Use the guide on the Formatting Help tab if you need assistance with layout.
On the design tab, there are two place you can make edits.
One, you can choose whether to use the Simple (one column) or Classic (multi-column) layout. Which you choose is a matter of preference. Personally, I like the Simple layout when there aren’t as many options, and the Classic when you need to fit more on the page. The second place you can make changes is to the currency, if you choose to add prices.
Once you’ve entered all of your details, hit apply, and save your changes. Now you have your menu.
We all know that we eat with our eyes, so you definitely want to add images to your page. The best way to add several images to your page is by adding a gallery block.
First, make sure you select great images that really showcase your work.
Blurry, overly dark or light images are not the ones you want here. Just because you have created 75 custom cakes doesn’t mean you must have pictures of every single one. Choose the best ones to highlight on your website to entice potential customers to choose you. Having the wrong photos may actual deter customers from moving forward with an order. Read more on how to improve your website images here.
Next, before adding your images to your site, make sure you have them re-sized and titled correctly.
Having too large of images can bog down your site, making it run slowly, and having a keyword-filled title can boost your SEO.
For this pretend bakery, we have a limited menu. I choose to do the Simple layout with the menu, which leaves a lot of white space. Therefore, I’m adding my gallery blocks to the side of my menu. You can add yours wherever you like, maybe below the menu if you’ve chosen the Classic layout.
If you’re unfamiliar with spacer blocks, they will soon be your friend. They help you place your content just where you want it on your Squarespace website. In this case, I’ve added two space blocks to the top of my page so I can essentially split the content down the middle. You’ll simply drag the box you want to the spacer you want it attached to. So here, I’ve taken the menu block, and placed it with the spacer block on the left.
On the open side, I’ll add my gallery block. You have the option of a slideshow, carousel, grid, or stacked layout. The design you choose is a matter of preference, and how many pictures you’re adding. Here, I’m adding 3 stock photos, I chose the slideshow layout. Obviously, you’ll have pictures you took yourself, and more than likely way more than three, so you choose what suits your website. Upload your (pre-formatted) images to the Content tab.
Each design has different options, so you can play around and see what you do and don’t like in the Design tab. For this example, I’ve selected Slideshow, to show Next and Previous controls, Automatically Crop Images, Show Thumbnails, and Show Title and Description.
One thing I want to point out is the title and description, and where to add that.
When you hover over an image in your gallery, you’ll see a gear icon on the left. Click on the icon, and an Edit Image box will appear. Here, you’ll have the ability to add a title and/or description to your images. Even if you don’t want them to appear on the image itself, it’s not a bad idea to add these anyway for SEO purposes.
Once you’re happy with your gallery settings, hit Apply, then Save on the page itself. You now have a Menu page with images!
BUT WAIT! Make sure you give customers a way to place an order online!
Add an order button where customers can request their items, from the menu or custom. This can link to a contact page, or even a full booking calendar. Simply choose an insert point, and select Button. Then choose Small, Medium, or Large, edit the wording, and edit the Clickthrough URL (where you want people to be directed when they click the button)
Now, you get to tweak the design, and make sure that Menu link stands out in your navigation.
Honestly, there’s not a lot you can do to edit the design of the menu itself. By default, it will use your Body text styles, and you don’t want to change that, because it will affect the body text across your entire site.
BUT, what you can do is edit your navigation so the link to your Menu jumps out at your website visitors. So, first go back to the Home page, then Design, and Site Styles. Click on the Menu link in your navigation, and this will pull up your options to edit the secondary navigation. Because we’re assuming this is the number one place you want your visitors to go on your site, we want to make that very clear.
By default, the Inherit Primary Navigation Styles circle is checked. Uncheck that, so you can see the options to customize the secondary navigation. You can change the Style to whatever you prefer from the dropdown menu - I like to change it to a button to really make it pop. From there, change the color and font to complement the rest of your site, just make sure it has some contrast. Click Save, and you’re done!
Now, when your potential customers visit your website, they know exactly where to go to find out what you’re selling. When they get to your Menu page, they can see what you make, how much it is, and even see pictures. It’s all visually appealing and easy to see what’s what, so they’ll take their time to look around, which is great for your SEO.