SyliusCon 2025
Early Bird Deal
LogoLogo
🛣️ Roadmap💻 Sylius Demo💬 Community Slack
  • Sylius Documentation
  • Sylius Plugins
  • Sylius Stack
  • đź“–Sylius 2.0 Documentation
    • Organization
      • Release Cycle
      • Backwards Compatibility Promise
      • Sylius Team
      • Sylius Roadmap
  • Getting Started with Sylius
    • Installation
    • Basic Configuration
    • Shipping & Payment
    • First Product
    • Customizing the Shop
    • Customizing Business Logic
    • Using API
    • Installing Plugins
    • Deployment
    • Summary
  • The Book
    • Introduction to Sylius
    • Installation
      • System Requirements
      • Sylius CE Installation
        • Sylius CE Installation with Docker
      • âž•Sylius Plus Installation
      • Upgrading Sylius CE
      • Upgrading Sylius Plus
    • Architecture
      • Architecture Overview
      • Architectural Drivers
      • Resource Layer
      • State Machine
      • Translations
      • E-Mails
      • Contact
      • Fixtures
      • Events
    • Configuration
      • Channels
      • Locales
      • Currencies
    • Customers
      • Customer & ShopUser
      • âž•Customer Pools
      • AdminUser
      • Addresses
        • Countries
        • Zones
        • Addresses
        • Address Book
    • Products
      • Products
      • Product Reviews
      • Product Associations
      • Attributes
      • Pricing
      • Catalog Promotions
      • Taxons
      • Inventory
      • âž•Multi-Source Inventory
      • Search
    • Carts & Orders
      • Orders
      • Cart flow
      • Taxation
      • Adjustments
      • Cart Promotions
      • Coupons
      • Payments
      • đź§©Invoices
      • Shipments
    • Support
    • Contributing
      • Contributing Code
        • Submitting a Patch
        • ⚠️Security Issues
        • Coding Standards
        • Conventions
        • Sylius License and Trademark
      • Contributing Translations
      • Key Contributors
  • The Customization Guide
    • Customizing Models
      • How to add a custom model?
      • How to add a custom translatable model?
    • Customizing Forms
      • How to add a live form for a custom model?
    • Customizing Styles
    • Customizing Validation
    • Customizing Menus
    • Customizing Templates
    • Customizing Translations
    • Customizing Flashes
    • Customizing State Machines
    • Customizing Grids
    • Customizing Fixtures
    • Customizing API
    • Customizing Serialization of API
    • Customizing Payments
      • How to integrate a Payment Gateway as a Plugin?
  • 🧑‍🍳The Cookbook
  • How to resize images?
  • How to add one image to an entity?
  • How to add multiple images to an entity?
  • Sylius 1.X Documentation
    • đź““Sylius 1.x Documentation
Powered by GitBook
LogoLogo

Developer

  • Community
  • Online Course

About

  • Team

© 2025 Sylius. All Rights Reserved

On this page
  • Logo
  • Step 1: Add Your Custom Logo
  • Step 2: Embed the Logo in the Template
  • Step 3: Override the Template with Sylius Twig Hooks
  • Step 3 (Alternative Approach): Override the Template with Template Overriding
  • Step 4: Final Result
  • Next Steps: Introducing Custom Business Logic

Was this helpful?

Edit on GitHub
  1. Getting Started with Sylius

Customizing the Shop

PreviousFirst ProductNextCustomizing Business Logic

Last updated 7 months ago

Was this helpful?

Sylius stands out from other eCommerce platforms not only because of its vibrant community and clean codebase but also due to its exceptional developer experience. Its flexibility and ease of customization allow you to adapt the platform to meet your unique business needs.

Let’s explore how you can leverage these features to make a simple yet important customization: replacing the default Sylius logo with your store’s custom logo.

Logo

The default Sylius templates are clean and elegant, but you might want to make your store unique by customizing it with your brand’s logo. Here’s how you can replace the default Sylius logo:

Step 1: Add Your Custom Logo

  1. Copy your logo file to the following directory:

    assets/shop/images/logo.png
  2. Next, you need to import the logo in the entry.js file located at:

    assets/shop/entry.js
  3. Add the following line to import the logo:

    import './images/logo.png';
  4. After making this change, run the following command to rebuild the assets:

    yarn build

Step 2: Embed the Logo in the Template

Now, let’s create the template that is responsible for displaying the logo. All templates are supposed to be managed and organized in the /templates directory. Your new template might look like this:

<img src="{{ asset('build/app/shop/images/logo.25de7998.png', 'app.shop') }}" alt="Logo"/>

Step 3: Override the Template with Sylius Twig Hooks

Sylius 2.0 introduces Twig Hooks for customization. First, use the browser’s developer console to identify the element you want to change. For the logo, the relevant block is:

In our case, the following block is relevant:

<!-- BEGIN HOOK | name: "sylius_shop.homepage.index.header.content.logo, sylius_shop.base.header.content.logo" -->
<!-- BEGIN HOOKABLE | hook: "sylius_shop.base.header.content.logo", name: "content", template: "@SyliusShop/shared/sylius_logo.html.twig", priority: 0 -->

In summary, a hook is a specific location within the template where you can attach or override custom content. A hookable refers to the individual element (such as a template or component) that is linked to the hook. You can assign multiple hookables to a single hook, allowing for flexible customization.

Since we want to override the logo, we need to reference our custom logo template in the appropriate hook and hookable configuration. A custom configuration for this might look like the following:

sylius_twig_hooks:
    hooks:
        sylius_shop.base.header.content.logo:
            content:
                template: 'header/content/logo/content/logo.html.twig'

Place your custom logo template in the specified path. You can customize the directory structure, but following Sylius’ hierarchy is recommended for future consistency.

Step 3 (Alternative Approach): Override the Template with Template Overriding

If you prefer not to use Twig Hooks, you can override the Sylius template directly, the old way.

Identify the Template: The original logo template is located at:

<vendor_path>/templates/shared/logo.html.twig

Override It: Create a new file with the same name in the following directory:

templates/bundles/SyliusShopBundle/shared/logo.html.twig

Step 4: Final Result

After following either method, your custom logo should now be displayed on your store.

Next Steps: Introducing Custom Business Logic

Congratulations! You’ve successfully customized a Sylius template. Let’s take things a step further by introducing your business logic into the system.

Ensure the second argument in the asset() function is correct for the app context. For more details, check the page.

Sylius Twig Hooks is a completely new concept introduced in Sylius 2.0. You can find dedicated documentation on this topic .

For more information on customizing templates or Sylius template events, check out the chapter and the documentation.

Managing Assets
here
Customizing Templates
Managing Assets
DIrect view from the browser