my-medusa-variant-images

Medusa Variant Images

Installation

123
yarn add medusa-variant-images

npm i medusa-variant-images

Compatibility

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

123456
"@medusajs/admin-sdk": "2.7.0",
"@medusajs/cli": "2.7.0",
"@medusajs/framework": "2.7.0",
"@medusajs/icons": "2.7.0",
"@medusajs/js-sdk": "2.7.0",
"@medusajs/medusa": "2.7.0",

Usage

Add the plugin to your Copy to clipboardmedusa-config.ts file:

123456
plugins: [
  {
    resolve: 'medusa-variant-images',
    options: {},
  },
],

Run the database migrations (Adds a table to your database for storing variant images settings):

1
npx medusa db:migrate

In your frontend request to retrieve products from the backend, add the following field:

12345678
fields: '+metadata';

// Example
sdk.client.fetch(`/store/products`, {
  query: {
    fields: '{other fields},+metadata', // <-- ADD +metadata HERE
  },
});

Accessing Variant Images

Once you have done all of the above, you will be able to access the variant images from each product variant's metadata.

1234567
type Images = {
  url: string;
};

// Example
const thumbnail: string | null | undefined = variant.metadata.thumbnail;
const images: Images[] | undefined = variant.metadata?.images;

More About The Plugin

• Medusa Variant Images includes the ability to order your images and displays the number when you click on the images.
• You can also upload images using a base option.
  For example: Let's say you have a clothing store. You can select the base option as colour and upload your images to all variants with its colour option set as brown, simultaneously.
  To do this, click the Copy to clipboard3 dots at the top right of the variant images section in your product.

Bugs and Contributions

See a bug? Please raise an issue on the GitHub repository.

Want something to change? Feel free to clone the repository and open a PR once you have added your feature, or please open a feature request on the GitHub repository