Snug Gallery / Guides

A menu photo gallery for a cafe or bakery Shopify store

Build a menu photo gallery for a cafe, bakery or restaurant on Shopify: layout, captions as the menu, tag filters by course, links on orderable items.

Food stores on Shopify tend to have one of two problems with photos. Either the menu is a PDF nobody opens on a phone, or every dish is a full product with a price, a cart button and a variant picker, when half of them can only be bought by walking in. A photo gallery sits between those two. It shows the food, names it, and sends people to the few items you actually ship or take pre-orders for. This guide builds one with Snug Gallery, from choosing a layout to deciding what the caption should say.

What a menu gallery is for

Be clear about the job before adding images. A bakery that ships boxes nationwide wants the gallery to move people toward the orderable products. A neighbourhood cafe with a small online shop for beans and gift cards wants the gallery to make people come in on Saturday. A restaurant that sells a cookbook and a hot sauce wants the page to feel like the dining room. Each of those is a gallery of food photos, but the captions, the links and the layout change with the goal.

The common mistake is building the menu as products. Shopify products carry a price, inventory and a buy button, and a croissant that is only sold at the counter has none of those. Shoppers try to add it to the cart, fail, and leave. A gallery image has a title, a caption, an optional link and nothing else, which is exactly as much as a menu item needs.

Choose the layout for the kind of menu

For a menu that is a list of named dishes, use the grid layout with a Square aspect ratio. Every dish gets the same size tile, nothing gets more weight than the rest, and a caption below each image reads like a menu line. Three columns on desktop and two on mobile keeps the tiles big enough to see what is on the plate.

For a bakery case or a seasonal spread where the photos are the point and the names matter less, masonry works better. Tall shots of layer cakes and wide shots of trays keep their shapes, and the page looks like a counter rather than a spreadsheet. Captions still work in masonry, but keep them short.

For a hero at the top of the page, a slider with five or six of your best dishes does the job, with autoplay off so people can look at the food. Put the full menu grid below it. The layouts guide covers the trade-offs in detail, and one gallery can be used in two blocks with two different layouts on the same page.

Captions are the menu

Each image in Snug Gallery has a title and a caption text. For a menu, the title is the dish name and the caption text is the one line you would print under it: the key ingredients, the allergen note, or the price. The caption style setting on the block decides where that text appears. Below image keeps it readable at all times and is the right choice for a menu; the overlay styles look good on a portfolio but hide the plate behind text, and the hover style does nothing on a phone.

Prices in captions are fine as long as somebody owns updating them. If the counter price changes monthly and the person changing it does not open the Shopify admin, leave prices out and say "ask at the counter" or "from" with a round number. A gallery with wrong prices is worse than one with none.

Write the alt text too. For food it is easy: "almond croissant, cut in half, on a wooden board" tells a screen reader user what the image is, and tells image search what the picture contains. The captions guide explains how title, caption and alt text differ and which one shows where.

Filter by course or by day with tags

A menu with more than a dozen items wants sections, and in Snug Gallery sections are tags. Tag each image in the app with its course or category, such as breakfast, lunch, pastries, drinks, or with the days it is available. Then turn on the tag filter bar on the block. Visitors see a row of pills above the gallery, tap one, and the grid filters to that tag without a page load. The filter bar is available on the grid, masonry and portfolio layouts.

Keep the tag set small. Five or six filters read as a menu; fifteen read as a form. If an item belongs in two sections, give it both tags; a bagel can be both breakfast and lunch without being uploaded twice.

Tags also give you links. A filtered view has its own URL, so the "Weekend brunch" button in your navigation can open the menu page already filtered to brunch. The filtered gallery link guide shows the URL format.

Link the items you actually sell

This is where the gallery earns its place. Each image has a link field, and the link can point anywhere: a product page, a collection, a pre-order form, a third-party ordering or booking page. Set it on the items that can be bought online and leave it empty on the ones that cannot. A tile with a link opens the destination when tapped; a tile without one opens in the lightbox like any other photo. The visitor learns the rule within two taps.

For a bakery that ships, that means the gift box, the granola and the coffee beans link to their product pages, and the morning buns do not. For a restaurant, the cookbook and the hot sauce link out and the tasting menu does not. If you want to be explicit, add "Ships nationwide" to the caption text of the linked ones. The clickable images guide has the detail on how links interact with the lightbox.

Photographing the menu

The gallery looks as good as the worst photo in it, so shoot the menu in one session if you can. Same table, same window, same time of day, same distance from the plate. Daylight from the side, never a flash from the front. A phone is fine. What ruins a food grid is not resolution, it is a mix of warm restaurant lighting in one tile and blue daylight in the next.

Shoot square or in a consistent orientation if you are using the grid with a fixed aspect ratio, and leave some room around the plate so the crop has somewhere to go. Snug Gallery crops to the aspect ratio you set on the block, centred on the image, so a plate that fills the frame edge to edge will lose its rim on one side.

Upload the full-size originals. The app serves resized versions for each screen, and the lightbox shows the large one. A 600 pixel image that looked fine as a tile looks soft when somebody taps it to see the detail on the cake.

Keeping it current

Menus change, which is why the PDF was always out of date. In the Snug Gallery app, removing a dish is deleting one image, adding one is one upload with a title and a tag, and a seasonal special is an image you hide in January and show again in October. None of that needs the theme editor; the block on the page keeps showing whatever the gallery holds.

Sort order is manual, so drag the current specials to the top of the gallery when they change. With the filter bar on, the order within each tag follows the overall order, so you only sort once.

If you run more than one location with different menus, make one gallery per location and one page per location, each with its own block. A shared gallery with location tags also works and is less to maintain, but then the filter bar is doing navigation work, and visitors who do not notice it see everything.

A page that works

A short slider at the top with the five dishes you are proudest of, autoplay off. A line of text about when you are open and what can be ordered online. Then the full menu as a square grid, captions below, with a filter bar of five tags, and links on the handful of items that ship. Alt text on everything. Photographed on one afternoon, replaced one dish at a time as the menu moves. It loads fast, it works on a phone, and nobody has to open a PDF to find out whether you do oat milk.

Frequently asked questions

Can I show a cafe or restaurant menu as photos on Shopify without making each dish a product?

Yes. Upload each dish to a Snug Gallery gallery with the dish name as the title and the description or price as the caption text, then add the gallery block to a page in the theme editor. Nothing in the gallery is a product, so there is no price, inventory or cart button unless you link a tile to a real product.

How do I split the menu into breakfast, lunch and drinks?

Tag each image with its course in the Snug Gallery app and turn on the tag filter bar on the block. Visitors get a row of filter buttons above the gallery and the grid filters in place. The filter bar works on the grid, masonry and portfolio layouts.

Can some menu items link to a product page while others do not?

Yes. The link is set per image. Give the items you ship or take pre-orders for a link to their product page and leave the link empty on counter-only items. Linked tiles open the destination; unlinked tiles open in the lightbox.

Which caption style should a menu gallery use?

Below image. It is always visible, it does not cover the food, and it works on phones where hover styles do nothing. Put the dish name in the title and the ingredients or price in the caption text.

More guides