Adding Images to a NetSuite Item to Show in Your SuiteCommerce Store

by Caleb Schmitz in , November 18th, 2022

If you are having trouble figuring out how to add images to your NetSuite items, this is a good breakdown of what you need to do. For companies using SuiteCommerce, there is an additional step to consider while uploading images to NetSuite and having them automatically associated with the items.

If your images on your website product detail pages look like this and don't have an image, it is because the image is not associated to the item in NetSuite.

suitecommerce image not available

.

NetSuite Item Associated Images

Here is an example of an item in NetSuite and showing where you might find the associated images.

Netsuite item associated image

Getting an associated image on the NetSuite item is NOT done by putting an image in the “item display image” field, but by appropriately naming the image that you upload to the file cabinet. Image file naming convention for your website, which can be changed in website set up. 

.

Preparing to upload the images

Before you start naming your images, make sure to validate your naming convention by navigating to the website setup.

SuiteCommerce website setup

Checking the Item Identifier

If you are still having issues connecting images, you will want to check the item identifier in your image naming conventions. On the Web Site Setup page, under images, there is a dropdown to select “Item Identifier”, which is defaulted to Display Name/Code. If it is set to Display Name/Code, ensure that each item that needs a picture has the Display Name field filled, and use that value when naming the image file.

Alternatively, you can click into the Item Identifier dropdown to choose a different item identifier, such as Item Name/Number, and then the image files accordingly. Just remember that if you have any images already associated with items using the previous Item Identifier, they will disappear from the items they were connected to until you they are re-named accordingly or you change the item identifier back to the previous selection. Given its impact, the item identifier should be determined early on in your website setup. We don't recommend changing it after you have items live on your website unless you have a specific need to do so.

website setup image filename format

So, the full naming convention for our images in this example is as follows:

[Display Name/Code]_{Category 1}-{Category 2}.[EXT]

Example (no categories): Four Loco Fruit Punch_01

You need the “_01” because it assumes you will have multiple images per item record.

The categories only apply if it is a matrix item (a product variant like different colors or sizes of the same product). Make sure the inventory item has something in the display name/code field. This can have spaces and caps, so I just copy the name exactly.

Make sure to save the image in the appropriate file folder, which you can find in the website setup. You'll want to use the folder for Live hosting files in most cases. And if it is not configured in your website setup, you'll need to do this now.

website image folder

Our site has this set as the folder: Web Site Hosting Files > Live Hosting Files > Website Item Images with the right file name in the right folder will be automatically associated with the item record. 

Now let's upload an image or edit an image in our file cabinet to get it to properly associate to the product.

.

Uploading or Editing the Image

Now we're ready to upload the image. We'll open up the file cabinet by navigating to Documents > Files > File Cabinet, then click on Web Site Hosting Files > Live Hosting Files > Your Folder. First, navigate to your folder that will hold your website images. We could create a new folder if we wanted to, but I will keep them in this folder for the sake of simplicity. Remember that this folder needs to match the Image Source mentioned previously.

From here, we're just going to drop the images in.

File Name of Item Image Before:

NetSuite File cabinet Website hosting files

After adding the file(s), make sure they are using the image naming convention that you already established on the Web Site Setup record. Remember that if you are uploading multiple images, you need to use _01, _02, etc. to indicate the order in which you want them displayed in the PDP slider.

File Name of Item Image Done Correctly:

seeing file cabinet images

Associated Image Alt Tags

This is an excellent time to go ahead and ensure that we have an image alt tag in place for each image. We’re going to click 'Edit' next to the image file, add an alt tag, and then click 'Save'. Be sure to repeat this process for each associated image. You can add image alt tags directly on the item record instead, but that involves a character limit that this method does not.

Now that the alt tags are in place, let's navigate back to the associated images on the item record to ensure our naming conventions are correct.


Confirming Proper Image Setup

Go to Item Record > Web Store tab > Associated Images Subtab. If you scroll down to the bottom of the page, you should now see that there are now two images.

associated image on NetSuite product

Finally, let's just confirm that images are showing up in SuiteCommerce. Navigate to your website product detail page and press Ctrl+Shift+R to do a browser cache refresh. You should see your images show up right away in the order that you labeled them (e.g. 01 or 02).

Suitecommerce advanced book showing

.

Note: If your files are in different formats (one image is a PNG, and one is a JPEG) it won’t necessarily follow the order you indicate. So if you're trying to use the ordering and the naming convention, make sure the file type and the file format of the image match as well.

Image upload for large quantities of NetSuite items

If you are going to be uploading a lot of images to associate to the items in NetSuite, you will want to use a more bulk upload method. This can be done using the Bulk Renaming method and you might even want to consider using a free product called bulk rename utility.

.

VIDEO: Item Data Management

To learn more about associating images with items, or to learn more about item data management in general, check out this tutorial video:

Hopefully, this helped you set up your SuiteCommerce website to become more useful to customers. If you have any questions and want some free consulting advice, feel free to contact our team at Anchor Group.


Get stuck in a step during this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes there is a related feature to enable or field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!

.

FREE SuiteCommerce Book for Continued Learning!

Want a free paperback copy of this NetSuite e-commerce book? We even pay for shipping... Order the free SuiteCommerce book today!

Free SuiteCommerce Book
 
 

Want to keep learning?

Our team of NetSuite professionals has written articles on a wide variety of NetSuite topics, from SuiteCommerce tips, to recommended NetSuite solutions, to available support services, and more! 

Your cart