DBC: Responsive Interface > Image Files

Catalog Theme Images

A catalog theme image is a banner-style visual that appears above the items within a catalog. It enhances site customization and can help maintain brand recognition, if desired. The suggested size for your catalog theme image is 1200px by 135px at 72dpi.

Sub-Catalog Thumbnail

In the responsive interface, sub-catalog thumbnails have been intentionally designed to be more rectangular, in contrast to the square thumbnails used in the legacy interface. This visual distinction helps users easily differentiate between a catalog and an individual item. The suggested size for your sub-catalog thumbnail image file is 286px by 332px at 72dpi. Item images will continue to use the square format.

Item Images

Item images appear in a square presentation. The suggested size for your image file is 600px by 600px at 72dpi.

When the image is clicked within the Item Detail page, it will enlarge to the size of the uploaded file, in this example the image size is 600px by 600px. This image is then scaled down by the system to appear as a catalog thumbnail image at a smaller size.

• Document size of 600px by 600px at 72dpi.
• Also set is a 15px margin on each side, that we suggest you don’t exceed. This way when the image appears within the site, there is space between the image and the border around the image that appears within the platform.
• Additionally provided is the gray background DB Commerce uses for the background of their images within the Layers window.
• We suggest if the images are photographs, save them as .jpgs. If the images are more illustrations or text heavy, save them as .pngs.

Promo Images

There are a few ways to show images within the promotional workflow within DB Commerce.

1. Item Detailed View

   When the image is clicked within the Item Detail page, it will enlarge to the size of the uploaded file.

   • The suggested size for your image file is 600px by 600px at 72dpi.

2. Lifestyle/Additional Images

   These images appear below the item detail image. When each image is clicked, it will appear in the item detail image area.

   • The suggested size for your image file is 600px by 600px at 72dpi.

3. Variant Swatch Thumbnails

   These images are presented to the end user as a swatch.

   • The suggested size for your image file is 200px by 200px at 72dpi.

4. Variant Image Thumbnails

   These images are presented to the end user as an image.

   • The suggested size for your image file is 835px by 517px at 72dpi. (Best practices are to maintain a white background image and leave 80ish px padding around the edges)