in Web & Tech

Shopware 5 Theming 101

First things first:

  1. In the Theme Manager in the backend add a new theme that inherits from Responsive
  2. It will be saved to themes/Frontend/Mytheme
  3. To add your own stylesheets to your theme put a file called all.less here: themes/Frontend/Mytheme/frontend/_public/src/less/all.less. It will automatically be compiled by Shopware’s own LESS processor
  4. To add your own scripts to your theme put them in themes/Frontend/Mytheme/frontend/_public/src/js/ and them to the $javascript array in themes/Frontend/Mytheme/Theme.php (snippet below)
  5. To immediately see your custom scripts and styles disable compiler cashing and CSS and JS compression in the settings of the Theme Manager

Adding a JavaScript file to your Shopware 5 Theme:

<?php
/**
 * Javascript files which will be used in the theme
 *
 * @var array
 */
protected $javascript = array(

    // Third party plugins / libraries
    'src/js/app.js',
);

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)