---
title: Shopware Frontend Development Essentials | Shopware Community Hub
description: >-
  Learn Shopware Storefront development through Twig templating, SCSS styling,
  JavaScript interactivity, custom theme creation, and testing strategies. This…
canonical_url: 'https://hub.shopware.com/learn/path/shopware-frontend-development-essentials'
---

# Shopware Frontend Development Essentials

# Shopware Frontend Development Essentials

Changing the appearance of your Shopware shop is an essential part of creating a **unique shopping experience** for your customers. The **Shopware Frontend Development Essentials** learning path will guide you through the **fundamentals of Storefront development** including how to build and customize **themes**, **templates**, **styles**, and **Storefront JavaScript plugins**.

You will learn how to:

- Create and customize **Shopware themes**.
- Override **Twig templates**, **SCSS variables**, and **Storefront JavaScript plugins**.
- Debug, test, and maintain your Storefront efficiently.

This course is designed for developers who want to get started with Shopware frontend development and build custom solutions for their online shops. Whenever we mention "Shopware" in this learning path, we are referring to Shopware 6.

## Prerequisites

Before diving into this learning path, make sure you have:

- A running local **Shopware 6** development environment (**6.5–6.7**) with a PHP version compatible with your Shopware version.
- Solid basics of **HTML/CSS** and **JavaScript**.

**Only relevant for the fourth course (Testing and Debugging):**

- A running **Shopware 6.7** installation.
- **Node.js** (version 16 or higher) and **npm** or **pnpm**.
- The **AcademyStorefrontController** plugin installed in your Shopware instance.

## Courses

## Courses
- [Shopware Storefront Templating](/learn/course/shopware-storefront-templating): Get started with Shopware frontend development by learning the basics of Twig and how to customize Storefront templates.
- [SCSS and Storefront JavaScript](/learn/course/shopware-frontend-scss-and-javascript): Learn how to customize the look and behavior of your Shopware shop using SCSS and Storefront JavaScript.
- [Shopware Theme Development](/learn/course/shopware-frontend-theme-development): Learn how to create and customize a Shopware theme to apply your own design, override templates, and adjust styles.
- [Shopware Storefront Testing and Debugging](/learn/course/shopware-frontend-testing-and-debugging): Learn how to test and debug Twig, SCSS, and Storefront JavaScript files in Shopware to ensure a stable and maintainable Storefront.