Template Hooks
📙 What You'll Learn
How Template Hooks Work
.twig template file at the exact point where you want custom content to appear. When the page renders, Salla's hooks system mounts any content registered to that slot.Hooks class that powers Component Hooks. When a Twig template calls {% hook 'head:start' %}, it triggers the mount() method internally, injecting any registered content into that slot at render time.Head Hooks
<head> element contains information about the webpage that is not displayed directly — meta tags, SEO data, stylesheets, and scripts. Head hooks give you a clean way to inject content into this section without touching the core layout file.| # | Hook | Description |
|---|---|---|
| 1 | {% hook 'head:start' %} | Fires at the very start of the <head> section |
| 2 | {% hook head %} | Fires inside the <head> section |
| 3 | {% hook 'head:end' %} | Fires at the very end of the <head> section |
Body Hooks
<body> tag, or add CSS classes to it for page-specific styling.| # | Hook | Description |
|---|---|---|
| 1 | {% hook 'body:classes' %} | Adds CSS classes to the <body> tag |
| 2 | {% hook 'body:start' %} | Fires at the very start of the <body> section |
| 3 | {% hook 'body:end' %} | Fires at the very end of the <body> section |
Product Page Hooks
| # | Hook | Description |
|---|---|---|
| 1 | {% hook 'product:index.items.start' %} | Fires at the start of the product listing items |
| 2 | {% hook 'product:index.items.end' %} | Fires at the end of the product listing items |
| 3 | {% hook 'product:single.description.start' %} | Fires before the product description on a single product page |
| 4 | {% hook 'product:single.description' %} | Fires inside the product description area |
| 5 | {% hook 'product:single.description.end' %} | Fires after the product description on a single product page |
| 6 | {% hook 'product:single.form.start' %} | Fires before the add-to-cart form on a single product page |
| 7 | {% hook 'product:single.form.end' %} | Fires after the add-to-cart form on a single product page |
Cart Page Hooks
| # | Hook | Description |
|---|---|---|
| 1 | {% hook 'cart:items.start' %} | Fires at the start of the cart items list |
| 2 | {% hook 'cart:items.end' %} | Fires at the end of the cart items list |
| 3 | {% hook 'cart:summary.start' %} | Fires at the start of the cart summary section |
| 4 | {% hook 'cart:summary.end' %} | Fires at the end of the cart summary section |
| 5 | {% hook 'cart:submit.start' %} | Fires before the cart submit button |
| 6 | {% hook 'cart:submit.end' %} | Fires after the cart submit button |
Thank You Page Hooks
| # | Hook | Description |
|---|---|---|
| 1 | {% hook 'thank-you:start' %} | Fires at the very start of the thank you page |
| 2 | {% hook 'thank-you:items.start' %} | Fires before the order items list |
| 3 | {% hook 'thank-you:items.end' %} | Fires after the order items list |
| 4 | {% hook 'thank-you:end' %} | Fires at the very end of the thank you page |
thank-you:end hook also injects two buttons — Go Back to the Store and Create Salla Store — but only for stores on the Basic plan.Brand Page Hooks
| # | Hook | Description |
|---|---|---|
| 1 | {% hook 'brands:index.items.start' %} | Fires at the start of the brand listing items |
| 2 | {% hook 'brands:index.items.end' %} | Fires at the end of the brand listing items |
| 3 | {% hook 'brands:single.details.start' %} | Fires before the single brand details section |
| 4 | {% hook 'brands:single.details.end' %} | Fires after the single brand details section |
| 5 | {% hook 'brands:single.items.start' %} | Fires before the product items on a single brand page |
| 6 | {% hook 'brands:single.items.end' %} | Fires after the product items on a single brand page |
Blog Page Hooks
| # | Hook | Description |
|---|---|---|
| 1 | {% hook 'blog:index.items.start' %} | Fires at the start of the blog listing items |
| 2 | {% hook 'blog:index.items.end' %} | Fires at the end of the blog listing items |
| 3 | {% hook 'blog:single.items.start' %} | Fires at the start of a single blog post |
| 4 | {% hook 'blog:single.items.end' %} | Fires at the end of a single blog post |
Customer Page Hooks
| # | Hook | Description |
|---|---|---|
| 1 | {% hook 'customer:profile.form.start' %} | Fires at the start of the customer profile form |
| 2 | {% hook 'customer:profile.form.fields.start' %} | Fires before the profile form fields |
| 3 | {% hook 'customer:profile.form.fields.end' %} | Fires after the profile form fields |
| 4 | {% hook 'customer:profile.form.submit.start' %} | Fires before the profile form submit button |
| 5 | {% hook 'customer:profile.form.submit.end' %} | Fires after the profile form submit button |
| 6 | {% hook 'customer:profile.form.end' %} | Fires at the end of the customer profile form |
| 7 | {% hook 'customer:notifications.items.start' %} | Fires at the start of the customer notifications list |
| 8 | {% hook 'customer:notifications.items.end' %} | Fires at the end of the customer notifications list |
| 9 | {% hook 'customer:wishlist.items.start' %} | Fires at the start of the customer wishlist items |
| 10 | {% hook 'customer:wishlist.items.end' %} | Fires at the end of the customer wishlist items |
| 11 | {% hook 'customer:orders.index.items.start' %} | Fires at the start of the customer orders list |
| 12 | {% hook 'customer:orders.index.items.end' %} | Fires at the end of the customer orders list |
| 13 | {% hook 'customer:orders.single.details.start' %} | Fires before the single order details |
| 14 | {% hook 'customer:orders.single.details.end' %} | Fires after the single order details |
Component Hooks
component:{component.path}.start
component:{component.path}.endDynamic Page Hooks
my-custom-page, you can hook into it with:Where to Go From Here
| Next Step | Description |
|---|---|
| Component Hooks | Learn how to interact with Salla components via JavaScript as an app developer |
| Hooks Overview | Go back to the overview to understand how both hook types connect |
Modified at 2026-05-07 11:36:04