Variant Images

Medusa Variant Images

Adds the ability to give each product variant its own thumbnail and ordered images

Installation

1yarn add medusa-variant-images
2
3npm i medusa-variant-images

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

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

1plugins: [
2  {
3    resolve: 'medusa-variant-images',
4    options: {},
5  },
6],

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

npx medusa db:migrate

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

1fields: '+metadata';
2
3// Example
4sdk.client.fetch(`/store/products`, {
5  query: {
6    fields: '{other fields},+metadata', // <-- ADD +metadata HERE
7  },
8});

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.

1type Images = {
2  url: string;
3};
4
5// Example
6const thumbnail: string | null | undefined = variant.metadata.thumbnail;
7const 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 3 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