Create CMS templates

Edit on GitHub

This document describes how to create CMS templates for Yves.

CMS templates are usually project-specific. To create them, some Storefront design work needs to be done, usually in collaboration between a business person and frontend project developer.

CMS page template

CMS page template is a Twig file that, when applied to a Storefront page, defines its design and layout.

To learn how the template is created, check the following exemplary procedure:

  1. Create the Twig template src/Pyz/Shared/Cms/Theme/default/templates/contact_page.twig:
<h1>CONTACT US </h1>
<strong>  Get in touch </strong>
<strong>Phone number : </strong> +1 (000) 000-0000
<strong>Email : </strong>
        <strong> Visit our store </strong><br>
        123 Demo Street<br>
        Demo City<br>
  1. Define placeholders for translation:
<!-- CMS_PLACEHOLDER : "PlaceholderContactPageHeader" -->
    <!-- CMS_PLACEHOLDER : "PlaceholderContactHeader" -->
    <!-- CMS_PLACEHOLDER : "PlaceholderPhoneNr" -->
    <!-- CMS_PLACEHOLDER : "PlaceholderEmail" -->
    <!-- CMS_PLACEHOLDER : "PlaceholderStoreAddress" -->

 <h1>{{ spyCms('PlaceholderContactPageHeader') }} </h1>
        <strong>{{ spyCms('PlaceholderContactHeader') }} </strong> <br>
        <strong>{{ spyCms('PlaceholderPhoneNr') }} </strong> +1 (000) 000-0000 <br>
        <strong>{{ spyCms('PlaceholderEmail') }}  </strong> <br>
        <strong>{{ spyCms('PlaceholderStoreAddress') }}  

        123 Demo Street<br>
        Demo City<br>

The text in the defined placeholders is replaced at runtime by the glossary keys assigned to them.

A content manager can apply this template when creating a CMS page in the Back Office.

Template with slots

Template with slots is a Twig file that defines the layout of slots across a Storefront page and has at least one slot assigned.

Create a template with slots:

  1. Create a Twig template as described in CMS Page Template.
  2. For each slot that you want to have in the template, insert a slot widget.
  3. Import template and slot lists. Learn about the lists in the Correlation section of the Templates & Slots feature overview.

Templates with slots are universal. In the Back Office, a content manager can apply this template when creating a CMS page or creating a category.

You can assign the template with slots to other page types only on a code level.

CMS Block template

CMS block template is a Twig file that, when applied to a CMS Block, defines its design and layout.

Create the Twig template—src/Pyz/Shared/CmsBlock/Theme/default/template//hello.twig.

<!-- CMS_BLOCK_PLACEHOLDER : "helloBlockText" -->
<div class="cms-block">
	<h1>Hello World!</h1>
	<p>{{ spyCmsBlockPlaceholder('helloBlockText') | raw }}</p>

A content manager can apply this template when creating a CMS block in the Back Office.

Content item widget template

Content item widget template is a Twig file that defines the layout of the content item it renders on Storefront.

By default, two content item widget templates are shipped per each content item:

  • Banner widget
  • Abstract Product List widget
  • Product Set widget
  • File widget

Create a content item widget template:

Depending on the content item widget you create the template for, make sure to install the respective Content Item Widget module:

  1. Create src/Pyz/Yves/{ModuleWidget}/Theme/default/views/{template-folder}/{new-template}.twig, where:
    • {new-template} is the template name.
    • {ModuleWidget} is the name of the respective Content Item Widget module.
    • {template-folder} is the template folder name. Based on the content item widget, choose:
      • banner
      • cms-product-abstract
      • content-product-set
      • content-file

The default templates located on the core level of each module can be used as examples.

  1. Modify the template configuration in Pyz/Yves/{ModuleWidget}/Twig/{ModuleWidgetTwigFunction}.php:
    • Add the template identifier.
    • Based on the template identifier, add a path to the template.

{ModuleWidgetTwigFunction}.php must extend from the corresponding file in SprykerShop/Yves/{ModuleWidget}/Twig/.


namespace \Pyz\Yves\{ModuleWidget}\Twig;

class {ModuleWidgetTwigFunction} extends \SprykerShop\Yves\{ModuleWidget}\Twig\{ModuleWidgetTwigFunction}
    protected const WIDGET_TEMPLATE_IDENTIFIER_NEW_TEMPLATE = 'new-template';

    * @return array
    protected function getAvailableTemplates(): array
        return array_merge(parent::getAvailableTemplates(), [
            static::WIDGET_TEMPLATE_IDENTIFIER_NEW_TEMPLATE => '@{ModuleWidget}/views/{template-folder}/{new-template}.twig',
  1. Override the method in the factory that creates the object of {ModuleWidgetTwigFunction}:


namespace \Pyz\Yves\{ModuleWidget};

use \Pyz\Yves\{ModuleWidget}\Twig\{ModuleWidgetTwigFunction};

class {ModuleWidget}Factory extends \SprykerShop\Yves\{ModuleWidget}\{ModuleWidget}Factory
    * @param \Twig\Environment $twig
    * @param string $localeName
    * @return \Pyz\Yves\{ModuleWidget}\Twig\{ModuleWidgetTwigFunction}
    public function createContentBannerTwigFunction(Environment $twig, string $localeName): \SprykerShop\Yves\{ModuleWidget}\Twig\{ModuleWidgetTwigFunction}
        return new {ModuleWidgetTwigFunction}(