Customization Guide

Learn how to customize your FoodKit template

← Back to Template

🎨 Customization Guide

This guide will help you customize the template for your business.

📍 Main Configuration Files

1. Colors & Fonts → src/styles/theme.css

All site colors and fonts are centralized here.

How to change the theme:

  1. Open the file src/styles/theme.css
  2. Find the @theme section at the beginning of the file
  3. Change the hexadecimal color values
  4. Save and the site will update automatically

You'll find them commented at the end of the theme.css file. Just copy and paste the values you want to use.

2. Site Content → src/content/*.ts

File Content
brand-config.ts Business name
hero-config.ts Main hero and buttons
menu-config.ts Product menu
about-config.ts "About Us" section
contact-config.ts Contact information
social-config.ts Social media
reviews-config.ts Customer reviews

3. Images → public/images/

Replace the images in this folder keeping the same file names, or update the paths in the configuration files.

🚀 Quick Steps to Customize

Step 1: Change Colors

# Edit src/styles/theme.css
# Change values of --color-primary-500, --color-secondary-500, etc.

Step 2: Change Business Information

# Edit src/content/brand-config.ts
export const brandData: BrandConfig = [object Object];

Step 3: Update Menu

# Edit src/content/menu-config.ts
# Modify products, prices and descriptions

Step 4: Change Images

# Replace images in public/images/
# Or update paths in *-config.ts files

🎨 Generate Color Palettes

If you need help creating professional color palettes:

  1. UI Colors (Recommended)
    https://uicolors.app/create
    Generates complete palettes from a single color
  2. Coolors
    https://coolors.co/
    To find harmonious combinations
  3. Adobe Color
    https://color.adobe.com/
    Professional color schemes

❓ Frequently Asked Questions

How do I change only the primary color?

Edit --color-primary-500 in src/styles/theme.css and use https://uicolors.app to generate the remaining shades (50-900).

Can I use different fonts?

Yes, change --font-title and --font-body in theme.css and update the import in src/layouts/Layout.astro.

How do I add more products to the menu?

Edit src/content/menu-config.ts and add objects to the products array in the desired category.

🆘 Support

If you have problems, check:

  • Files are properly saved
  • No syntax errors (commas, quotes, etc.)
  • Development server is running (npm run dev)

📸 Image Credits

The images used in this template are from the following sources:

⚖️ Legal Note: While Unsplash and Pexels do not require mandatory attribution, Flaticon does require it for its free license. It is recommended to add these credits in the footer of your website or create a dedicated credits page to comply with license requirements and give proper recognition to the creators.

Unsplash

Pexels

Icons

Ready to Customize?

Start building your perfect restaurant website today

View Template