---
title: Asynchronous Storefront Rendering | Shopware Community Hub
description: >-
  Learn how to style and extend the Shopware storefront with the App System.
  This course covers theme configuration, template overrides and App Scripts
  for…
canonical_url: 'https://hub.shopware.com/learn/course/asynchronous-storefront-rendering'
---

# Asynchronous Storefront Rendering

<LearningObjectives>

- **Use** storefront templating techniques to change the storefront display.
- **Understand** what App Scripts are and how they work.
- **Attach** custom data to a page via Twig.
- **Collect** and **render** custom data within a Twig template.

</LearningObjectives>

# Asynchronous Storefront Rendering

Welcome back! In the [previous course](/learn/course/shopware-app-fundamentals), you learned the basics of the App System.

In this course, you will learn how to display your custom data in the storefront. To achieve this, we will cover **App Scripts**, **storefront template overrides**, and **attaching custom data to Twig templates**.

## How This Course Works: "Code-Along"

This course follows a **code-along** approach using the demo App [ShopwareStoreTracker](https://github.com/ShopwareAcademy/ShopwareStoreTracker) as an example.

The App **ShopwareStoreTracker** collects and displays information about Physical Stores belonging to the business.

Each learning unit is linked to a specific [Git Tag](https://git-scm.com/book/en/v2/Git-Basics-Tagging), so you can stay in sync with every step of the development process. You can check out a tag at any point with:

```bash
git checkout tags/[tag_name]
```

<Callout title="Tip" type="info">

If you see an error like `error: Your local changes to the following files would be overwritten by checkout` when checking out a tag, you may need to reset local changes with: `git reset --hard HEAD`. Be careful: This will remove uncommitted changes.

</Callout>

### Course Conventions

Some terminology used in this course may be new to you. Here are the most important terms:

- **Shopware Root**: The base directory of your Shopware installation.
- **App Root**: The folder containing your App (usually under `custom/apps/YourAppName`).
- **App-Server Root**: The base directory of your App's backend server (can be anywhere on your machine).
- **Semantic Versioning**: Version numbers follow the format `Major.Minor.Patch` (e.g., `3.1.5`).

<Callout title="Terminal Commands in the Course" type="info">

All commands are shown in a Linux shell. The tools we use (`composer`, `symfony`, `git`, ...) are cross-platform and work with most modern Operating Systems.

</Callout>

## Learning Units

## Units
- [Displaying Custom Entity Data on the Storefront](/learn/unit/app-displaying-custom-data): Learn how to display custom entity data in the storefront by configuring your App as a theme and using template overrides.
- [Sourcing Data via App Scripts](/learn/unit/app-sourcing-data-via-app-scripts): Learn how to use App Scripts to load data from the database and attach it to storefront templates.