Templates · Blade or Twig


As described at routing, every route endpoint will use a specific twig or blade template to render the page. Every template will receive several variables, that you can use to build the page.

Home Page

Path Route Blade Twig
/ shop.home home.blade.php home.twig

When opening the root url of a shop, the home template gets rendered. By default, there are no variables injected into this view.

If you need data (like categories or products) on your homepage, then you need to specify them in the config/vanilo.json file:

    "cloud": {
        "home": {
            "inject": {
                "products": "product.latest(4)",
                "brands": "taxonomy.bySlug(brands)"

The example above will take the 4 latest products (created most recently) and the taxonomy "brands" and inject them into the home view as $products and $brands variables:

{{-- home.blade.php --}} <h2>Shop By Brand</h2> @foreach($brands->getRootLevelTaxons() as $brand) <h3><a href="{{ url_of($brand) }}">{{ $brand->name }}</a></h3> @endforeach <h2>Latest Products</h2> @foreach($products as $product) <article> <h3><a href="{{ url_of($product) }}">{{ $product->title }}</a></h3> <img src="{{ $product->getFirstMediaUrl('default', 'medium') ?: asset('/img/default/product_medium.jpg') }}" /> </article> @endforeach

Taxon (Category) Page

Path Route Blade Twig
/c/{taxonomy}/{taxon} shop.taxon.show taxon/show.blade.php taxon/show.twig
/c/{taxonomy}/{parent}/{taxon} shop.taxon.show.with-parent taxon/show.blade.php taxon/show.twig

The category page displays a single taxon, and - almost always - the products within that taxon.

The following variables are available in the taxon show template:

$taxon The taxon that is currently being shown
$products The collection of products within the taxon
$filters The filters for the given page
$taxonomies The collection of all taxonomies in the shop

Product List

Path Route Blade Twig
/p shop.product.index product/index.blade.php product/index.twig

This page is rarely used, but can be useful for shops with a smaller number of products, or when there's no need for categorization. The template receives the same variables as the taxon show page, but the $taxon variable is always null:

$taxon NULL
$products The collection of products
$filters The filters for the given page
$taxonomies The collection of all taxonomies in the shop

Product Filtering

Product Page



Inject Global Variables


Template Helper Functions

There are several helper functions that you can use in your templates

  • format_price()
  • product_title()
  • url_of
  • page_url()
  • configuration_to_text()
  • md2html()