How to Add Custom CSS in Magento 2 – The Complete Guide (2025)

Do you want to make custom changes to the style of your Magento 2 store by adding custom CSS? Let’s see how you can add it seamlessly in Magento 2.

The flexibility of Magento 2 is particularly synonymous with the benefits of adding custom styles, which invariably enhance the user experience, improve branding, and set your store apart from competitors.

Why Add Custom CSS to Magento 2?

By adding your custom CSS in Magento 2, you are able to do the following:

  • Make your e-commerce store look good.
  • Override Magento’s default style.
  • Make sure the branding is right for your design.
  • Engage more customers due to a distinctive look and feel.

Method 1: Adding Custom CSS via Theme in Magento 2

a. Create a Custom Theme in Magento 2

Creating a custom theme ensures that your CSS changes remain even after updates.

  1. Navigate to the app/design/frontend directory.
  2. Create a new directory for your theme: app/design/frontend/YourVendor/YourTheme
  3. Add the necessary files:

theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Your Custom Theme</title>
   <parent>Magento/blank</parent> </theme>

registration.php

<?php
 \Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/YourVendor/YourTheme',
    __DIR__
);

b. Add Custom CSS to Your Magento Theme

  1. Inside your theme folder, create the following path:
    app/design/frontend/YourVendor/YourTheme/web/css
  2. Add a custom.css file.
  3. Insert your custom CSS rules in this file:
body {
background-color: #f4f4f4;
}

c. Link the Custom CSS File to Magento

To link the CSS to your Magento 2 store:

  1. Create this path: app/design/frontend/YourVendor/YourTheme/Magento_Theme/layout
  2. Add a new file named default_head_blocks.xml.
  3. Insert the following code:
<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"/>
</head>
</page>

d. Deploy and Clear Cache

Once the CSS is added, follow these steps to make it live:

  1. Deploy static content:
bin/magento setup:static-content:deploy
  1. Clear cache:
bin/magento cache:flush
  1. Refresh the site and verify the custom CSS is applied.

Method 2: Adding Custom CSS via Magento 2 Module

If you prefer to add CSS through a module:

  1. Create the path: app/code/YourVendor/YourModule/view/frontend/web/css
  1. Add custom.css and define your styles.
  2. Link the CSS in your module’s layout:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
        <css src="YourVendor_Module::css/custom.css"/>
    </head> </page>

Why Custom CSS Matters for Magento 2 SEO

  • Faster Loading Times – Custom, optimized CSS reduces page bloat.
  • Improved UX – Better designs improve user engagement and reduce bounce rates.
  • Higher Conversion Rates – A tailored design drives trust and purchases.

Final Thoughts

Adding custom CSS in Magento 2 is essential for enhancing your store’s aesthetics and functionality. By following this guide, you’ll achieve a unique, brand-centric store design that stands out in the competitive e-commerce market.

Thank You !!

Related Posts:

Comments (0)