I want to add my custom css and js files in my catalog page. Please let me know how to add in header.

I added catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

        <css src="Sub_Categorylist::css/category_css_slider.css"/>
        <css src="Sub_Categorylist::css/category_css_theme_slider.css"/>

        <script src="Sub_Categorylist::js/category_slider.js"/>
        <script src="Sub_Categorylist::js/category_slider.min.js"/>


Please let me know is there any corrections.

Thanks In Advance..!



The best way to add a JS in Magento (theme or module) is with REQUIREJS.

To add a js in theme via Requirejs:

Supposing that your js file is: myfile.js


var config = {
    map: {
        '*': {
            myscript: 'js/myfile'


define(['jquery'], function($){
   "use strict";
       return function myscript()
           alert('hello myscript');
           //put all your myfile js code here


<script type="text/javascript">
    require(['jquery', 'myscript'], function($, myscript) {

Info: don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content = php bin/magento setup:static-content:deploy -f



<?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">
        <css src="css/yourstyle.css" />

note :

All these will be displayed in theme, if you just need catalog page, you replace Magento_Theme with Magento_Catalog

  • Hi, i like to add in my module files. i call css and js files like above my updated question. – Priya Apr 25 '19 at 5:47
  • Look this : magento.stackexchange.com/a/255077/48355 – PЯINCƏ Apr 25 '19 at 8:14
  • i like to add 2 js files, one is (custom.mim.js) how to call that .min.js files? – Priya Apr 25 '19 at 8:32

Add it to your layout file catalog_product_view.xml(Product Page), catalog_category_view.xml(Category Page)

    <css src="Namespace_YourModule::css/custom.css"/>
    <script src="Magento_Catalog::js/custom.js"/>
  • i added in my module .xml file like you given, but i think so js file has corrupted – Priya Apr 25 '19 at 4:58
  • Where is your css or js files placed? Also please share the code you have added – Raj Mohan R Apr 25 '19 at 6:05
  • i had adde my code in "app/code/Sub/Categorylist/view/frontend/web/(css)&(js)folder. – Priya Apr 25 '19 at 6:14
  • i place " <script type="text/javascript"> $(document).on('ready', function() { $(".center").slick({ dots: true, infinite: true, centerMode: true, slidesToShow: 5, slidesToScroll: 3 }); }); </script>" in my app/code/Sub/Categorylist/view/frontend/templates/category/sub.phtml but its not working – Priya Apr 25 '19 at 6:47
  • So what error are you getting when loading the css and js in layout file? So you are placing the script in template, whether the script gets loaded in frontend? – Raj Mohan R Apr 25 '19 at 7:54

You can do it by adding it on the head of a layout
Refer from this: Include static resources

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
    <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />

Override catalog_category_view.xml file into your theme.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <script src="js/custom.js"/>
        <css src="css/styles-m.css" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.