---
title: Adding Code After Klevu()
slug: klevu-magento-v4/frontend-theme-js-adding-code-after-klevu
docTags: 
createdAt: 2024-08-06T13:41:13.196Z
---

There are 2 ways to achieve this:

- [Set the value via your theme](https://docs.klevu.com/apis/smart-search-analytics-events#Ai6mR). Use this if the value;
  - is different depending on the theme (you use multiple themes in your store).
  - you only have one theme.
- [Set the value via a custom module](https://docs.klevu.com/apis/smart-search-analytics-events#Ai6mR). Use this if the value;
  - depends on values stored in your database.
  - depends on more complex business logic.
  - is the same across all your themes and you have a lot of themes that would require an update.

### How Code is added after `Klevu(klevuSettings)`

`Klevu(klevuSettings)` is added to your page head via layout xml here `module-m2-frontend/view/frontend/layout/default_head_blocks.xml`.
Specifically in block `Klevu_Frontend.js_settings` which adds 2 empty contain blocks, so you can inject your own code before and after `klevu(klevuSettings)`.

The template that generates the settings is `module-m2-frontend/view/frontend/templates/html/head/js_settings.phtml`.

:::CodeblockTabs
module-m2-frontend/view/frontend/templates/html/head/js\_settings.phtml

```php
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript', 'id' => 'klevu_init'],
    content: "\nif(typeof klevuSettings !== 'undefined'){klevu(klevuSettings);}\n",
    textContent: false,
) ?>

<?php
/**
 * Inject javascript into klevu_frontend.init_after 
 * to make changes after klevu() is called
 */
?>
<?= $block->getChildHtml('klevu_frontend.init_after') ?>
```
:::

***

## Adding Code Via Theme

[Magento theme structure documentation](https://developer.adobe.com/commerce/frontend-core/guide/themes/structure/).

1. In your theme create a module Klevu\_Frontend, `app/code/design/frontend/Vendor/theme/Klevu_Frontend`
2. Create a layout file to add your blocks to our contain `klevu_frontend.init_after`
   `app/code/design/frontend/Vendor/theme/Klevu_Frontend/layout/default_head_blocks.xml`

:::CodeblockTabs
app/code/design/frontend/Vendor/theme/Klevu\_Frontend/layout/default\_head\_blocks.xml

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="klevu_frontend.init_after">
            <block name="Vendor_Theme.klevu.init_after"
                   template="Klevu_Frontend::klevu/init_after.phtml"
                   before="-"/>
        </referenceBlock>
    </body>
</page>

```
:::

3\. Create the template file that will contain your customisations `app/code/design/frontend/Vendor/theme/Klevu_Frontend/templates/klevu/init_after.phtml`

:::CodeblockTabs
app/code/design/frontend/Vendor/theme/Klevu\_Frontend/templates/klevu/init\_after.phtml

```php
<?php
$scriptString = "
  // add any customisation here
";
?>

<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript'],
    content: $scriptString,
    textContent: false
) ?>
```
:::

***

## Adding Code Via A Custom Module

Note: in the example below we have used Module `Vendor_Module`.
[Magento module creation documentation](https://experienceleague.adobe.com/en/docs/commerce-learn/tutorials/backend-development/create-module).

1. Create a custom module `Vendor_Module`, `app/code/Vendor/Module` with the following directory structure. Note full module creation is not shown here.

```none
app
- code
- Vendor
 - Module
  - view
    - layout
    - templates
```

2\. Create a layout file to add your blocks to our contain `klevu_frontend.init_after`

:::CodeblockTabs
Vendor/Module/view/frontend/layout/default\_head\_blocks.xml

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="klevu_frontend.init_after">
            <block name="Vendor_Module.klevu.init_after"
                   template="Vendor_Module::klevu/init_after.phtml"
                   before="-"/>
        </referenceBlock>
    </body>
</page>
```
:::

3\. Create the template file that will contain your customisations&#x20;

:::CodeblockTabs
Vendor/Module/view/frontend/templates/klevu/init\_after.phtml

```php
<?php

$scriptString = "
    // add any customisation here
";
?>
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript'],
    content: $scriptString,
    textContent: false
) ?>
```
:::