How to change the logo

The store logo is rendered directly in the Header.tsx component using an inline <svg> inside a <Link> pointing to /.

🔍 Location in code

• File: components/layout/Header.tsx

• Line: around line 22–80

• It's wrapped in:

<Link to="/" className="d-inline-block py-lg-2" style={{ width: '10rem' }} aria-label="sylius logo">
  {/* SVG logo here */}
</Link>

How to replace the logo

Option 1 – Replace inline SVG

1. Go to components/layout/Header.tsx

2. Replace the entire <svg>...</svg> block with:

<img src="/logo.png" alt="Store logo" className="img-fluid" />

This assumes you place your custom logo in the public/ folder as /public/logo.png.

Option 2 – Use logo from external URL

<img src="https://yourcdn.com/logo.svg" alt="Your logo" width={160} />

🛠 Tips

• You can also control logo size with style={{ width: '10rem' }} or Tailwind/Bootstrap classes.

• For responsive layout, wrap logo with Bootstrap utilities like img-fluid or d-none d-md-block if needed.

• If you want to move the logo to a CMS field or config file later, extract it into a separate Logo.tsx component.