Skip to content
  • Documentation >
  • Templating >
  • Layout >
  • Customize storefront layout

Customize storefront layout

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.

Template customization example

As an example, to change the cart display when it contains no products, you need to override vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/maincart/maincart_empty_cart.html.twig template.

To do it, create your own template in templates/theme/storefront/cart/component/maincart/maincart_empty_cart.html.twig.

You can customize it, for example, to remove a "Continue shopping button" in the following way:

1
2
3
4
5
6
7
{% trans_default_domain 'ibexa_cart' %}

{% block empty_content %}
    <h3 class="ibexa-store-maincart__empty-cart-headline">
        {{ 'cart_view.empty.headline'|trans|desc('Your shopping cart is empty') }}
    </h3>
{% endblock %}

Available templates

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

The most important templates are:

Template Component
storefront/layout.html.twig main layout of the storefront

User

Template Component
storefront/security/layout.html.twig main layout for the login and registration pages
storefront/security/login.html.twig user login page
storefront/security/register.html.twig user registration page

General components

Template Component
component/logo.html.twig shop logo
component/region_switcher.html.twig switcher for regions
component/language_switcher.html.twig switcher for regions
component/currency_switcher.html.twig switcher for currencies

Cart

Template Component
cart/component/maincart/maincart.html.twig general view of the main cart
cart/component/minicart/minicart.html.twig minicart (cart icon displayed at the top of the page)
cart/component/add_to_cart/add_to_cart.html.twig "add to cart" element
cart/component/summary/summary.html.twig cart summary

Extend Twig template

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{% extends '@IbexaCart/themes/standard/cart/component/minicart/minicart.html.twig' %}

{% block content %}
    <img
        class="ibexa-store-minicart__image"
        src="{{ asset('bundles/ibexastorefront/img/icons/cart.svg') }}"
        alt="{{ 'minicart.icon.alt'|trans|desc('Cart') }}"
    />
    {{ parent() }}
{% endblock %}

To avoid self-reference, @IbexaCart is used instead of @ibexadesign.

Built-in components are not styled, so you can freely customize them according to your needs. You can add CSS classes to the base Twig using attributes' objects. For example, if you want to add custom CSS classes to quantity input in Add to Cart component, use the following:

1
2
3
{% set quantity_input_attr = {
    class: 'ibexa-store-input ibexa-store-input--number ibexa-store-add-to-cart__quantity-input',
} %}

Every element is also inside its own block so you can override the whole block.

Extending JavaScript

In case of the JavaScript component, you should import the original class and extend it:

1
2
3
import Minicart from '@ibexa-cart/src/bundle/Resources/public/js/component/minicart';

export default class StorefrontMinicart extends Minicart {}

The example below shows how to add a "Clear" button support to the maincart:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import Maincart from '@ibexa-cart/src/bundle/Resources/public/js/component/maincart';

export default class StorefrontMaincart extends Maincart {
    constructor(options) {
        super(options);

        this.clearCartBtn = this.container.querySelector('.ibexa-store-maincart__clear-cart-btn');

        this.onCartClear = this.onCartClear.bind(this);
    }

    attachStorefrontMaincartListeners() {
        this.clearCartBtn.addEventListener('click', this.onCartClear, false);
    }

    onCartClear() {
        this.cart.empty();
    }
}

Next, add the button in the Twig file.

Main cart

You must customize the base widget for the main cart view, because out-of-the-box it consists only of the container with items. Each item consists of <div> wrappers with quantity input and remove item button. With customization you can add layout containers and items' data such as title or price.

Available Twigs:

  • @IbexaCart/themes/standard/cart/component/maincart/maincart.html.twig

with parameters:

  • attr
  • item_template_attr
  • items_container_attr
  • item_template_params
  • item_template_path

  • net_price_template

  • @IbexaCart/themes/standard/cart/component/maincart/maincart_item.html.twig

with parameters:

  • cart_entry_quantity
  • item_attr
  • quantity_input_attr
  • remove_item_btn_attr

JavaScript class:

  • @ibexa-cart/src/bundle/Resources/public/js/component/maincart

Add to Cart

Available Twig:

  • @IbexaCart/themes/standard/cart/component/add_to_cart/add_to_cart.html.twig

with parameters:

1
2
3
4
5
- `is_disabled`
- `attr`
- `product_code`
- `quantity_input_attr`
- `add_to_cart_btn_attr`

JavaScript class:

  • @ibexa-cart/src/bundle/Resources/public/js/component/summary

Minicart

Available Twig:

  • @IbexaCart/themes/standard/cart/component/minicart/minicart.html.twig

with parameters:

1
2
3
- `count`
- `attr`
- `counter_attr`

Checkout

Template Component
checkout/layout.html.twig main checkout layout
checkout/component/step.html.twig individual checkout step
checkout/component/quick_summary.html.twig checkout summary

Tip

For templates related to product rendering, see Customize product view.

Summary

Template Component
cart/component/summary/summary.html.twig main summary layout
cart/component/summary/summary_item.html.twig item summary layout