Design & Customization

Global vs. Per-Language Styling

Stolik Menu gives you ultimate flexibility over how your translations look.
Global Menu Template: This sets the default style and layout for your entire menu.
Edit Styles For Language (Per-Language Template): Select a specific language from the dropdown to override the global settings. For example, you can set a dark theme for your English menu and a light theme for your Hebrew menu.
Reset to Template Defaults: If you ever mess up your custom colors or fonts, clicking this button safely resets the current language back to its pure, hardcoded template defaults.

Add Your Menu Logo

Personalize your digital menu by adding your restaurant’s logo directly to the header. Once you upload an image via the WordPress Media Library, the UI instantly unlocks controls to adjust the Logo Shape (Square, Circle, or Rounded), Max Width, and Position (Left, Center, Right).

Note: If you ever want to hide the logo, simply click the Remove Logo button.

Layouts

Choose the visual template that sets the tone for your menu. All templates share the same responsive card layout—categories stack vertically and individual dishes stretch to the full content width—while typography, colors, and accents adapt to each style.
Default keeps a bright card-based list, ideal for freemium users.
Modern Light applies sage greens, rounded cards, and contemporary typography.
Modern Dark delivers a neon-on-slate look suited for bars or evening venues.
Elegant Classic uses rich browns and gold highlights for fine-dining menus.
Minimal Clean offers airy spacing with muted neutrals for minimalist cafés.
Pick a template from the Design → Template selector and watch the live preview refresh instantly. Combine the template choice with the color and type controls below for a fully branded result.

Tip: Switching templates never changes your menu content. You can experiment freely click Save Changes only when you love the look.

Colors

Dial in a full palette that covers the container, menu cards, and the featured badge. When editing a specific language, any colors you pick here will only apply to that translation, allowing for completely unique, localized branding.
Accent Color drives borders, hover states, and interactive highlights. When you override it, the featured star badge can adopt the same tone (unless you keep the classic gold described below).
Featured Star Badge is controlled by the Show Featured Star toggle. Turn it off to hide the badge entirely, or leave it on and decide whether it follows the Accent Color or stays metallic by enabling Force Gold Star.
Background Color paints the menu canvas inside the rounded container without affecting the rest of the page.
Item Background Color and Item Border Color reshape standard dishes, letting you choose between crisp paper whites or tinted tiles.
Featured Item Background Color and Featured Item Border Color style promoted dishes separately so they pop against regular cards.
Category Title, Item Title, Price, and Description Colors fine-tune text contrast to stay readable under any lighting.

All pickers use the native WordPress interface and accept HEX or RGBA values, making it simple to match existing brand guidelines.

Typography

Fine-tune readability for every device.
Adjust Heading Font Size and Body Font Size with responsive sliders.
Pick Heading Font Family and Body Font Family from the curated list (Google Fonts compatible). A fallback stack keeps text legible if a font loads slowly.
Toggle Uppercase Category Titles for a classic printed-menu feel.

Changes apply in real time within the live preview so you can confirm line wrapping before saving.

Typography for RTL & Special Languages

If your menu serves customers in languages like Hebrew, Arabic, Japanese, or Chinese, standard English fonts might not render specific characters correctly.
Stolik Menu allows you to define a Custom Font Stack to ensure every language looks perfect.

How to set a multi-language font:

• Go to Design & Style.
• Navigate to Category Navigation Styling or Menu Item Styling.
• In the Navigation Font (or Name/Description Font) dropdown, select Custom Font.
• In the text field that appears, list your fonts separated by commas.

The “Font Stack” Strategy

Browsers read fonts from left to right. If the first font doesn’t have a character (e.g., a Hebrew letter), the browser tries the next one. This allows you to mix fonts for different languages.
Example for a Mixed Menu (English + Hebrew):
“Open Sans”, “Heebo”, “Arial Hebrew”, sans-serif

How it works: The plugin will use Open Sans for English text. When it encounters Hebrew text, it switches to Heebo. If Heebo isn’t available, it falls back to Arial Hebrew.

Recommended System Fonts

You can use these safe, built-in system fonts without installing anything extra:

• Hebrew: “Arial Hebrew”, “David”, sans-serif
• Arabic: “Arial”, “Tahoma”, sans-serif
• Japanese: “Hiragino Kaku Gothic Pro”, “Meiryo”, sans-serif
• Chinese: “PingFang SC”, “Microsoft YaHei”, sans-serif

Pro Tip: If you want to use a specific web font (like Google Fonts’ Cairo for Arabic or Rubik for Hebrew), make sure your WordPress theme loads that font file first. Then, simply type its name into the Custom Font field in Stolik Menu.

Using Custom Fonts (e.g., Google Fonts)

Stolik Menu gives you the complete freedom to use any custom font for your menu’s typography to match your restaurant’s branding or local language requirements (like Chinese, Arabic, or Japanese).

Here is how to easily apply a free Google Font to your menu in two simple steps:

• Step 1: Import the Font to WordPress To keep the plugin lightweight and adhere to WordPress best practices, you should load the font via your theme. Go to your WordPress Dashboard, navigate to Appearance → Customize → Additional CSS, and paste your Google Fonts @import rule at the very top of the text box. (Example for a Chinese calligraphy font): @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
• Step 2: Apply it in Stolik Menu Go to Restaurant Menu → Design & Style. For any typography setting (e.g., Navigation Font, Item Title Font), click the Font Family dropdown and select “Custom Font”. In the text field that appears next to it, type the exact font family name, making sure to include quotes if the name has spaces. (Example): 'Ma Shan Zheng', cursive

Save your settings, and your public menu will instantly reflect the new, beautiful typography!

Pro Tip: Why doesn’t Stolik Menu have its own Custom CSS box?
You might wonder why we recommend using the WordPress Customizer instead of adding a dedicated “Custom CSS” field directly inside the plugin. The answer is Performance.

Plugins that inject their own CSS fields often require extra database queries on every page load, which slows down your website. By utilizing the native WordPress Additional CSS feature, your styles are properly cached, minified, and loaded efficiently by your theme. Stolik Menu is built to be blazing fast, and we strictly follow WordPress best practices to keep your site running at top speed!

Category Navigation Styling

Take full control over your menu’s filter bar with the new Category Navigation Styling section, available for the Modern, Dark, Elegant, and Minimal templates. Located in the Design & Style tab, this feature allows you to customize the typography (font family, size, and weight) and colors of the category buttons to perfectly match your brand. You can define distinct styles for both standard and active button states. For seamless consistency, if you leave the “Active Button Background” field empty, the navigation chips will automatically inherit your global Accent Color.

Custom CSS

Need pixel-perfect tweaks? Use the Custom CSS panel at the Theme.

/* Example: Add drop shadow to cards */
.menu-item {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

Rules are scoped to the Stolik Menu namespace, so you can experiment without affecting the rest of your theme.

Shortcode Styling

The primary embed uses the shortcode [stolik_menu]. It accepts these styling-related attributes:

• lang or locale — render a specific language version when you maintain localized designs.
• template — force a template/layout combination for that embed (e.g., [stolik_menu template="minimal"]).

Combine shortcode attributes with the global Design settings to create special landing pages (holiday menus, tasting events) without changing the default menu.

General Settings

Don’t forget to check the General Settings panel at the top of the Design page. This is where you set your menu’s Currency Code (e.g., $, €, PLN) and toggle the visibility of the Language Switcher on the public frontend.