Creating A Recipe Archive on Squarespace

Squarespace for Food Bloggers | Designing a Recipe Index for your Squarespace

Having a recipe index is an important part of being a food blogger, you want your audience to stick around and enjoy not only reading the post that brought them there but find an affinity to your voice as a blogger. This means you need to give them reason to stay, in this case you can show off your skills with a recipe index. The best part about this is that it works for many other kinds of bloggers as well like DIY bloggers or travel and fashion bloggers too. Maximizing the clicks on your website for many of those kinds of bloggers = cold hard cash.

The easiest way to do this is going to be a summary block. 

You can do this a couple of ways, unfortunately the one downfall is that there is a max number of posts for a summary block set at 30 in squarespace, and there's no "workaround" currently for that. So, this means you need to plan well. 

My design takes some effort, but I think it's worth it in the end. For LONG TIME bloggers, and for those who plan to have more than 30 items in a category.

Recipe Index Design for Squarespace

We are going to create the design above. This is actually a photoshop layout, but is possible and we can show the planning psd file then how it looks in real life.

Number one, you will need to decide on your categories for your recipe index. You will want to create a column for your "recipe categories" on the page. I do this by creating a text file and then dropping a spacer on the right side of it. Below the spacer I add an image for the title of my recipe box. Here I used a black box with custom script. Next, I added a button. There is a bit of custom css involved with this button, I will include mine at the end of the post. Each of these buttons will lead to an individual page for your recipe index. Keep in mind when you are adding these that if you are on the personal ss platform that you have a max available of 20 pages. If you are a pro or someone who wants to be a kick-ass amateur food blogger, you might have to upgrade.

In this example above, I also included my social media icons, as well as a search bar in order to create maximized ability for my audience to find the recipes from my site.

Last but not least, the posts on the top area will be the top 9 or however many you chose that are FEATURED posts, so you might have to go back through and feature them. This way the last 9 of your best recipes show, and not a filler recipe/post (yes we all have those). 

Your featured section will be:

1. CHOOSE BLOCK. Choose the summary block layout in GRID.

2. NUMBER OF ITEMS. Make the number of items limited 9 for a 3x3 block or 16 for a 4x4 block. 

3. SOURCE. Make sure you choose the BLOG as the source, then check the box for featured posts only and use the category you want showing.

4. METADATA. In the metadata section choose none for both areas, and uncheck the title box. So the only thing that shows is the thumbnail.

5. SQUARES. I like the boxes to be squares, but that's up to you. For that choose the 1x1 ratio.

6. FINESSING SPACE. You might have to play with your column and gutter space depending on your page size so it becomes the desired effect you want.


click on image to make bigger


Example below of how this looks:

Now that you have done the featured section, it's time to do the full amount. Create a running list with your recipe. I like to do it the long way for a "pretty" list area. Feel free to use a summary list for this, it's just not my favorite. Remember if you do a summary list block, the max is 30 so you will have only 30 for each category. If you are a new food blogger, this will probably help you stay focused on not just creating recipes for one category type.

Make sure you head over to check out the live example. As of Sunday Sept. 6th at 830 at night when I am writing this, this is just a sample page, it is not the recipe index I use for my own blog. I assume that in the future it will be, but other things come first. 

*note when you create the first category page, make sure instead of working your butt off to recreate it, use the duplicate page method. Make sure to change the URL  and keep everything in a unlinked folder. This means you only have to re-create this once on your blog sidebar. Go go forth and create your own recipe index!


- note: this is for the LARGE button.