Resizing Catalog Images

The Catalog Images tool lets you override the default size and proportion of any image in your catalog layout by specifying the new size in pixels. Follow the steps below to change the size of any image in your product catalog.

To resize catalog images:

  1. From the Admin panel, select Design > Themes Editor.
    The thumbnail for your current theme appears on the left, and selection of other available themes appears on the right.
  2. Under the thumbnail for your current theme, click Customize.
  3. In the Theme Customization panel on the left, select Catalog Images.
    The Catalog Images section lists all available catalog images that you can resize.
  4. If your catalog contains images that are of a different proportion than the container, by default, borders will be added to the image to fill the unused space. If you do not want to save the borders to each image, clear the Add the white borders to the images that that do not match the container size checkbox.
    Catalog Images
    Design > Themes Editor > Customize (Theme) > Catalog Images
  5. To resize an image, do the following:
    1. In the Location column, find the image you want to resize. Then, set Image Type to one of the following:
      • Thumbnail
      • Small Image
      • Base Image
      You can select one of the three image types to set to a custom size, and the other two are resized automatically.
    2. Enter the size, in pixels, for the image:
      • Width (px): (Required) If only the width is specified, the image is resized proportionally.
      • Height (px): If both width and height are specified, the image is resized exactly.
    3. To restore the size of an image size, do the following:
      • To restore one catalog image to its default size, click the Reset button to the right of the image.
      • To restore all catalog images to their default sizes, click the Restore Default button in the upper right of the Catalog Images section.
  6. To preview your change, first click the Save button. Then click the Preview button in the upper right to preview the resized image.
  7. When finished, click the Save button.

    Note: When you resize a catalog image, the change applies to all themes. After resizing a catalog image, you should also update any custom CSS to ensure that the image renders correctly. For more information, see the Magento Go Design Guide.


  8. Discussion:

RSS: New Article posts

Explore the Knowledge Base