Squarespace Menu Blocks Guide
TL;DR:
- Add menu items with clear names, descriptions, and prices using forward slashes for options
- Use $MKT or $Market Price for fluctuating costs and + symbols for add-ons
- Choose between centered style (simple menus) or multi-column (extensive menus)
- Fix alignment issues with
tags and balance content across sections - Troubleshoot invisible typing by saving and reopening the editor
Adding and Describing Menu Items
Start by adding each item under its relevant section. Here's how to structure everything properly:
Name Your Item: Place the menu item's name directly under a section heading.
Describe the Item: Below the name, add a brief description that tells visitors what they're getting.
Set the Price: Enter the price directly below the description. Use a forward slash (/) to show different price options for size or quantity variations.
Market Prices: For prices that change regularly, use $MKT or $Market Price. Make sure the currency symbol comes before the text.
Add Options: For extras like toppings or sides, add a plus (+) symbol and describe the option on a new line under the price.
Balance Your Layout: If your menu sections look uneven, especially with an odd number of items, add a <br/> tag at the section's end to align the columns properly.
Start with a clear name and a descriptive line that explains your offerings without being too wordy.
Customizing Your Menu's Design
You can adjust the appearance of your menu to match your site's style.
Choosing a Menu Style
Centered: Works best for shorter, simpler menus. This style puts all text in a single column down the middle.
Multi-column: Better for extensive menus. Text aligns to the left across multiple columns, depending on your site's width.
Adjusting Currency and Aesthetics
Currency Symbols: Change currency symbols for your menu prices through the Design tab. You can choose from $Dollar, €Euro, £Pound, and ¥Yen.
Fonts and Colors: Adjust fonts and colors through your site's style settings to match your overall look.
Keep the design consistent with your brand to maintain a professional appearance.
Troubleshooting Common Issues
Text and Alignment
If menu titles don't line up because of varying text lengths or different numbers of items, add <br/> tags where needed to fix the spacing.
When text doesn't show up while you're typing, save your changes, then reopen the menu block editor to refresh the view.
Addressing Extra Padding and Formatting
Keep content length similar across different sections to prevent uneven padding between blocks.
Use keyboard shortcuts (⌘ + C / ⌘ + Shift + V for Mac, Ctrl + C / Ctrl + Shift + V for Windows) to copy and paste without formatting issues, since right-click functionality isn't available in menu blocks.
Preview your menu in different browsers regularly to make sure alignment and formatting look correct everywhere.
FAQs
How can I get even alignment among menu items?
Add a <br/> tag at the end of sections with odd numbers of items to balance the layout.
What should I do about extra padding in some menu categories?
Make sure each menu category has roughly the same amount of content to keep block heights uniform.
Why can't I see my typing in the menu block?
Save your work and reopen the editor. This refresh usually fixes display issues with text entries.
Jargon Buster
Menu Blocks: Sections on Squarespace pages designed to list items available for purchase, like food menus or service lists.
Currency Symbol: A graphical symbol used to show the type of currency (like $, €, £).
Text Formatting: The process of adjusting and styling text to make it clear and visually appealing.
Wrap-up
Setting up Squarespace menu blocks doesn't have to be complicated. Add your items systematically, customize the design to fit your brand, and handle common formatting issues as they come up. Your menu will look polished and professional with these basics in place.
Consistency in your design and layout makes everything more usable and appealing to visitors. Focus on clear descriptions and logical pricing structures, and your menu will serve both you and your customers well.
Join Pixelhaze Academy for more Squarespace guidance and design resources.