Add custom styles
Overview
All components contain own templates and some style. Of course, you may want to use your custom styles in your component or module. In this guide, we got you covered on how to add those custom styles to your components.
Prerequisites
However, this guide does not explain how to create a custom component, so head over to the official guide about creating a custom component to learn this first.
In addition, you need to have a basic knowledge of CSS and SCSS in order to use custom styles. This is though considered a basic requirement and won't be taught in this guide.
Example: Custom cms block
We will base our guide on an example: Let's use a custom component printing out "Hello world!". So first of all, create a new directory for your
sw-hello-world. As said before, more information about that topic, such as where to create this directory, can be found in Add a custom component.In your component's directory, create a new
index.js file and register your custom component sw-hello-world:1
Shopware.Component.register('sw-hello-world', {
2
template
3
});
Copied!
Just like most components, it has a custom template. First we create the template file named
sw-hello-world.html.twig:This template now has to define the basic structure of your component. In this simple case, you only need a parent container and two sub-elements, whatever those are.
1
{% block example_block %}
2
<div class="sw-hello-world">
3
<p>Hello world!</p>
4
</div>
5
{% endblock %}
Copied!
You've got a parent
div containing the content of your template, an abstract with the text "Hello world!" in this case. Next up, you need to import that template in your index.js file of your component:1
// Import for your template
2
import template from './sw-hello-world.html.twig';
3
​
4
Shopware.Component.register('sw-sw-hello-world', {
5
template
6
});
Copied!
Add custom styles to your component
Your component should come with a custom
.scss file, which you need to create now. Don't forget to import it in your index.js file, if not done yet:1
import template from './sw-hello-world.html.twig';
2
​
3
// Import for your custom styles
4
import './sw-hello-world.scss';
5
​
6
Shopware.Component.register('sw-sw-hello-world', {
7
template
8
});
Copied!
In there, simply use a grid to display your elements next to each other. You set a CSS class for your block, which is named after the component. In there, you can set your styles as you need. To mention an example, we want the text in the
div with the class sw-hello-world to have a blue color:1
.sw-hello-world {
2
color: blue;
3
}
Copied!
That's it for this component! This way, you're able to add your own styles to your component now.
Import variables
Because of Sass usage, you are able to import external variables and use them in your classes. Below you see an example which uses Shopware's SCSS variables to color the text of the component in shopware's shade of blue.
1
/* Import statement */
2
@import "~scss/variables";
3
​
4
.sw-hello-world {
5
/* Usage of variable */
6
color: $color-shopware-brand-500;
7
}
Copied!
More interesting topics
Last modified 18d ago
Copy link
Edit on GitHub