Skip to main content

Product images

Shoptet saves product images in their original size and then prepares several standardized versions (called image cuts). These cuts are created in advance and stored on the disk, so they are readily available. The list of cuts is the same for every e-shop, although each e-shop can theoretically have different cut sizes. In practice, their size is determined by the template, and most templates use the same sizes. The list of available cuts is defined by the Image Cuts code list.

The /api/eshop?include=imageCuts Eshop info endpoint returns the imageCuts field in the response, where each cut has the actual size defined and a base URL path. There are two base URLs (example for classic.shoptet.cz, cut detail):

{
    "name": "detail",
    "width": 360,
    "height": 270,
    "urlPath": "https://fenix.myshoptet.com/user/shop/detail/",
    "cdnPath": "https://cdn-api.myshoptet.com/usr/fenix.myshoptet.com/user/shop/detail/"
}

Use the urlPath if you need an up-to-date image immediately, are using the URL for backend processing, and will retrieve the images only once. Images retrieved via urlPath are not cached. You can use the image name or the SEO version of the image name — see below.

Use the cdnPath if you want to use the image URL on the frontend and users of your application will display it — for example, if you're providing an alternative frontend, mobile application, etc. These images are cached and served with lower latency. Use the cdnName retrieved from the product detail endpoint (or similar) — see below.

Once you determine the URL based on the purpose and the image cut size (for example, detail for the product detail or related for a product preview), simply append the filename you need. The filename can be retrieved from the product detail endpoint.

The product detail endpoint /api/products/{guid}?include=images returns image data in data.images[] in the same sequence as they are entered in the administration. The file name name (e.g. 100.jpg) should be appended to the appropriate URL cut to form the full image path — for example: https://classic.shoptet.cz/user/shop/detail/100.jpg

You can also use the seoName, which contains a description of the image. You will be redirected to the same image. The cdnName is intended for use with the cdnPath only.

The relevant fields look like this (excerpt):

    "name": "106.png",
    "description": "shamrock 2115611 640",
    "seoName": "106_shamrock-2115611-640.png",
    "cdnName": "106_shamrock-2115611-640.png?5b2a41f5"

So, valid scenarios are:

  • urlPath + name
  • urlPath + seoName
  • cdnPath + cdnName

The cdnName contains an encoded change timestamp. Whenever the image is replaced (either manually in administration or via import), a new change timestamp is assigned and the cdnName changes accordingly.

One of the product images can be selected as the default image for a product variant. The selected image is found in data.variants[].image and contains the name of the image — this can be matched against the image list by the name field. If the variant has no preselected default image, the image parameter is null.

The data.items[].mainImage field contains the main image used in the order detail — this is either the default variant image or, if not set (or the product has no variants), the default product image. The structure is the same as in the product details, but only the default (representative) image is provided here. The full path can be constructed by combining the urlPath from the e-shop info with the name or seoName fields provided for the order item.

Similarly, the product list includes data.products[].mainImage, which provides the primary image for each product.