Use custom CSS

CSS is a design language that is used on most websites. You can customize your shop’s design by using custom CSS code.
 
With custom CSS you can for instance change the visibility of elements

The changes are valid for your whole shop, not only the page that is opened in the editor while you edit the CSS code. However, custom CSS code does not have any impact on the design of your shop’s checkout.
 
The preferred way of changing your shop’s colors is changing them as described in the article Changing the colors of your shop. If you change colors via custom CSS this may override these color settings.
 

Custom CSS code may alter your shop’s design and functionality in undesired ways and also may have negative effects on the responsive design of your shop.
Only experienced users should enter their own CSS code. Check your shop carefully after all modifications. Please also note that the automatically applied updates of your shop may affect your shop's program code. Therefore, regularly check whether the CSS code you have entered still fulfils its purpose and whether the design or functionality has been affected by the update.

 

How to add custom CSS code

1. In the administration area in the main menu, select Editor.
 
2. On the right side at the bottom of your shop select the brush symbol .
 
3. Select </>.
 
4. Add your custom CSS code.
 
5. Select Save.
 
6. Select View your shop and check if the changes you made are displayed correctly and if any problems occur.
 

Your CSS code is only applied to the currently selected style. If you change the style, the CSS code is not applied to your shop any more. If you switch back to the style you entered the CSS code for, the CSS code is applied again to your shop.
Your shop software automatically checks if the CSS code you entered follows the rules for CSS.
When you are changing colors, you might have to adapt the margin and padding of certain elements.
For the custom CSS code it is not necessary to enter a stylesheet type.