How to Add Custom Image Attribute in Magento 2 Category (2.3+ Supported)

Magento 2 out of the box provides a feature to upload a category image. That category image is displayed on the product listing page. However, Sometimes clients want a functionality to upload another image in a category. For example, the client wants to display an icon of a category in the menu or somewhere else on the website.

To fulfill those requirements we have to provide options in the category to add an image. In this post, we will see how to add custom image attribute in Magento 2 category.

Add Custom Image Attribute in Magento 2 Category

Create Patch AddIconCategoryAttribute.php under app/code/Codextblog/Demo/Setup/Patch/Data directory. Add below code in that file.

namespace Codextblog\Demo\Setup\Patch\Data;

use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\Patch\DataPatchInterface;
use Magento\Framework\Setup\Patch\PatchRevertableInterface;

class AddIconCategoryAttribute implements DataPatchInterface, PatchRevertableInterface

     * @var ModuleDataSetupInterface
    private $moduleDataSetup;
     * @var EavSetupFactory
    private $eavSetupFactory;

     * Constructor
     * @param ModuleDataSetupInterface $moduleDataSetup
     * @param EavSetupFactory $eavSetupFactory
    public function __construct(
        ModuleDataSetupInterface $moduleDataSetup,
        EavSetupFactory $eavSetupFactory
    ) {
        $this->moduleDataSetup = $moduleDataSetup;
        $this->eavSetupFactory = $eavSetupFactory;

     * {@inheritdoc}
    public function apply()
        /** @var EavSetup $eavSetup */
        $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);
                'type' => 'varchar',
                'label' => 'Icon',
                'input' => 'image',
                'sort_order' => 333,
                'source' => '',
                'global' => ScopedAttributeInterface::SCOPE_STORE,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => null,
                'group' => 'General Information',
                'backend' => 'Magento\Catalog\Model\Category\Attribute\Backend\Image'


    public function revert()
        /** @var EavSetup $eavSetup */
        $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);
        $eavSetup->removeAttribute(\Magento\Catalog\Model\Category::ENTITY, 'icon');


     * {@inheritdoc}
    public function getAliases()
        return [];

     * {@inheritdoc}
    public static function getDependencies()
        return [];

Here we have created a category attribute of type image using data patch. After adding this file to your module run the setup upgrade command.

To add that attribute in category form, add category_form.xml file under app/code/Codextblog/Demo/view/adminthtml/ui_component directory. Add below code in it.

<?xml version="1.0" ?>
<form xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="icon">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="number">333</item>
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="label" translate="true" xsi:type="string">Icon</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" path="catalog/category_image/upload" xsi:type="url"/>
                    <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                    <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>


This is how you can easily add a custom image attribute in Magento 2 Category and utilize it in the frontend. Still questions? Add it below in a comment. Happy Coding!!

Want to ask a question or leave a comment?

Leave a Comment

(1 Comment)

  • daniel

    hello, i try this code the image is save but the page doesn’t work still load forever

  • All the comments are goes into moderation before approval. Irrelevant comment with links directly goes to spam. Your email address will not be published.

    Was this post helpful? Please support Us!

    Follow us on twitter or Like us on facebook.


    To Avoid Spam Downloads, We Want Your Email

    We will send you download link right
    away. Please submit form below.

    Increase Your
    Magento 2

    Get Weekly Tutorial
    to your Inbox
    Subscribe Me
    Subscribe Here