Product Image Settings

SmithCart > Configuration

Since your customers can't see your merchandise in person, having great product photos is the next best thing. Product images can be shown on the Product Listing, Product Details, Cart, Confirm/Confirm Status pages as well as Email Confirmations.

Contents



Image Settings

To configure image settings, navigate to the BuyNow module and select "Setup" from the admin menu:
 
Scroll down to the "Product Images" section and expand the panel and you will see the following:
 
 

Product Image Server Location

 

The Product Image Server Location allows you to specify the location where your product images are stored.

Store Product Images on Local Web Server – This is the default setting and when selected your product images will be stored in a relative path of your local DNN installation (\Portals\[PortalID]\SmithCart\).

Store Product Images on External Server - Global URL – The Global URL allows you to specify a single external URL to your media server to store your product images. The path \Portals\[PortalID]\SmithCart\ will be appended to the end of the External URL you specify below.

Store Product Images on External Server - Product URL – The Product URL option will use the full path specified in the image fields in the "Smith_Products" table to retrieve product images. In Smith_Products table, ProductImage field enter a URL in the following format: http://www.mediaserver.com/storeimages/blueshirt.j

 

If you are using either of the "Store Product Images on External Server" options you have the freedom to specify any folder path and image naming conventions you like by populating the full image path in the "Smith_ProductImages" table.

The following sections apply when you are using "Store Product Images on Local Web Server" option.

Product Listing Page Thumbnail Images

 

When you upload product images the cart automatically creates thumbnail images. The settings below allow you to set the height and width of new thumbnail images.

Thumbnail Width (Pixels) – Enter the width in pixels for new thumbnail images on the Product Listing page.

Thumbnail Height (Pixels) – Enter the height in pixels for your new thumbnail images on the Product Listing page.

 

Product Details Page Thumbnail Images

 

Thumbnail Width (Pixels) – Enter the width in pixels for new thumbnail images on the Product Details page.

Thumbnail Height (Pixels) – Enter the height in pixels for your new thumbnail images on the Product Details page.

[up to contents]

 

Image Naming Convensions

It's really easy to blast through hundreds of product shots and keep the default file name your camera gives them. But before you keep that habit, let's discuss why that's not a good idea.

When it comes to SEO, it's important to use acceptable keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is absolutely crucial for image optimization. Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names.

Let's use this image as an example:

You could use the generic name that your camera gave to the image such as DCMIMAGE10.jpg.

However, it would be much better to name the file: 2014-Chevrolet-Corvette-Stingray-Blue.jpg

Also think about how your customers search for products on your website. What naming patterns do they use when they search? In the example above, car shoppers may search using the terms:

  • 2014 BLue Chevrolet Corvette Stingray
  • Chevrolet Corvette Stingray Blue 2014
  • Blue Chevrolet Corvette Stingray 2014

If you are not going to get that detailed, just be sure to use good keywords when naming your images (and try to be descriptive!).

[up to contents]



Image Type and Location

The filenames of images saved to the server will be the same as those uploaded to the site. If you do not assign an image, a placeholder image will be used instead.

The following image types are used throughout the Store:

Main Image - The Main Image is the large image displayed on the product detail page. When uploaded, the Main Image is stored in the \Portals\[PortalID]\SmithCart\Images folder.

Thumbnail Image - The thumbnail image is displayed on the Product Listing page, Image Gallery, and in areas such as Related Products and Featured Products. When uploaded, the Main Image is stored in the \Portals\[PortalID]\SmithCart\Thumbnails folder.

Zoom Image - The Zoom Image allows zooming on your product images. When uploaded, the Main Image is stored in the \Portals\[PortalID]\SmithCart\ZoomImages folder. If you would like to enable the zoom effect on your product images, enable the zoom feature in the product details module.

[up to contents]

 

Image Alt Tags

Alt tags are a text alternative to images when a browser can't properly render them. Even when the image is rendered, if you hover over it with your mouse pointer, you can see the alt tag text created for that image (depending on your browser settings).

The alt attribute also adds SEO value to your website. Adding appropriate alt tags to the images on your website can help your website achieve better rankings in the search engines by associating keywords with images. As a matter of fact, using alt tags is probably the best way for your ecommerce products to show up in Google image and web search.

Let's take a look at the source code of an alt tag:

The #1 priority when it comes to image optimization is to fill out each alt tag for every product image on your site.

Helpful Alt Tag Tips

  1. Describe your images in plain English, just like you do for image file names.
  2. If you sell products that have model number or serial numbers, use them in your alt tag.
  3. Do not keyword stuff your alt tags (for example: alt="chevrolet corvette american car buy now cheap best price on sale").
  4. Don't use alt tags for decorative images. Search engines may penalize you for over-optimization.

Finally, always do a sanity check of your website from time to time. View the source of your webpages and check to see if your alt tags are filled out.

[up to contents]

 

Adding a Product Image

The Images screen on the Product Setup screen is used to upload and manage the display of images for the current product. You can upload multiple images for each product, Edit or Delete existing Images and manage Zoom Images. If you have a large quantity of images to manage, you may prefer to import, rather than upload each one individually.

To upload a product image:

  1. Navigate to the Product Setup screen of the Product you would like to configure images for
  2. Click the "Images" menu option from the top of the Product Setup screen
  3. From the Product Images management screen, click "Add Image"
  4. Click "Choose File" to find the corresponding image file
  5. Enter a Title and Alt Tag(s) if applicable
  6. Click "Save" to upload the Image and save the info

Note:

  • Thuumbnail Images are dynamically created by the cart when uploading new images. To change the size of new thumbnail images, there 2 settings for thumbnail size in the Store Settings under the Product Images section that let you set the height and width of the thumbnail that is generated when you upload an image.
  • Upload the largest, highest quality image you have and the cart will automatically re-size your images based on the image size settings you configured in the image settings above.

 

[up to contents]