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

{% 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
cart/component/quick_order/quick_order.html.twig	quick order

Extend Twig template

{% 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 aren't styled, so you can freely customize them according to your needs. You can add CSS classes to the base Twig by using attribute objects. For example, to add custom CSS classes to quantity input in the "Add to Cart" component, use the following:

{% 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:

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:

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

You could extend this widget by adding variant selectors.

Available Twig:

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

with parameters:

- `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

You could modify the minicart widget by changing its icon, title or other elements.

Available Twig:

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

with parameters:

- `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

You could extend the summary widget to let buyers navigate from this view, for example, to checkout, or back to shopping, by adding respective buttons.

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

Quick order

You can modify the quick order page by changing its form, title or other elements.

Available Twigs:

• @IbexaCart/themes/standard/cart/component/quick_order/quick_order.html.twig with parameters:

  • form_themes
  • form_start_attr
  • form_start_vars
  • main_widget_vars
  • add_to_cart_btn_attr
  • form_end_vars

• @IbexaCart/themes/standard/cart/component/quick_order/quick_order_form_fields.html.twig with parameters per block, block's names are generated based on fields in Symfony form:

  • quick_order_widget block
    • main_attr
    • widget_attr
  • quick_order_file_row block
    • file_attr
    • file_vars
  • quick_order_entries_row block
    • entries_wrapper_attr
    • add_entry_btn_attr
  • quick_order_entries_widget block
    • entries_attr
    • form_widget_vars
  • quick_order_entry_row block
    • entry_attr
    • delete_entry_btn_attr
    • code_attr
    • code_vars
    • quantity_attr
    • quantity_vars
    • errors_vars

JavaScript class:

• @ibexa-cart/src/bundle/Resources/public/js/component/quick.order