Customization

This section will guide you through the process of customizing the template to your needs. The following topics will be covered:

1. Change Logo

The logo is located in the public directory. The logo is used in the MiddleNavbar component.

To chnage the logo:

Go to the public directory.
Replace the navlogo.png file with your logo.

To update the logo size:

Go to the src/ui/Nav/MiddleNavbar/index.tsx file.
Go to the 24 - 26 lines.
Update the width and height properties of the Image component.
The Image component is imported from the next/image package.
The Image component is wrapped in the Link component from the next/link package.
This is done to make the logo clickable and redirect to the home page.

Example

<Link href="/" className="md:py-2">
    <Image src="/yourlogo.png" alt="Logo" width={158} height={42} />
</Link>

2. Change Theme Color

Customize the theme colors by modifying the Tailwind CSS configuration. Open the Tailwind config file and update the color variables to your preferred choices.

The Tailwind config file is located in the root directory.
The Tailwind config file is named tailwind.config.js.
The color variables are located in the theme.extend.colors section.

Example

// tailwind.config.js
 
module.exports = {
    theme: {
        extend: {
            colors: {
                primary: "#ff5722",
                "primary-content": "#ffffff",
                secondary: "#27272a",
                "secondary-content": "#f4f4f5",
                neutral: "#18181b",
                "neutral-content": "#e4e4e7",
                "base-100": "#d4d4d8",
                "base-200": "#a1a1aa",
                "base-300": "#52525b",
                "base-content": "#3f3f46",
                success: "#059669",
                "success-content": "#d1fae5",
                warning: "#f59e0b",
                "warning-content": "#fef3c7",
                info: "#06b6d4",
                "info-content": "#F4F7FB",
                accent: "#056BF1",
                "accent-content": "#F0F9FF",
                error: "#FF7E85",
                "error-content": "#FEE2E2",,
            },
        },
    },
};

3. Change Font

Modify the font settings in the Tailwind CSS configuration. Follow the steps below to change the font:

Open the root src/context/provider.tsx file.
Check the 10 - 15 lines. You will see the Inter font being imported.
Replace the Inter font with your preferred font.
Check the 5 line. You will see how the font is being imported.
Replace the Inter font with your preferred google font.
Go to the tailwind.config.js file.
Check the fontFamily section. You will see the Inter font being used.
Replace the Inter font with your preferred font.

Provider Example

// src/context/provider.tsx
 
import { Inter } from 'next/font/google';
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
    subsets: ['latin'],
    display: 'swap',
    variable: '--font-inter',
});
 
const Provider = ({ children }: { children: ReactNode }) => {
    return (
        <html className={`${inter.variable}`}>
            <body>{children}</body>
        </html>
    );
};

Tailwind Config Example

// tailwind.config.js
 
module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', 'sans-serif'],
            },
        },
    },
};

ℹ️

Note We are using the Inter font as an example. You can use any font you want from Google Fonts (opens in a new tab). Just make sure to follow the steps above. Recommended follow the NextJS font setup with tailwind css documentation here (opens in a new tab).

4. Change Menu

Customize the menu by modifying the menu variable in the src/dictionaries/en.tsx file. The menu items are located in the header.menu section.

Example

// src/dictionaries/en.tsx
 
export const en = {
    header: {
        menu: [
            {
                name: 'Home',
                path: '/',
            },
            {
                name: 'About',
                path: '/about',
            },
            {
                name: 'Contact',
                path: '/contact',
            },
        ],
    },
};

ℹ️

Note If you are using multi language, you will need to update the menu items in the relevant language file. For example, if you are using the en language, you will need to update the menu items in the src/dictionaries/en.tsx file. If you are using the ar language, you will need to update the menu items in the src/dictionaries/ar.tsx file. And so on.

5. Change Default Language

To change the default language:

Go to the root i18n-config.ts file.
Update the defaultLocale property with your preferred language.

Example

// i18n-config.ts
 
export const i18nConfig = {
    locales: ['en', 'ar'],
    defaultLocale: 'en',
};

6. Update Language File

To update the language files:

Go to the src/dictionaries directory.
Open the language file you want to update.
Update the language file as needed.

ℹ️

Note If you are using multi language, you will need to update the language files in the relevant language file. For example, if you are using the en language, you will need to update the language files in the src/dictionaries/en.tsx file. If you are using the ar language, you will need to update the language files in the src/dictionaries/ar.tsx file. And so on.

7. Change Footer Menu

Customize the footer menu by modifying the menu variable in the src/dictionaries/en.tsx file. The footer have 4 columns, and 3 menu items in each column. The menu items are located in the footer section.

Example

// src/dictionaries/en.tsx
 
export const en = {
    footer: {
        info: {
            address: {
                title: 'Address',
                description: '3566 Bird Spring Lane, Houston Texs',
            },
            phone: {
                title: 'Phone',
                description: '+1 423 208 388',
            },
            email: {
                title: 'Email',
                description: 'hello@metashop.cm',
            },
        },
        quick_links: {
            title: 'Quick Links',
            data: [
                {
                    name: 'About Us',
                    link: '/about-us',
                    target: '_sef',
                },
                ...
            ],
        },
        account: {
            title: 'Account',
            data: [
                {
                    name: 'My Account',
                    link: '/dashboard',
                    target: '_sef',
                },
                ...
            ],
        },
        support: {
            title: 'Support',
            data: [
                {
                    name: 'Help Center',
                    link: '#',
                    target: '_sef',
                },
                ...
            ],
        },
        newsletter: {
            title: 'Newsletter',
            description:
                'Subscribe to our newsletter and get 20% off your first purchase',
            placeholder: 'Enter Email Address',
            buttonText: 'Subscrie',
        },
        copy_right: {
            description: '© 2024 MetaShop. All Rights Reserve.',
        },
    },
};

ℹ️

Note If you are using multi language, you will need to update the footer menu items in the relevant language file. For example, if you are using the en language, you will need to update the footer menu items in the src/dictionaries/en.tsx file. If you are using the ar language, you will need to update the footer menu items in the src/dictionaries/ar.tsx file. And so on.

8. Update Pages Static Content

To update the pages static content:

Go to the src/dictionaries directory.
Open the language file you want to update.
If you want to update the home page content, go to the home section. If you want to update the about-us page content, go to the about_us section. And so on. And so on.
Update the pages content as needed.

Example

// src/dictionaries/en.tsx
 
export const en = {
    /**
	  * Home Page Dictionary Here for English
	  */
    home: {
      ...
    },
    /**
     * About Us Page Dictionary Here for English
     */
    about_us: {
      ...
    },
    /**
     * Contact Us Page Dictionary Here for English
     */
    contact_us: {
      ...
    },
    ...
};

ℹ️

Note If you are using multi language, you will need to update the pages content in the relevant language file. For example, if you are using the en language, you will need to update the pages content in the src/dictionaries/en.tsx file. If you are using the ar language, you will need to update the pages content in the src/dictionaries/ar.tsx file. And so on.

Quick Start Guide Deploy to Vercel