0

I am using Hiddentechies Appreal free Theme for my Magento2 project. I want to add a custom CSS file and Js file (for jQuery) so that it will override the classes(CSS file) and add functionality (Js file) which I will include in those files. But I am not sure where to add those files. I have read that we should not touch the vendor folder. So where I should include my custom files. Any help would be appreciated. Thanks in Advance.

9
  • For javascript /app/design/frontend/{{themevendor}}/{{themename}}/web/js/ js.js and For css /app/design/frontend/{themevendor}}/{{themename}}//web/css/css.css
    – S.P
    Commented May 10, 2022 at 11:09
  • and after you should add it to body from layut. /app/design/frontend/{{vendor}}/{{themename}}/Magento_Theme/layout/default.xml file
    – S.P
    Commented May 10, 2022 at 11:10
  • Thanks @S.P, is it required to make changes in requirejs-config.js file? Thanks
    – user170106
    Commented May 10, 2022 at 11:52
  • No for css you not need to add
    – S.P
    Commented May 10, 2022 at 11:55
  • But for Js, I need right?? Thanks @S.P
    – user170106
    Commented May 10, 2022 at 12:37

1 Answer 1

0

for add custom css to custom theme. you need to update default_head_blocks

You can get Reference from default magento blank theme.

vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml

Add same way in your custom theme

vendor/{{magento}}/{{themename}}/Magento_Theme/layout/default_head_blocks.xml

and add style.css file in web folder

app/design/frontend/{{themevendor}}/{{themename}}/web/css/custom.css

For add custom js file.

There are many ways to add js in your theme.

By utilizing default_head_blocks.xml in app/design/frontend/{{theme-Vendor}}/{{theme-name}}/Magento_Theme/layout/:

Example Content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>            
        <css src="css/custom.css"/>
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>                      
        <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 src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

With requirejs-config.js in themes root folder.

example:

 var config = {     
        map: {
            '*': {
                'owlcarousel': 'js/owl.carousel.min'
            }
        }
    };

The use js in your phtml file.

define([
  "jquery",
  "owlcarousel"
], 
function($ , owl) {
  "use strict";

    $(document).ready(function($){
    
    });
    return;
});

for more details refernce

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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