Template Hooks & App Blocks
To build a thriving, modular e-commerce ecosystem, SitePack themes must be fully compatible with third-party applications (such as review aggregators, loyalty programs, search boosters, and custom banners).
SitePack accomplishes this integration using Template Hooks paired with App Blocks. By embedding lightweight, semantic hooks in standardized layout coordinates across your theme files, you reserve structural space for apps to inject dynamic HTML, stylesheets, and scripts seamlessly — without ever touching your theme's source code.
Architectural Concept: How App Injection Works
┌──────────────────────────────────────────────┐
│ sitepack-app.json │
│ (App declares target: product_price_after) │
└──────────────────────────────────────────────┘
│
▼ (Injected at compile-time)
┌──────────────────────────────────────────────┐
│ templates/product.twig │
│ ... │
│ <h3>{{ sitepack_price(product.priceCents) }}</h3> │
│ {% app_block 'product_price_after' %} │ <── App renders review stars here!
│ ... │
└──────────────────────────────────────────────┘
When a merchant installs an app, the app can hook into any of our predefined standard coordinates. During page compilation, the SitePack engine checks which apps are installed and renders their content directly into the matching {% app_block %} tag in your template files.
This process is server-side and edge-cached, meaning zero performance drag or client-side layout shifts (CLS) commonly seen in client-side script tag injectors.
Technical Syntax: Implementing Hooks
app_block is a Twig tag, not a function — always use the {% ... %} block syntax, never {{ app_block(...) }}:
{# Defining an injection block inside snippets/product-card.twig #}
<div class="product-card-info">
<h3 class="card-title">{{ product.name }}</h3>
{# Let review apps inject star ratings directly beneath the title #}
{% app_block 'product_card_info_after' %}
<span class="price">{{ sitepack_price(product.priceCents) }}</span>
</div>
If no app is installed for a given hook name, the tag simply renders nothing — it's always safe to leave hooks in place.
Exhaustive Coordinates Directory
This is the complete, up-to-date list of hooks implemented in the Official Theme Skeleton (verified directly against its .twig files). To pass platform quality review and list your theme on the public SitePack Theme Marketplace, keep all of these hook points in their corresponding template files — third-party apps are built and tested against these exact coordinates.
1. Global Core Hooks (layouts/base.twig)
These hooks manage global scripts, font loader links, analytics pixels, cookie managers, and customer tracking integrations:
head_after: Immediately before the closing</head>tag.body_start: Immediately after the opening<body>tag.body_end: Immediately before the closing</body>tag (after all footer/script includes).
2. Header Snippet Hooks (snippets/header.twig)
header_before: Immediately before the opening<header>element.header_after: Immediately after the closing</header>element.
3. Footer Snippet Hooks (snippets/footer.twig)
footer_before: Immediately before the opening<footer>element.footer_after: Immediately after the closing</footer>element.
4. Homepage Hooks (templates/index.twig)
index_before: At the very top of the homepage content (e.g., for announcement banners).index_after: At the absolute bottom of the homepage (e.g., for Instagram feeds).
5. Product Details Template Hooks (templates/product.twig)
These are the most active coordinates, heavily utilized by dynamic e-commerce widgets (reviews, upsells, trust badges, size guides):
product_details_before: At the start of the product's primary info column.product_details_after: At the absolute end of the product info column.product_gallery_before: Before the product image gallery block.product_gallery_after: After the product image gallery block.product_image_before: Immediately before the main product image grid.product_image_after: Immediately after the main product image grid (ideal for gallery/zoom extensions).product_price_before: Before the price display block.product_price_after: Immediately after the price (perfect for payment installment widgets, e.g. Klarna/Afterpay badges).product_meta_before: Before the brand/SKU meta line.product_meta_after: After the brand/SKU meta line.product_stock_before: Before the live stock indicator.product_stock_after: After the live stock indicator.product_short_description_before: Before the short description block.product_short_description_after: After the short description block.product_usps: A dedicated slot for rendering Unique Selling Points (trust icons, guarantees, shipping perks).product_description_before: Immediately before the rich-text product description accordion.product_description_after: Immediately after the product description accordion.product_specifications_before: Before the technical specifications accordion.product_specifications_after: After the technical specifications accordion.product_downloads_before: Before the downloads (PDF/manual) accordion.product_downloads_after: After the downloads accordion.product_form_before: Inside the add-to-cart form, before the input fields (e.g., variant selectors).product_form_after: Inside the add-to-cart form, after the "Add to Cart" button (great for stock alert badges).product_recommendations_before: Before the cross-sell / related-products section.product_recommendations_after: After the cross-sell / related-products section.
6. Catalog Listing Hooks (templates/category.twig)
category_before: At the very start of the category page content.category_after: At the very end of the category page content.
7. Product Card Snippet Hooks (snippets/product-card.twig)
This snippet is reused across the homepage, category listings, and product recommendation grids — hooks here apply everywhere a product card is rendered:
product_card_before: Immediately before the.product-cardwrapper element.product_card_after: Immediately after the closing.product-cardwrapper.product_card_image_before: Immediately before the product thumbnail image container.product_card_info_before: Before the title/price info region of the card.product_card_info_after: After the title/price info region of the card.
8. Shopping Cart Hooks (templates/cart.twig)
cart_before: Above the shopping cart content.cart_after: Below the shopping cart content.cart_item_before: Inside the cart item loop, directly before each line item row.cart_item_after: Inside the cart item loop, directly after each line item row.cart_item_image_before: Before the product thumbnail inside a cart line item.cart_item_image_after: After the product thumbnail inside a cart line item.cart_item_quantity_before: Before the quantity input of a cart line item.cart_item_quantity_after: After the quantity input of a cart line item.cart_buttons_after: Immediately after the checkout buttons in the cart summary (ideal for safe-checkout trust badges).
9. Blog Listing Hooks (templates/blog.twig)
blog_before: At the top of the blog listing page.blog_after: At the bottom of the blog listing page.blog_article_before: Before each article summary card in the listing loop.blog_article_after: After each article summary card in the listing loop.blog_article_image_before: Before the article thumbnail image in the listing.blog_article_image_after: After the article thumbnail image in the listing.
10. Single Article Hooks (templates/article.twig)
article_before: At the very top of the single post view.article_after: At the very bottom of the single post view (great for comment widgets).article_image_before: Above the main post banner image.article_image_after: Below the main post banner image.article_content_before: Immediately before the post's rich-text HTML content.article_content_after: Immediately after the post's rich-text HTML content.article_tag_before: Before each tag in the post's tag list loop.article_tag_after: After each tag in the post's tag list loop.
11. Tag Listing Hooks (templates/tag.twig)
tag_before: At the top of a tag's article listing page.tag_after: At the bottom of a tag's article listing page.tag_article_before: Before each article summary card in the tag listing loop.tag_article_after: After each article summary card in the tag listing loop.
12. Customer Portal / Account Hooks (templates/account.twig)
account_before: At the top of the customer account page.account_after: At the bottom of the customer account page.account_dashboard_start: At the start of the account dashboard container (after the page title).account_dashboard_end: At the end of the account dashboard container.account_order_before: Before each order row in the order history loop.account_order_after: After each order row in the order history loop.account_address_before: Before each address card in the address list loop.account_address_after: After each address card in the address list loop.
13. Static Content Hooks (templates/page.twig)
page_before: Above the static page content.page_after: Below the static page content.
14. Legal Page Hooks (templates/legal.twig)
legal_page_before: Above the legal document content (Terms, Privacy Policy, Returns Policy, etc.).legal_page_after: Below the legal document content.
15. Landing Page Hooks (templates/landing-page.twig)
landing_before: At the top of the landing page, before the hero section.landing_after: At the bottom of the landing page, after the features section.
16. 404 Error Page Hooks (templates/404.twig)
error_404_before: Above the "page not found" message block.error_404_after: Below the "return home" navigation link.
Adding Your Own Custom Hooks
Nothing stops you from adding {% app_block %} tags at additional coordinates specific to your theme's design (e.g., a custom hero_after slot on a homepage banner). Custom hooks work identically to standard ones — apps simply need to know the hook name to target it. Document any custom hook names clearly in your theme's own README so merchants and app developers relying on your theme know where they can extend it.
Exploring Further:
Now that you have configured modular app blocks, learn how to localize your templates into multiple languages in the Theme Translations Guide!