Importing Product Images and Generating Thumbnails in CS-Cart Print

  • 16

Images can be bulk imported into CS-Cart using the import utility. The easiest way to use the image import feature is to have the system create all image types for you including:

- Products list (category, search, etc) thumbnail
- Product details page thumbnail
- Detailed product image
- Product cart page thumbnail

This article describes how to use the image import utility in detail. 

Step 1 - Configure your Thumbnail Settings

Before importing your product images, you will want to configure the thumbnail settings that will be used to generate each of your product image types.
The following settings should be configured:

Thumbnail background color
- this field should contain the hexadecimal color code for the canvas color of the image. This should be set to #ffffff in most cases.

Thumbnail format
- This should typically be set to "JPEG"

JPEG format quality (0-100)
- This should typically be set to between 80 to 85.

Products list (category, search, etc) thumbnail width
- this is the width dimension for the product image in category, search, and most other pages.

Products list (category, search, etc) thumbnail height
- this is the height dimension for the product image in category, search, and most other pages.

Product details page thumbnail width
- this is the width dimension for the product image on the product page.

Product details page thumbnail height
- this is the height dimension for the product image on the product page.

Detailed product image width
- this is the width dimension for the detailed product image on the product page.

Detailed product image height
- this is the height dimension for the detailed product image on the product page.

Product cart page thumbnail width
- this is the width dimension for the thumbnail image on the cart page.

Product cart page thumbnail height
- this is the height dimension for the thumbnail image on the cart page.

Notes:
After importing your images, you can return to this screen at any time to change the settings. Upon changing the settings and clicking "Save" all images will be automatically re-generated.

Troubleshooting:
Once images have been imported or assigned, if thumbnails have not been regenerated after saving, you should clear the thumbnails cache. In order to clear the thumbnails cache, open this link in your browser: http://www.your_domain.com/admin.php?ct where "www.your_domain.com" is the address of your store and where admin.php is a script file for the administration panel of your store.


Step 2 - Gather your images
You will need to gather all of your large, detail-view photos of your products. These images will be used to auto-generate all smaller versions of the product images. For the purpose of simplicity, the images should use the same name as the "Product code" for the product in CS-Cart. Example, if you have a product with Product code=MyProductcode123 and the image type is a JPEG, you would want to name your image
"MyProductcode123.jpg".


Step 3 - Upload your images
You can upload your images via the file manager in your cPanel control panel for your account. You can view an online tutorial at http://www.granitewebdesign.com/support/view-tutorial.php?id=filemanager. Otherwise, if you are familiar with using FTP programs, you can upload the
files that way. You will upload these images to the /public_html/images/backup directory/folder, overwriting any existing images with the same names.
Note: For CS-Cart 4.x, it appears that they moved this folder to: /public_html/var/files/1/exim/backup/images/


Step 4 - Create your Import File
a) Create your import file using the format shown below, using Comma, Tab or semicolon as a delimiter.
The first row will contain columns for all of the field labels:
1 - "Product code"
2 - "Pair type"
3 - "Thumbnail image"
4 - "Detailed image"

The rows below it will contain the data column values for your product image records. 

Example for CSV Delimiter = Comma
"Product code","Pair type","Thumbnail image","Detailed image"
"MyProductcode123","Detailed image","","MyProductcode123.jpg"
"MyProductcode223","Detailed image","","MyProductcode223.jpg"

Example for CSV Delimiter = Tab
"Product code" "Pair type" "Thumbnail image" "Detailed image"
"MyProductcode123" "Detailed image" "" "MyProductcode123.jpg"
"MyProductcode223" "Detailed image" "" "MyProductcode223.jpg"

Example for CSV Delimiter = Semicolon
"Product code";"Pair type";"Thumbnail image";"Detailed image"
"MyProductcode123";"Detailed image";"";"MyProductcode123.jpg"
"MyProductcode223";"Detailed image";"";"MyProductcode223.jpg"
b) Save this file to a location on your computer.


Step 5 - Import your file
To access the images import feature, login to your CS-Cart admin area and click on Administration navigation tab, then click on the Import Data link.
When the page loads, click on the Images tab. 

a) For the "Images directory" field, leave this set to the default value. It should display a value like:
/home/username/public_html/images/backup

(where username is your FTP username)

Note: for CS-Cart 4.x it appears that they changed this directory to: /public_html/var/files/1/exim/backup/images/

b) For the "CSV delimiter", select the delimiter type that matches the file that you created (Comma, Tab or semicolon).

c) For the "Select file", click "Local" and browse for the file that you saved.

Then click "Import". You will see an output of the activity and a log of any Product codes contained in the file that do not match a product in the product catalog.


Was this answer helpful?

« Back