Category Thumbnail

Category Thumbnail

This plugin provides the ability to upload and manage a thumbnail image for categories, enhancing the visual representation of your catalog. By associating an image with each category, you can deliver a more engaging browsing experience and improve storefront navigation.

Previews

Dependencies

Install react-dropzone and multer

1npm install --save react-dropzone
2npm install multer

If you are using Local storage for file uploads, you just have to set below configurations inside plugins array in your medusa-config.js file

1{
2    resolve: "@linearcommerce/medusa-category-thumbnail",
3    options: {
4      provider: "local",
5    },
6}

If you are using AWS S3 for file storage, you must have to install the following npm packages dependencies

Install aws-sdk/client-s3 and aws-sdk/s3-presigned-post

1npm install @aws-sdk/client-s3
2npm install @aws-sdk/s3-presigned-post

Add below environment variables in your .env file:

1AWS_S3_ACCESS_KEY_ID=Your AWS Access Key ID
2AWS_S3_ACCESS_SECRET=Your AWS Access Secret Key
3AWS_S3_REGION=Your AWS Region
4AWS_S3_BUCKET=Your AWS Bucket Name
5AWS_S3_ENDPOINT=https://s3.amazonaws.com

Add the plugin to your medusa-config.ts file:

1plugins: [
2  {
3    resolve: '@linearcommerce/medusa-category-thumbnail',
4    options: {
5      provider: "s3",
6    },
7  },
8],

Compatibility

To use this plugin, you need to have the minimum versions of the following dependencies:

1"@medusajs/admin-sdk": "^2.8.2",
2"@medusajs/cli": "^2.8.2",
3"@medusajs/framework": "^2.8.2",
4"@medusajs/icons": "^2.8.2",
5"@medusajs/js-sdk": "^2.8.2",
6"@medusajs/medusa": "^2.8.2",

Usage

Installation

1yarn add @linearcommerce/medusa-category-thumbnail
2
3-- OR -- 
4
5npm i @linearcommerce/medusa-category-thumbnail

Run the database migrations (Adds a table to your database for storing category thumbnails):

npx medusa db:migrate

Key Features:

• Upload and manage thumbnail images at the category level.
• Seamlessly display category thumbnails on the storefront to enhance navigation and visual appeal.
• Maintain consistent branding and improve user experience with image-based category representation.
• Simply configure the file upload settings in the Medusa store, and the plugin will handle the rest automatically.
• Supports both local storage and Amazon S3 file upload providers for flexible file management.