---
title: Search Theme Layout
slug: klevu-magento-v4/frontend-theme-js-search-theme-layout
docTags: 
createdAt: 2024-08-06T13:18:30.151Z
---

## Overview

If you have customised Search Theme Layout in KMC you will have JS and CSS files to add to your Magento installation. 

There are multiple ways to achieve this, via a theme or a module.

- Add via your theme if the changes are only required on that theme or base theme.
- Add via a module if the changes are required on all themes or if there is some extra business logic required in a ViewModel to determine when the templates should be used.
- It is also possible to combine the approaches if changes are required in one (base) theme, but also require business logic from a ViewModel.

For these examples, we will refer to those files as `klevu-theme-starter.js` and `klevu-theme-starter.css`. Your actual filenames will differ from these.

## Add via Theme

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

In this example, we are using `Vendor/theme` as your theme.

Create a directory in your theme for `Klevu_Frontend` within this directory add the  structure as below:

```none
app
- design
 - frontend
  - Vendor
   - theme
    - Klevu_Frontend
     - layout
     - templates
     - web
      - css
      - js
```

Add the CSS file to `web/css` directory
Add the Javascript file to `web/js` directory

Create a layout file to inject the template into your theme via the container `Klevu_Frontend.before.body.end`. This container enables us to easily remove all Klevu scripts from a page, e.g. checkout.

:::CodeblockTabs
app/design/frontend/Vendor/theme/Klevu\_Frontend/layout/default.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>
        <!-- This container contains all Klevu scripts added before body end -->
        <referenceContainer name="Klevu_Frontend.before.body.end">
            <block name="Vendor_Theme.jsv2_theme"
                   template="Klevu_Frontend::jsv2_theme.phtml"
                   before="-"/>
        </referenceContainer>
    </body>
</page>
```
:::

&#x20;Create the template file which contains the CSS and Javascript links

:::CodeblockTabs
app/design/frontend/Vendor/theme/Klevu\_Frontend/templates/jsv2\_theme.phtml

```php
<?php

declare(strict_types=1);

use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Helper\SecureHtmlRenderer;

/**
 * @var Template $block
 * @var SecureHtmlRenderer $secureRenderer
 */
?>
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: [
        'type' => 'text/javascript',
        'src' => $block->getViewFileUrl('Klevu_Frontend::js/klevu-theme-starter.js')
    ],
) ?>
<?= $secureRenderer->renderTag(
    tagName: 'link',
    attributes: [
        'rel' => 'stylesheet',
        'href' => $block->getViewFileUrl('Klevu_Frontend::css/klevu-theme-starter.css')
    ],
) ?>

```
:::

## Add via Module

[Magento module creation documentation](https://experienceleague.adobe.com/en/docs/commerce-learn/tutorials/backend-development/create-module).

In this example, we are using `Vendor/Module` as your module.

Create the module and add the following structure to view. Note: full module creation is not shown here.

```none
app
- code
 - Vendor
  - Module
   - view
    - frontend
     - layout
     - templates
     - web
      - css
      - js
```

Add the CSS file to `web/css` directory
Add the Javascript file to `web/js` directory

Create a layout file to inject the template into your theme via the container `Klevu_Frontend.before.body.end`. This container enables us to easily remove all Klevu scripts from a page, e.g. checkout.

:::CodeblockTabs
Vendor/Module/view/frontend/layout/default.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>
        <!-- This container contains all Klevu scripts added before body end -->
        <referenceContainer name="Klevu_Frontend.before.body.end">
            <block name="Vendor_Module.jsv2_theme"
                   template="Vendor_Module::jsv2_theme.phtml"
                   before="-"/>
        </referenceContainer>
    </body>
</page>
```
:::

Create the template file which contains the CSS and Javascript links

:::CodeblockTabs
Vendor/Module/view/templates/jsv2\_theme.phtml

```php
<?php

declare(strict_types=1);

use Magento\Framework\View\Element\Template;

/**
 * @var Template $block
 */
?>
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: [
        'type' => 'text/javascript',
        'src' => $block->getViewFileUrl('Vendor_Module::js/klevu-theme-starter.js')
    ],
) ?>
<?= $secureRenderer->renderTag(
    tagName: 'link',
    attributes: [
        'rel' => 'stylesheet',
        'href' => $block->getViewFileUrl('Vendor_Module::css/klevu-theme-starter.css')
    ],
) ?>

```
:::