---
title: "Customize the Output"
package: "Sylius Shipping Estimate Plugin"
version: "1.x"
canonical_url: "https://www.babdev.com/open-source/packages/shipping-estimate-plugin/docs/1.x/customize-the-output"
package_supported: true
version_released: false
notice:
  - "Version 1.x of Sylius Shipping Estimate Plugin has not been released yet. Its API may change before release."
---
# Customize the Output

Using both Symfony's template overrides and the `SyliusThemeBundle` theme overrides, the plugin layouts can be customized to suit your website.

## Frontend Layout

The frontend layout is generated by the `@BabDevSyliusShippingEstimatePlugin/Cart/Estimator/_widget.html.twig` template. You can customize this by copying the `src/Resources/views/Cart/Estimator/_widget.html.twig` file to one of the following locations, depending on your site's configuration:

- `themes/<my-theme>/templates/bundles/BabDevSyliusShippingEstimatePlugin/Cart/Estimator/_widget.html.twig` if using the `SyliusThemeBundle`
- `templates/bundles/BabDevSyliusShippingEstimatePlugin/Cart/Estimator/_widget.html.twig` if **NOT** using the `SyliusThemeBundle`

### Messages Used By The JavaScript

The messages the JavaScript shows are read from `data-message-*` attributes on the estimator form, allowing them to be fully translated:

| Attribute                         | Translation key                                                                             |
|-----------------------------------|---------------------------------------------------------------------------------------------|
| `data-message-incomplete-form`    | `babdev_sylius_shipping_estimate.ui.please_fill_in_all_fields_to_estimate_your_shipping`    |
| `data-message-calculator-error`   | `babdev_sylius_shipping_estimate.ui.sorry_there_was_a_temporary_error_calculating_shipping` |
| `data-message-estimate-cancelled` | `babdev_sylius_shipping_estimate.ui.the_shipping_estimate_was_cancelled`                    |
| `data-message-generic-error`      | `babdev_sylius_shipping_estimate.ui.error_getting_shipping_estimates_please_try_again`      |

To change the wording, override those translation keys in your application's translation files. If you override the widget template, keep these attributes; the script falls back to its own English strings when one is missing.

Note the cancellation message is only a fallback. When an event listener passes a reason to `cancelEstimate()`, that reason is displayed instead.

## JavaScript

The JavaScript file at `src/Resources/public/js/babdev-sylius-shipping-estimator.js` is designed to be able to be loaded standalone after the core Sylius UI assets (a requirement because of the use of jQuery) and by design is only loaded on the cart summary page when there is an active cart. If you would like to customize the JavaScript, you should copy the JavaScript file from this plugin into your application's assets directory, include it within your own build process, and disable the block listener for the Sylius template event that loads the JavaScript file by adding the below snippet to your `config/packages/_sylius.yaml` file:

```yaml
sylius_ui:
    events:
        sylius.shop.layout.javascripts:
            blocks:
                shipping_estimator_javascript:
                    enabled: false
```