HowTo - 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 a 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 exemplary procedure below.


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

 <h1>{{ spyCms('PlaceholderContactPageHeader') }} </h1>
    <div>
        <strong>{{ spyCms('PlaceholderContactHeader') }} </strong> <br>
        <strong>{{ spyCms('PlaceholderPhoneNr') }} </strong> +1 (000) 000-0000 <br>
        <strong>{{ spyCms('PlaceholderEmail') }}  </strong> info@companyname.com <br>
        <strong>{{ spyCms('PlaceholderStoreAddress') }}  
        </strong><br>

        123 Demo Street<br>
        Demo City<br>
        1234<br>
    </div>

The text in the defined placeholders will be 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 Templates & Slots Feature Overview.

Templates with slots are universal. In the Back Office, a content manager can:

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>
</div>

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} - template name.
  • {ModuleWidget} - name of the respective Content Item Widget module.
  • {template-folder} - 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 should extend from the corresponding file in SprykerShop/Yves/{ModuleWidget}/Twig/.

Pyz/Yves/{ModuleWidget}/Twig/{ModuleWidgetTwigFunction}.php

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}:

Pyz/Yves/{ModuleWidget}/{ModuleWidget}Factory.php

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}(
            $twig,
            $localeName,
            $this->getContentBannerClient()
        );
    }
}