How to Create and Style Menu Blocks in Squarespace

Last Edited Time

Jun 25, 2025 09:35 PM

Do not index

Suggested Tag

Squarespace

menu blocks

squarespace customization

Tags Synced

AI summary

Easily create and style Squarespace menu blocks by adding items with prices, choosing layouts, customizing fonts and colors, and fixing common alignment issues for a cohesive brand presentation.

Last edited by

Platform

Squarespace

Category

Topic

Create and customise Squarespace menu blocks with ease.

Quick takeaways:

Add menu items with prices and descriptions in seconds

Choose between centred or multi-column layouts

Customise fonts, colours, and currency symbols through design settings

Fix alignment issues with simple HTML tricks

Sort common problems like misalignment and spacing

If you're building a website for your restaurant or café, Squarespace menu blocks make it simple to display your offerings properly. You can add items, set prices, and style everything to match your brand without touching any code.

Here's how to build out your menu:

Add the item name and description - Click into a section and type your dish name, then add the description underneath

Set your prices - Enter the price directly below the description. You can use "Market Price" for items with variable pricing

Handle different sizes - Separate prices with a forward slash (/) for variants like "Small/Large" or different portion sizes

Include extras - Type "+" then list any add-ons below the main price

Balance your columns - If one column looks shorter than the other, add <br/> at the end of a section to even things out

Choose your layout Head to the Design tab where you'll find two main options:

Centred style - Good for shorter menus or when you want everything focused in the middle

Multi-column format - Better for longer menus, automatically adjusts based on content length and screen width

Set your currency In the same Design tab, pick your currency symbol. You can choose from $, €, £, or ¥, and it'll appear before all your prices automatically.

Fonts and colours Use your site styles to adjust how your menu looks. This works differently depending on whether you're on Squarespace 7.0 or 7.1, but both versions let you control typography and colour schemes through the design panel.

Pro tip: Keep your menu styling consistent with the rest of your site. A menu that looks completely different from your other pages will confuse visitors and weaken your brand.

Common Issues and Quick Fixes

Extra spacing between categories This usually happens because the first category sets the minimum height for the whole block. Try to keep similar amounts of content in each category, or use the <br/> trick mentioned above.

Alignment problems If your prices aren't lining up properly, check that you're using the same formatting for all items. Inconsistent spacing or different text lengths can throw off the alignment.

Market pricing display Remember that "Market Price" are just text - they won't pull in actual market data. Update these manually when prices change.

Quick Definitions

Menu blocks - Squarespace's built-in tool for displaying restaurant menus and price lists

Currency symbols - The £, $, € symbols that show what type of money you're using

HTML tags - Simple code snippets like <br/> that control how content displays

Alignment - How your text and prices line up visually in the menu

Padding - The empty space around your content that affects how cramped or spacious things look

Final Thoughts

Menu blocks are one of Squarespace's most straightforward features once you know the basics. Spend time getting your formatting consistent, choose a layout that works with your content length, and test how everything looks on mobile devices. A well-organised menu makes it easier for customers to find what they want and place orders.

How to Create and Style Menu Blocks in Squarespace