Skip to content
  • Documentation >
  • Templating >
  • Render content >
  • Customize product view

Customize product view

The built-in storefront offers a set of templates covering all functionalities of a shop, divided into smaller components.

To customize your shop, you can override either whole templates, or specific components. The built-in templates belong to the storefront theme. To override any of them, copy its directory structure in your template directory.

Note

By default, the anonymous user doesn't have permissions to view products. To change this, add the Product/View Policy to the Anonymous role.

Template customization example

As an example, to modify the template used to display the product price, you need to override vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/storefront/component/price/price.html.twig template.

To do it, create your own template in templates/themes/storefront/storefront/component/price/price.html.twig file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{% trans_default_domain 'storefront' %}

{% set price = product.price %}

{% if price is not null %}
    <div class="ibexa-store-price">
        {{ 'ibexa_storefront.product_card.price.title'|trans({ '%price%': price })|desc('your price %price%') }}
    </div>
{% else %}
    <div class="ibexa-store-price">
        {{ 'ibexa_storefront.product_card.price.unavailable'|trans()|desc('price currently unavailable') }}
    </div>
{% endif %}

This template adds a "price currently unavailable" label when a product doesn't have a price specified.

Available templates

All the storefront templates are located in vendor/ibexa/storefront/src/bundle/Resources/view/themes/storefront.

The most important templates related to product rendering are:

Template Component
storefront/catalog.html.twig main catalog and category view
storefront/component/product_view.html.twig full-screen view of a single product

Single product view

Template Component
storefront/component/product_assets.html.twig image asset preview and thumbnail list
storefront/component/product_attributes.html.twig listing of product attributes

Product list

Template Component
storefront/component/product_grid.html.twig grid for presenting products in the catalog
storefront/component/product_search_filters.html.twig panel with search filters
storefront/component/product_search_query.html.twig search box
storefront/component/product_search_sort.html.twig sorting drop-down

Images

Template Component
storefront/component/image_placeholder.svg.twig product image placeholder

Tip

For templates related to general storefront layout, cart and checkout, see Customize storefront layout.