Added doc for storefront groups

Author: mnocon

docs/templating/components.md

@@ -8,9 +8,12 @@ month_change: true
 Twig Components are widgets (for example, **My dashboard** blocks from Headless edition) and HTML code (for example, a tag for loading JS or CSS files) that you can inject into the existing templates to customize and extend the user interface.
 They are combined into groups that are rendered in designated templates.
 
-Built-in Twig Component groups are available for the [back office](custom_components.md), but you can create your own for use anywhere.
+Twig Component groups are available for:
 
-To learn which groups are available in a given view, use the [integration with Symfony Profiler](#symfony-profiler-integration).
+- [back office](custom_components.md)
+- [storefront](customize_storefront_layout.md)
+
+To learn which groups are available in a given view, use the [integration Symfony Profiler](#symfony-profiler-integration).
 
 ## Create Twig Component
 

docs/templating/layout/customize_storefront_layout.md

@@ -11,6 +11,24 @@ To customize your shop, you can override either whole templates, or specific com
 The built-in templates belong to the `storefront` [theme](design_engine.md).
 To override any of them, copy its directory structure in your template directory.
 
+## Customize with Twig Components
+
+You can customize parts of the storefront by using [Twig components](components.md).
+This allows you to inject your own widgets, extending the storefront behavior.
+
+The available groups for the storefront are:
+
+| Group name | Template file |
+|---|---|
+| `storefront-before-maincart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/maincart/maincart.html.twig` |
+| `storefront-after-maincart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/maincart/maincart.html.twig` |
+| `storefront-before-minicart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/minicart/minicart.html.twig` |
+| `storefront-after-minicart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/minicart/minicart.html.twig` |
+| `storefront-before-add-to-cart` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/add_to_cart/add_to_cart.html.twig` |
+| `storefront-after-add-to-cart` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/add_to_cart/add_to_cart.html.twig` |
+| `storefront-before-summary` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/summary/summary.html.twig` |
+| `storefront-after-summary` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/summary/summary.html.twig` |
+
 ## Template customization example
 
 As an example, to change the cart display when it contains no products, you need to override `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/maincart/maincart_empty_cart.html.twig` template.