Course description

“The deeper you dive into the software, the more you will like it.”

In this training, Jisse Reitsma teaches everything you need to know to work with the frontend of Shopware 6. Not only will this course make you familiar with the technologies specific to the system, but you’ll get up and running with Shopware PWA and learn how to create your own local plugins.

This training is ideal for anyone with development experience interested in learning more about Shopware. No prior experience with Shopware is required.

What will I learn?

  • What you need to know to get started working with the Shopware 6 frontend
  • How to add your own custom theme
  • How Bootstrap, SCSS and Twig work within Shopware
  • How to implement a custom JavaScript plugin
  • What you need to know to get started with Shopware PWA
  • Reusable functions in Shopware, Vue Storefront Next and NuxtJS
  • How to create a PWA plugin
  • How the CMS integrated with Shopware PWA

Target audience

  • Frontend developers
  • Agencies

Course curriculum

  • 01
    Introduction
    Show details
    • Welcome to the Shopware 6 Frontend Development course!
    • Introduction to frontend development
    • Working with Twitter Bootstrap
    • Introducing SCSS
  • 02
    Creating a theme
    Show details
    • Creating a new theme
    • Disable caching while developing
    • Explaining the theme.json file
    • Modifying CSS variables
    • Hot Module Reloading
    • Adding your SVG logo
    • Using flatpickr for the birthday field
  • 03
    Twig
    Show details
    • Understanding Twig templating
    • Shopware-specific Twig tags
    • Overriding a logo
    • Adding a custom field to the footer
    • Removing the phone number from the contact form
    • Using Twig filters
  • 04
    JavaScript
    Show details
    • Compiling JavaScript in the Production Template
    • Adding NPM packages to your JavaScript plugin
    • Overriding an existing JavaScript plugin
  • 05
    Progressive Web App (PWA)
    Show details
    • Introducing Shopware PWA
    • Shopware PWA installation
    • Introduction to NuxtJS
    • Overriding a component
    • Composables in Shopware PWA
    • Creating a local plugin
    • Using Shopware plugins in the PWA
    • Creating a Shopware plugin for PWA
    • Nuxt.js theming
    • First peek at CMS architecture

How you benefit

  • First-hand information

    Our courses are led by enthusiastic instructors who are not only deeply rooted in Shopware, but have an active role in shaping the software themselves.

  • Accelerated learning

    Your time is valuable. Our courses are designed to take you on the fast track towards becoming an expert in creating custom extensions or themes.

  • Perfect preparation

    The online trainings are your most valuable resource for preparing to become a Shopware-certified developer or template designer.

Have you finished the course?

We offer courses on a variety of topics. Check out the overview of free courses and continue building your Shopware knowledge today!

To the courses