24/7 Support: 800.608.6482

Get Started

Reference Guide

Images

Miva Merchant Images - A Brief History

PR7

In older releases of Miva Merchant, before PR8, a product could have two images: one thumbnail image, and one full-size image. You generally used the thumbnail images in Search and Category pages, and displayed the full-size image when a customer viewed a Product page.

PR8

In PR8, Miva Merchant introduced Additional Images. With Additional Images you could have multiple images for any product. When the customer viewed a Product page, they could look at multiple thumbnails, click on any one of them to see an image that fit the product pane, and even click on that image to see the full-size (or Master) image.

When Additional Images were introduced, we started referring to the old "one thumbnail, one full-size" as "Legacy" product images.

Version 9

In Version 9, Additional Images are just called "Images". The idea is that, Additional Images are so much more useful than the old legacy stuff, we hope people will use Additional Images by default.

Edit Product

Edit Product

The old PR7 "one thumbnail, one full-size" legacy image features are still available in Version 9: Menu> Catalog > Products > Edit Product > Product tab > Add/Edit Product > Product tab > Legacy Images Section.

Uploading Images in Version 9

There are several ways to upload images to your store in Version 9:

  1. Use FTP to upload images to your store server. Technically, you can store images anywhere on your server, but the Miva Merchant software only knows about the default graphics directory. For example, if you only have one store, your default graphics directory usually looks like this: /mm5/graphics00000001/ In the admin interface, this directory would be displayed as: graphics/00000001/

    See The Image Picker Dialog Box for an example.

  2. Now that your images are physically uploaded to your store server, you have let the Miva Merchant software know about the images.
  3. 2.1. Go to Menu> Utilities > Image Management.

    Image Management

    2.2. In the Image Management tab, click Check for Updated Images. The Miva Merchant software will scan your store's default graphics directory.

  4. Open the Image Picker dialog box. The images that you uploaded will appear and can be attached to images.

Using the Edit Product >Images Tab in Version 9

You can add a legacy style thumbnail or full-sized image to a product page in your store by editing the product and using the "Thumbnail Image" and "Full-sized Image" fields.

Images Tab

This is an older way of uploading product images. It is still supported and is described in the Add/Edit Product > Product tab > Legacy Images Section. However, a better way to add product images to your store is with the Edit Product > Images tab.

  • It's a simpler method to upload product images.
  • You can easily add multiple images for the same product.
  • When you use the Images feature, the software will automatically create and display thumbnails for each image (if you have at least 2 additional images).
  • The user can click on a product image and see the full-size (Master) version of the image that you have uploaded.
  • There are several ways to work with Images:

  • Manually add images to one product at a time. This is slow, but ok if you are only uploading multiple images for a few products.
  • Add images by importing. This is the fastest method and is appropriate if you want to add multiple images for hundreds, or thousands, of products.

The Image Picker Dialog Box

The Image Picker dialog box has several functions, but it's mainly used to attach images to your products. To open the Image Picker dialog box:

  1. Edit a product and select the Images tab.
  2. In the Images tab click Add Images.

Image Type

Clear You can click on an image to select it in the Image Picker dialog box. Selected images will show a white checkmark in a blue circle. If you want to "unselect" images, click the Clear button.
Delete

Use the Delete button to permanently delete images from your server.

  1. Click on one or more images to select them.
  2. Click Delete.
  3. A message box will open asking you to confirm the deletion. Click OK.
Add
  • Upload Image: Use Add > Upload Image to copy images from your local machine to the default graphics directory on your store server. If you only have one store, your default graphics directory usually looks like this: graphics/00000001/
    1. Click Add button > Upload Image.
    2. Browse to a path on your local machine. Select an image and click Open.
  • Add Images Already on Server: The Image Picker dialog box only shows images in your default graphics directory. For example, if you only have one store, the default directory on your store server for images is probably "graphics/00000001/". However, you can keep images anywhere on your store server. If you want to add an image to the current product that is not in your default graphics directory:
    1. Select Add button > Add Image Already on Server by Path.
    2. In the Add Image dialog box, enter the path to the image on your server and click Add. Note that the path that you enter in this dialog box is relative to your default graphics directory.
    3. For example, if your default graphics directory is: graphics/00000001/

      The path to an image in a directory above the default directory might look like this: ..tmp_images/my_shirt.gif

      The path to an image in a directory below the default directory might look like this: graphics/00000001/tmp_images/my_shirt.gif

      Add Image

  • Add Image Type: You can create Image Types on the fly in the Image Picker dialog box, and then assign your images to them. To create an Image Type:
    1. Click Add button > Add Image Type.
    2. In the Add Image Type dialog box, enter a code and a description, then click Add.

      Add Image Type

    3. You can now assign images to the new Image Type. See below.
Show All / Show Selected If you have one or more images selected, click Show Selected to show only those selected images. Click Show All to show all of the images in the default image directory on your server.
Assign an Image to an Image Type

To assign an Image Type:

  1. In the Add Image type dialog box, select an image.
  2. Image Type Main

  3. Click the small down arrow next to the checkmark to select an Image Type.

Add Images - One Product at a Time

This method is appropriate if you want to add multiple images to a few products, one product at a time. However, you might want follow these steps to get a simple introduction to using Images and Image Types.

  1. Edit a product and select the Images tab.
  2. In the Images tab click Add Images.

    The Image Picker Dialog Box does several things. In our example, we'll use it to upload images from our local machine to the store server.

  3. In the The Image Picker Dialog Box, click Add> Upload Image.
  4. Browse to an image on your local machine, then click Open. The image will be copied to your server and will appear in the Image Picker dialog box.
  5. Image Picker

  6. If you click on an image that you've uploaded, you'll see a blue circle with a checkmark. Next to the checkmark is a black arrow. If you click on the black arrow, you can assign the image to an Image Type. This is an optional step. In our example however, we'll assign our images to Image Types that we've already created.
  7. Image Types

  8. In the Image Picker dialog box, click Select Image.
  9. You'll return to the Edit Product > Images tab. You can see that the image you selected is now associated with your product. You can associate the same images with multiple products.

  10. In our example, we added two images for our shirt; one for the front and one for the back.

    Edit Display Order

  11. Now let's look in the on-line store. When you use the Images feature:
    • The system automatically scales your image to fit in the product page. This is similar to the old legacy "full-size" image, but it really means "the biggest image that can fit in the boundary box on the product page".
    • Note that you can change the size of this boundary box. See: Menu> User Interface > Pages tab > Edit page PROD > Product Display Layout Image Dimensions section > Resize to fit within bounding box.

    • The system automatically creates thumbnails of every image that you uploaded, starting with the second image. Thumbnails won't be created if you only have one image.
    • The end user can click on the image in the product page and see the master (full-sized) image. In our example, we uploaded a picture of the t-shirt front that was 500 x 500 pixels. But the product page (by default) is only going to show that at about 200 pixels x 250 pixels. If the customer clicks on that image in the product page, a pop-up window will appear which displays the image in its actual dimensions: 500 x 500. When customers click on the Close button at the bottom of the master image, they return to the regular product page images.
    • Master Image

Add Images - Import Feature

This is the most efficient method to add multiple images to hundreds, or thousands, of products. However, you can only use Images with the Import Feature if you also create Image Types.

  1. Create your Image Types. For this example we created Image Types of "Front" and "Back".

  2. Give your product images names that will make managing them easy. For example, if we were going to upload images for hundreds of t-shirts we might call the images: surfer_shirt_white_front.jpg, surfer_shirt_white_back.jpg, etc.

  3. Use FTP to upload all of the images to your default graphics directory.
  4. Make sure that custom fields will appear in the spreadsheet you are going to download. This step only has to be done once.
  5. 3.1. Go to Menu> Utilities > Add/Remove Modules tab > Available Modules section.

    3.2. In the box "Product Image Custom Fields", click the Install button.

  6. Download a product spreadsheet template.
  7. 4.1. Select Menu> Data Management > Import Settings tab.

    4.2. Click on Add/Update Products from CSV.

    4.3. Click on either CSV Template or XLS Template.

    Data Management

    4.4. The file "import.csv" or "import.xml" will download to your local machine, and you can open it in a spreadsheet program. This file has all of the columns that you need to add new products to your store, and associate one or more images with each product.

    Catalog Import

    The columns in the spreadsheet will look familiar to you if you've created at least one product in your store. Each row is a product. You can also see that there is a column in the spreadsheet for every Image Type that you've created. You can use the Image Type columns to add images for every product, but there's two things to remember:

    • If you created two Image Types, you can only have (a max of) two images per product. If you want to import more images per product, you have to create more Image Types, for example, FRONT_01, FRONT_02, etc.
    • The file path for images in the spreadsheet is a path to the image on the store server, not your local machine.
    • Image Type

  8. After you've added all your product data to the spreadsheet, go back to the Miva Merchant admin interface and select Menu> Data Management > Import Settings, then edit Add/Update Products from CSV.
  9. Catalog Data Management

    The settings in the Edit Import dialog box are explained fully in section Saving Import Options. Please read that section carefully, because the options that you choose in this dialog box have a important effect on how data is added to your store, and the Import feature has no "Undo". In our example we're going to use the spreadsheet to "Add New Products Only". When you have selected the appropriate options, click the Save button.

  10. Go back to the Data Management > Import/Export tab and click on Update Products. The Import dialog box appears. Browse to the spreadsheet that contains your product data. If your browser supports drag and drop, you can drag the file from a local folder on your machine into the dashed rectangle.
  11. Catalog Data Management

    The system will process your data file as soon as you select it. The system will log various messages, such as the number of records that were processed, created, or skipped, along with success or failure messages, to the Import dialog box. When your data file has been processed, all of your products, and product images, have been added to your store and can be seen by customers.

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

Miva believes that all online businesses should have access to a scalable ecommerce platform that can meet their unique business requirements. Miva offers PCI compliant ecommerce, hosting, and custom website design and development solutions. Miva customers have processed over $100 billion in online sales since 1997.

Copyright © 2016 Miva, Inc - All Rights Reserved   Privacy Policy | Store Policy

Links
Contact Us
Receive Tips & Updates

Copyright © 2017 Miva, Inc - All Rights Reserved

Back To The Top