---
title: Getting Started With Twig | Shopware Community Hub
description: >-
  Create a small storefront template override with Twig and verify it safely on
  a product detail page.
canonical_url: 'https://hub.shopware.com/learn/unit/getting-started-with-twig'
---

# Getting Started With Twig

<LearningObjectives>

- Understand what Twig does in the Shopware storefront.
- Create or clone a plugin for a first template override.
- Mirror a storefront template path and verify a safe Twig change on a product detail page.

</LearningObjectives>

# Getting Started With Twig

Twig renders Shopware's storefront HTML on the server. If you completed [Shopware Backend Development Essentials](https://hub.shopware.com/learn/path/shopware-backend-development-essentials), you have already seen Twig in controller templates.

Now you use Twig from the storefront side. You create or clone a small plugin, mirror one storefront template path, and add a visible check on the product detail page (PDP).

The goal is not to redesign the storefront yet. The goal is to make one small, safe Twig override and prove that Shopware loads it.

<Callout title="Prerequisites" type="warning">

You need a running Shopware 6.7 dev environment. Set `APP_ENV=dev` in `.env` and run `bin/console cache:clear` after plugin changes.

</Callout>

## Target Result

By the end of this learning unit, you will have:

- A plugin named `AcademyFrontendEssentials`.
- A Twig file that mirrors the product detail template path.
- A small banner above the product name on the PDP.
- A safe first check that does not replace the full storefront layout.

This gives you a controlled starting point before the next learning unit explains how to find and override the right Twig block.

## What Twig Does in Shopware

Twig is the template engine that Shopware uses to render storefront HTML. In plugins and apps, Twig templates live under `src/Resources/views`.

When you customize the storefront, you usually do not replace a whole page. Instead, you extend an existing Shopware template and override one specific block. That keeps the original structure and lets your plugin add only the part you need.

[Official Twig documentation](https://twig.symfony.com/doc/)

## Step 1: Set Up the Example Plugin

You need a plugin where your Twig override can live.

### Option A: Create the Plugin Yourself

```shell
bin/console plugin:create AcademyFrontendEssentials Academy
```

Answer **no** to optional generators. For this first Twig unit, you only need the basic plugin structure.

### Option B: Clone the Demo Plugin

If you want to use the prepared course state, clone the demo plugin and check out the tag for this unit:

```shell
git clone https://github.com/ShopwareAcademy/AcademyFrontendEssentials.git custom/plugins/AcademyFrontendEssentials
git -C custom/plugins/AcademyFrontendEssentials checkout tags/LU-01-basic-templating
```

### Install and Activate

```bash
bin/console plugin:refresh
bin/console plugin:install AcademyFrontendEssentials --activate --clearCache
```

After this step, Shopware can load the plugin. Next, you add the Twig file that Shopware should use for the product detail page.

## Step 2: Mirror the Template Path

To override or extend a storefront template, **mirror the path** from the Storefront bundle inside your plugin.

| Core template | Your plugin path |
|---------------|------------------|
| `vendor/shopware/storefront/.../element/cms-element-product-name.html.twig` | `src/Resources/views/storefront/element/cms-element-product-name.html.twig` |

When the path matches, Shopware can include your plugin template in the storefront template inheritance chain.

## Step 3: Add a Safe Twig Override

For your first Twig check, avoid global templates such as `base.html.twig`. A mistake there can affect the whole storefront.

Instead, extend the **product detail** template and add a visible banner above the product name:

Create `src/Resources/views/storefront/element/cms-element-product-name.html.twig`:

```twig
{% sw_extends '@Storefront/storefront/element/cms-element-product-name.html.twig' %}

{% block element_product_name_inner %}
    <div class="academy-twig-check alert alert-info mb-3">
        Twig override is working.
    </div>
    {{ parent() }}
{% endblock %}
```

This code does three important things:

1. `sw_extends` keeps the original Shopware product name element template as the base.
2. `element_product_name_inner` targets only the product name area.
3. `parent()` keeps the original product name and adds your banner before it.

## Step 4: Verify the Result

Open any **product detail page**. You should see the info banner above the product name.

<Callout title="Expected result" type="success">

**Prove it works:** The banner appears on the PDP; navigation, header, and footer remain unchanged.

</Callout>

![Hello World](assets/images/twig-validation.jpg)

### Troubleshooting

- Plugin not installed/activated → run `plugin:install --activate`
- Wrong file path or filename (`cms-element-product-name.html.twig`, not `.html`)
- Cache not cleared → `bin/console cache:clear`

<ArticleQuestionnaire>
  <ArticleQuestionnaireQuestion>Why should you avoid overriding base_body for a first Twig test?</ArticleQuestionnaireQuestion>
  <ArticleQuestionnaireAnswer>Twig does not support base templates</ArticleQuestionnaireAnswer>
  <ArticleQuestionnaireAnswer correct>It replaces the entire shop body and breaks the normal storefront layout</ArticleQuestionnaireAnswer>
  <ArticleQuestionnaireAnswer>Shopware does not load base.html.twig</ArticleQuestionnaireAnswer>
</ArticleQuestionnaire>

## Summary

In this learning unit, you learned:

- Twig renders Shopware storefront HTML on the server.
- A storefront customization should start with a small, scoped template override.
- Mirroring the template path lets Shopware find your plugin template.
- `sw_extends` and `parent()` let you extend a template without removing the original content.
- A product detail page is a safe place to verify your first Twig change.

**Next:** [Twig blocks](https://hub.shopware.com/learn/unit/twig-blocks) — find and override the right block.