Counterpoint: How to assign images to a product

Counterpoint: How to assign images to a product

This article will describe how to name product images so the CP-Commerce integration will recognize them and sync them to the webstore. It will also go into detail on how to assign multiple images to the same product.

Before you start...

Image Dimensions

We recommend the image dimensions 600 x 600, but as long as the image dimensions are the same across the board, you can use other dimensions as well.

Image File Size

The image's file size should bebetween 50KB and 200KB.


Images larger than 2MB will NOT be synced.

EXIF Data

EXIF data is how digital cameras can store information about how the picture was taken. One important detail that is stored is theorientation the picture was taken in. The Windows 8 and 10 file explorers and some other programs will recognize it and make the image appear upright, but the actual image is still sideways or upside down. On the web, that orientation is not taken into account and so the image will need to appear upright without it.

Below are guides on how to fix the orientation of your images:

If you only have a few images...

  1. First, check if an image has an orientation.
    1. Upload them here:https://exifdata.com/index.phpand the site will list what EXIF data is stored on the image.
      1.  If the orientation is set, you will see it as shown below:50692286.png
  2. Then, open the images in an image editing program like Adobe Photoshop, Microsoft Paint, or GIMP and save them. Then, once the images are brought up by the sync, they should be upright.
    1. You can confirm the orientation is removed by reuploading it tohttps://exifdata.com/index.php

If you have several images and are on Windows...

  1. First, check if the images have an orientation.
    1. Create a folder on your desktop and add the images to it.
    2. Open the folder and click View at the top.
      1. 50692307.png
    3. Select Details.
      1. 50692308.png
    4. To the right, click "Add columns" and then select Choose Columns.
      1. 50692309.png
    5. Find Orientation, click the checkbox next to it, and then press OK.
      1. 50692310.png
      2. You should now see the orientation:

        50692313.png

  2. Next, you can use a batch image processor like BIMP to resave the images without the orientation data. 

    Instructions with BIMP

    1. DownloadGIMP.
    2. DownloadBIMP.
    3. Open GIMP.
    4. In the top menu, click File and then Batch Image Manipulation.
      1. 50692314.png
    5. Under Manipulation Set, click Add and then select Flip or Rotate.
      1. 50692315.png

    6. In the menu that opens, just click OK.

      1. 50692316.png
    7. Next, click Add Images and then click Add Folders.
      1. 50692317.png
    8. Select the folder your images are in and then in the bottom right corner, click Add.
    9. Under Output folder, click the field underneath it.
      1. 50692318.png
    10. Select the folder your images are in again and then in the bottom right corner, click OK.
    11. Click Apply. You will see a warning about overwriting the file.
    12. Click the checkbox next to "Always apply this decision" and then click Yes.
      1. 50692319.png
      2. After that finishes, the images should now have their orientation set as Normal:
        1. 50692320.png

  3. Then, you will want to review the images to make sure they are upright. While you fixed the images that had "Rotate ...", images that are set as "Normal" can still appear rotated. This is because not all cameras will set the orientation (Rotate ...).

    1. Click View at the top of the File Explorer and select Large Icons.

    2. 50692415.png
  4. Review your images to make sure they are upright. If any of them are rotated, you will want to open them in an image editing program like Adobe Photoshop, Microsoft Paint, or GIMP, rotate them, and then resave it.


For more information about EXIF data:Why Your Photos Don't Always Appear Correctly Rotated

Step 1: Naming Your Images

Main Product Image

The file name for the main product image should match the Counterpoint item number. This is the image customers will first see when they arrive on the product landing page.

For example, if you have a product with the item number12345, the main product image file name should be12345.jpg.

Special Characters

The following Special Characters in the Item # should be replaced with an underscore (_) in the image name.

  • < (less than)
  • > (greater than)
  • : (colon)
  • ' (single quote)
  • " (double quote)
  • / (forward slash)
  • \ (backslash)
  • | (vertical bar or pipe)
  • ? (question mark)
  • * (asterisk)

For example, item number123/45 should have an image named123_45.jpg

Below you can see how the main image looks on the product page:

45449648.png

Alternate Images

Sometimes, you may want to show more than one image for a product such as the back or side of a product:

45449649.png

If you would like to add an alternate image for a product, you will want to add ^[anything]to the end of the image file name. For example, if you wanted to add another image for item12345, the file name could be12345^1.jpg or12345^back.jpg.

To add more, you would just need to add something different after the carrot like2orside(12345^2.jpg or12345^side.jpg).

While you can use words after the carrot,we recommend using numbers for alternate images. This is because the system assigns images to grid dimensions using the same format.

Let's say you had product12345and it had a grid value ofback.Then the image12345^back.jpg would get assigned to the back option and it will only show when the customer chooses that option on the product page.

Gridded Products

If you have products with grid dimensions, you can add product images for each color / style / etc. This will allow the customer to see the image for that selection when they choose that option on the product page.


For example, let's look at the following gridded item.

On the left, you'll see the item setup in Counterpoint with the grid dimensions.

On the right you'll see how that item will appear on the website. The grid dimension tag (i.e. COLOR) becomes the dropdown label and the grid values (e.g. Red, Blue) become the dropdown options.

53644366.png

If you would like the image to change to just the red balloon when Red is selected or to just the blue balloon when Blue is selected, you would need the images 20001^RED.jpg and 20001^BLUE.jpg.


Then, when the customer selects Red from the Color dropdown, the image would change to 20001^RED.jpg.             When the customer selects Blue from the Color dropdown, the image would change to 20001^BLUE.jpg

53644357.png53644358.png

The images for each color / style / etc. are named similar to how you would name an alternate image, except [anything]is replaced with the grid dimension.

General Important Details

  1. Grid dimensions are caseINSENSITIVE.
    1. For example, you can have the dimension beBlueorBLUEorblue.
  2. These dimensions will also need spaces and non-alphanumeric characters removed. The exceptions to this are dashes and underscores.
    1. For example, let's say we have the following Grid Dimension in Counterpoint:
      1. 53644376.png
    2. For the last three values: 
      1. RED& BLUEneeds the spaces and non-alphanumeric characters removed, so you would useREDBLUEafter the ^.
      2. RED-BLUEonly has a dash, so it staysRED-BLUE.
      3. RED_BLUEonly has an underscore, so it staysRED_BLUE.
  3. Creating alternate images for gridded images is simply done by adding^<anything>on to the end of your final name. For example12345^Blue^1.jpg | 12345^Black^2.jpg


More than One Grid Dimension

For the following details, we will be using the following example.

53644378.png

  1. The order in which you set your grid dimensions is important. This will determine what order they need to be in your image name.
    1. For example, images for item 20002 would be in order ofColor→Size→Typei.e.<sku>^<color>^<size>^<type>.jpg
      1. If you had an image for item20002inBLACK& WHITE, XS, Lady's, you would want the image name to be:20002^BLACKWHITE^XS^Ladys.jpg
    2. Common practice is toput Color as the first grid dimensionsince color is the most common swatchable attribute.
      1. This way allyou need to do is<sku>^<color>.jpg.
  2. The image will need to match each dimension till you have hit the one you are trying to assign an image for. 
    1. Example 1: You want to set an image for each"Color"(Black, White). Images would be like12345^White.jpg,12345^Black.jpg, etc.
      1. When the customer selects white, the image 12345^White.jpg would show. The image would still show when they select the size and type unless you specified an image for it.
    2. Example 2: You want to set an image for each "Size" (Black-XS, White-XS). Images would be like12345^White^XS.jpg,12345^White^S.jpg, etc.
      1. When the customer selects white and then XS, the image 12345^White^XS.jpg would show instead of 12345^White.jpg.
    3. Example 3: You want to set an image for each "Type". Images would be like12345^White^XS^Ladys.jpg,12345^White^XS^Mens.jpg, etc.
      1. When the customer selects white, then XS, and then Lady's, the image 12345^White^XS^Ladys.jpg would show instead of 12345^White.jpg or 12345^White^XS.jpg.

Step 2: Adding the Images to Counterpoint

Once you have your image names set, you can add them to the Counterpoint Item Images directory. You can follow these steps on how to add them there:

  1. Access the server where your CounterPoint is installed.
  2. Locate the Directory where CounterPoint is installed. (In most cases, this will be C://Program Files/Radiant Systems/CounterPoint/CPSQL.1 ). The directory structure should look similar to the screenshot below:
    2163047.png

  3. Locate your CounterPoint installation's ItemImage Directory - From here navigate toTop-Level → YOUR CP DB NAME → Configuration → ItemImages. (In the example below, we are using DEMOLIQ as the name of our CP DB).

    Note: This is the default directory that our sync will grab images from. Your specific sync configuration may be changed to use a different directory than this.



    2163049.png

  4. Move the product images to this folder.
  5. The next time the sync runs for these items, these new images will be uploaded to their respective items. The sync usually runs on a nightly basis.


    • Related Articles

    • How to Upload Product Images

      This article covers how to upload images to products that will be shown on their product pages and be used as thumbnails previews. In order to upload images for general use across the website, see this article. CPC Sync If your website store uses CPC ...

    • CPC: Counterpoint Product Information Checklist

      This article covers what information you'll need to set on your products in Counterpoint that will be visible to customers in your Magento webstore. Top Section Item number - Depending on your stores theme, this may be shown in the customer view. ...

    • How to Upload Images to Your Store

      This article covers how to upload images for general use on a Magento store. Navigating to the Image Up-loader While editing content in Magento, there is an "insert image" feature that allows you to insert images directly into that content. For this ...

    • Counterpoint: Defining&Calculating Prices

      Determining Price Your storefront displays both list price (e.g., MSRP or retail price) and selling price (e.g. "special price”). The list price only displays if it's greater than the special price. The standard Regular Price and Special Price for ...

    • Counterpoint: How to set up Kits/Bundles

      This article will explain how to set up kits in counterpoint to be synced up to the website, as well as how substitute items are handled. Step-by-step guide In Counterpoint, go to Inventory → Sales Kits. You must have an Item already created to use ...