Skip to content
  • Documentation >
  • Guide >
  • Content rendering >
  • Render content >
  • Render product

Render a product

To customize the template for a product, first, you need to override the existing shop templates:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ezdesign:
    design_list:
        my_design: [my_theme, eshop_base_theme, eshop_ui_base_theme, transaction_theme, checkout_base_theme]
    templates_theme_paths:
        eshop_base_theme:
            - '%kernel.project_dir%/vendor/ezsystems/ezcommerce-shop/src/Silversolutions/Bundle/EshopBundle/Resources/views'
        eshop_ui_base_theme:
            - '%kernel.project_dir%/vendor/ezsystems/ezcommerce-shop-ui/src/bundle/Resources/views/themes/standard'
        checkout_base_theme:
            - '%kernel.project_dir%/vendor/ezsystems/ezcommerce-checkout/src/bundle/Resources/views/themes/base_theme/'
        transaction_theme:
            - '%kernel.project_dir%/vendor/ezsystems/ezcommerce-transaction/src/Siso/Bundle/ShopFrontendBundle/Resources/views/themes/base_theme/'

The built-in templates that are responsible for rendering a product are stored in vendor/ezsystems/ezcommerce-shop-ui/src/bundle/Resources/views/themes/standard/Catalog. You can override any partial template in the folder.

For example, to modify the general layout of the product page, create a templates/themes/my_theme/Catalog/product_layout.html.twig file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{% extends '@ezdesign/pagelayout_front.html.twig' %}

{% block all_content %}
    <div class="ezcommerce-product">
        <div class="ezcommerce-product__top">
            <div class="ezcommerce-product__main">
                <h2>{{ catalogElement.name }}</h2>

                {% if catalogElement.sku is defined %}
                    <div>{{ 'product.sku'|trans({'%sku%': catalogElement.sku})|desc('SKU: %sku%') }}</div>
                {% endif %}

                <img src="/{{ st_imageconverter(ses_assets_main_image(catalogElement), 'thumb_medium') }}">

                {% if catalogElement.shortDescription %}
                    <div>{{ catalogElement.shortDescription|raw }}</div>
                {% endif %}

                {% if catalogElement.longDescription %}
                    <div>{{ catalogElement.longDescription|raw }}</div>
                {% endif %}

            </div>
            <div class="ezcommerce-product__sidebar">
                {% block sidebar %}{% endblock %}
            </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

In the template you can access the product via the catalogElement object.