In the dynamic realm of e-commerce, a captivating and distinctive online presence is essential for any business leveraging Shopware and its plugins. Shopware provides the flexibility to tailor your storefront. However, when it comes to aligning your Shopware setup seamlessly with your brand and vision, a pivotal decision arises: should you choose a custom theme or harness the power of plugins? In this technical guide, we’ll delve deep into this choice, exploring the intricacies and capabilities of both options.
Shopware comes with a predefined storefront theme, but its customization is limited to adjusting colors and logos directly through the administration panel. To truly stand out in the digital landscape and align your e-commerce platform with your business’s unique identity, you must venture beyond the default theme. This involves either creating a custom theme or extending the existing Shopware theme.
The Plugin Approach Extending the Shopware template can be achieved through two primary methods: plugins or custom themes. Here, we’ll focus on plugins, the foundation of Shopware’s extensibility.
A Shopware plugin is built upon the \Shopware\Core\Framework\Plugin class, empowering developers to tap into the platform’s extensive array of functions. This allows the creation of event subscribers, definition of custom data entities, and more. Such an approach provides a versatile toolbox for enhancing your Shopware instance.
Importantly, all functions available within a plugin can also be utilized within a theme. This means you can seamlessly integrate plugin functionalities into a theme, opening up a world of possibilities such as creating event subscribers, hooking into Shopware events, or establishing custom data entities directly within a theme.
In contrast to plugins, custom themes come with an additional layer of customization capabilities through the theme.json file, located in the src folder. This file acts as a blueprint for loading views, JavaScript, styles, and assets specific to your theme. Let’s dissect this file with a basic example:
{
"name": "CustomTheme",
"author": "Memo ICT",
"views": [
"@Storefront",
"@Plugins",
"@CustomTheme"
],
"style": [
"app/storefront/src/scss/overrides.scss",
"@Storefront",
"app/storefront/src/scss/base.scss"
],
"script": [
"@Storefront",
"app/storefront/dist/storefront/js/custom-theme.js"
],
"asset": [
"@Storefront",
"app/storefront/src/assets"
]
}
A standout feature of custom themes is their ability to introduce theme-specific variables within the theme.json file. These variables empower you to define fundamental colors reflecting your brand identity, rather than relying on Shopware’s default palette. Additionally, you can introduce your own variables for unique components or special footer links.
To harness theme variables, augment your theme.json file with a config section, as demonstrated below:
"config": {
"fields": {
"sw-color-brand-primary": {
"value": "#929292"
},
"sw-color-buy-button": {
"value": "#000000"
},
"sw-logo-desktop": {
"value": "/bundles/customtheme/images/logo.svg"
},
"social-facebook-link": {
"label": {
"en-GB": "Facebook page url",
"de-DE": "Facebook page url"
},
"type": "url",
"value": "",
"editable": true,
"scss": false
},
"social-instagram-link": {
"label": {
"en-GB": "Instagram page url",
"de-DE": "Instagram page url"
},
"type": "url",
"value": "",
"editable": true,
"scss": false
}
}
}
The values of above variables are editable through the administration of Shopware on SalesChannel level.
To use the variables in Twig you can use the following:
This enables seamless integration of your custom theme variables into your storefront’s frontend, creating a truly personalized shopping experience for your customers.
the choice between a custom theme and plugins in Shopware depends on your specific needs and objectives. While plugins provide a robust toolbox for extending functionality, custom themes offer unparalleled customization, including the introduction of theme-specific variables. By understanding the technical nuances of each approach, you can make an informed decision to enhance your business’s presence in the digital realm.
This enables seamless integration of your custom theme variables into your storefronts fronted creating a truly personalized shopping experience for your customers. In conclusion, the choice between a custom theme and plugins