Cafe Website Development on 1C-Bitrix with Booking and Menu

A cafe website solves three tasks: show the menu, bring in the guest, and take a reservation. Sounds simple, but 90% of visitors will open it from their phone while standing on the street or scrolling through their feed. If the page takes more than three seconds to load or the menu can't be read without zooming, the guest will leave for the competitor across the street. Our experience shows that proper architecture on 1C-Bitrix solves these problems. We have developed websites for 15+ establishments, so we know the typical bottlenecks and how to avoid them.

On 1C-Bitrix, a cafe gets a manageable menu catalog via infoblocks, booking via web forms with CRM transfer, and a technical foundation that the admin can update without a developer. The project is delivered turnkey in 6–8 weeks with a warranty and post-launch support.

Implementing the Menu via Infoblocks

The menu is the central element of the site. The structure of the "Menu" infoblock:

• Sections — dish categories (breakfasts, salads, soups, main courses, desserts, drinks, bar)
• Elements — specific dishes

Element properties:

• Name — required, displayed on the card
• Description — composition and features
• Weight/volume — string property (150 g, 300 ml)
• Calories — numeric property, optional display
• Allergens — multiple list (gluten, lactose, nuts, seafood)
• Photo — file property, required
• Label — list (new, hit, spicy, vegetarian)
• Activity — standard field, allows hiding dishes without deletion

The admin works through the standard infoblock interface: adds a dish, uploads a photo, sets a "business lunch" label, and it appears on the site. Sorting via the "Sort" field — the chef can highlight seasonal items by moving them up.

On the frontend, the menu is displayed with filtering by category (tabs or sidebar) and allergen icons. No pagination — the entire menu on one page with anchor links so the guest can scroll through it all.

Promotions and Booking: How Not to Lose a Customer?

Promotions and Business Lunches

A separate "Promotions" infoblock with properties:

• Title and description of the promotion
• Start date / end date — date type properties, the element hides automatically after expiration
• Type — list (business lunch, discount, seasonal offer, combo)
• Link to dishes — connection with the menu infoblock

Business lunches are updated weekly. For the admin's convenience, a template is created: copying last week's element with changed dishes and dates. On the main page, a block with current promotions is formed by the news.list component with a filter by active dates.

Table Booking

A cafe is not a restaurant with a hall management system. Integration with R-Keeper or iiko for booking is overkill here. A web form is sufficient:

• Guest name
• Phone (input mask)
• Date and time
• Number of guests
• Wishes (text field)

The form is created via the form module or the feedback component. Data is sent to the admin email and simultaneously creates a lead in Bitrix24 CRM (if cloud is connected) or is written to the crm module of the box. The admin confirms the booking by phone.

For spam protection — Google reCAPTCHA v3 (invisible to the user) and a limit on the number of requests from one IP.

Photo Gallery, Reviews, and Contacts

Interior Photo Gallery

Infoblock "Gallery" with sections: hall, terrace, banquet hall, kitchen. Photos are uploaded into a multiple file property. On the frontend — masonry grid with lightbox (Fancybox or equivalent). Important: photos must be professional — this is not a development task, but the requirements for content should be fixed at the technical specification stage.

Reviews

Reviews module — a standard infoblock with pre-moderation. The guest leaves a review via a form (name, text, rating from 1 to 5), the admin checks and publishes it. The average rating is calculated by a cached component and displayed on the main page. Reviews are marked up with Schema.org Review — the aggregated rating appears in search results.

Map and Contacts

Yandex.Maps or Google Maps via API. A pin with the address, route building capability. Business hours marked up with Schema.org OpeningHoursSpecification. Phone number is clickable (tel:), on mobile — calls.

SEO Markup: Schema.org Restaurant

The Restaurant microdata covers:

• name, address, telephone
• openingHours — business hours
• servesCuisine — cuisine type
• menu — link to the menu page
• aggregateRating — average rating from reviews
• image — restaurant photo

Markup is added to the component template via JSON-LD. It is verified with Google Rich Results Test before launch.

Mobile Optimization: Core Web Vitals and WebP

For a cafe, mobile traffic accounts for 85–95%. Phone, address, menu — everything searched on the go. If LCP (Largest Contentful Paint) exceeds 2.5 seconds, Google lowers positions, and the guest closes the tab.

Problem number one — images. Photos of dishes and interiors are heavy: 2–5 MB from the photographer's camera. On a mobile screen 375px wide, loading a 2400px image is wasteful. WebP compresses images 30% more efficiently than JPEG, saving hosting budget and speeding up loading. The WebP format was developed by Google and is supported by all modern browsers (WebP).

Solution at the 1C-Bitrix level:

The built-in scaling via CFile::ResizeImageGet() generates thumbnails on the first request. We configure a set of sizes:

• Menu card (mobile) — 400×300, quality 80%, WebP format
• Menu card (desktop) — 800×600, quality 85%, WebP format
• Gallery (preview) — 600×400, WebP
• Gallery (full size) — 1600×1200, WebP with JPEG fallback

In the component template, the <picture> tag is used with <source> for WebP and <img> for JPEG fallback. The srcset attribute specifying sizes lets the browser choose the optimal version.

Lazy loading — loading="lazy" attribute on all images below the first screen. For the menu, this means the first 3–4 dishes load immediately, the rest load on scroll. Intersection Observer API for custom behavior if needed.

Caching: Bitrix components are cached by default (cache time setting in component parameters). Static files (CSS, JS, fonts) are served with Cache-Control: max-age=31536000 headers via nginx settings. For images — similarly, with invalidation via filename change on update.

Fonts: one font, two styles (regular, bold), loaded with font-display: swap, preloaded via <link rel="preload">. No Google Fonts — files are hosted locally, eliminating extra DNS lookups.

Minification and compression: CSS and JS are combined and minified via Bitrix's built-in tools (setting in the main module). Gzip or Brotli at the nginx level.

Result: LCP < 2 seconds, CLS < 0.1, FID < 100 ms. Verified via PageSpeed Insights and real data from Chrome UX Report after statistics accumulate. Our certified engineers guarantee compliance with these metrics.

If you want a website that loads quickly and brings bookings, contact us for a consultation.

What's Included in Cafe Website Development

• Documentation: technical specification, menu structure, form routing
• Access: hosting, domain, Bitrix24 admin panel
• Training: instructions for updating menu and promotions
• Support: 30 days after launch free of charge

Stages and Timeline

Total: 6–8 weeks. The main delay is usually content: food photography and text approval.

To get an estimate for your project, contact us — we will prepare a commercial proposal with timelines and costs. Order turnkey cafe website development and get a consultation from a Bitrix engineer.