Images & Media
Product images, attribute images, category and manufacturer images, and product videos: This guide shows you where the files are located, how the store generates preview images of all sizes from them, how to replace an image, and what to do if an image is missing.
At a Glance
- One image, many sizes: You upload a source image, and the store automatically generates preview images for listings, product pages, and full-screen views. The dimensions can be found under Settings → Design → Images.
- Product images: in the product listing under the “Images” tab. The first image row is the main image; you can change the order using the “Move” arrow button.
- Replacing an image: It’s safest to use a new filename. Browsers cache images for up to a year and will often still display the old image if the filename remains the same.
- Filenames and formats: Only letters a–z, numbers, hyphens, and underscores. The store accepts JPG, PNG, GIF, and WebP image formats.
- WebP: A setting converts all preview images to WebP. You do not need to convert your source images for this.
- File Manager: Located in the top-right corner above your name under “Tools.” The server sets the upload limit.
In this guide
Not covered in this guide: Sliders, banners, and images on the homepage (Guide : Designing the Homepage), images on pages created with the Builder (Guide: xoContentEditor), detailed features and variants (Guide: Product Attributes), and the Porter step-by-step guide (Guide: Import & Export).
Where Images Are Stored
Each image type has its own source folder. An image field in the backend stores only the filename relative to this folder, for example, tasse-blau.jpg or becher/tasse-blau.jpg.
| Image Type | Source images in the File Manager | Thumbnails (generated by the store) |
|---|---|---|
| Product images and video previews | Images → Source Images → Products | thumbnail/products/ in the sizes mini, small, medium, large, xlarge |
| Attribute images (option image, additional images, value image) | Images → Source Images → Options | thumbnail/options/ and thumbnail/product_options/ |
| Category images, as well as images from news articles and the xoContentEditor | Images → Source Images → Categories | thumbnail/categories/ in small, medium, large |
| Manufacturer images (logos) | Images → Source Images → Manufacturers | thumbnail/manufacturers/ in small, large |
| Slider images, including the mobile version | Images → source images → slider | thumbnail/slider/ |
| Product videos (MP4) | Files → videos | – |
- Thumbnails are generated the first time a page is loaded; after that, the server serves the finished file. The file manager hides the “
thumbnail” folder. Do not delete anything from there manually; use the “Delete Thumbnails” option instead—see Image Sizes. - You cannot upload anything to the “source images” folder itself; uploads are only allowed to its subfolders.
- The folder names are listed under Settings → General → Module Options, for example, “Source Folder for Product Images.” Only the main administrator can see this group. Do not change these values: Doing so would cause the store to fail to locate existing images.
The File Manager
Use the File Manager to upload images, videos, and documents to the server. Open it in the top-right corner: Click on your name and select “File Manager” under “Tools.” You can also open it by clicking the “Select Image” button next to each image field, which takes you directly to the appropriate folder.
The File Manager displays the product images folder with thumbnails; new files are added via “Upload.” Click to enlarge.
Sections and Formats
- “Images” contains the source images and other graphics such as logos and icons. The File Manager uploads JPG, PNG, GIF, and WebP files to the image folders under “source images,” and SVG and ICO files to the main “Images” folder.
- “Files” also accepts PDFs, Office documents, MP4s, and many other formats. Product videos belong in the “videos” subfolder.
- “Downloads” contains files from downloadable items.
- The file manager does not accept HEIC-format photos from smartphones, AVIF, or TIFF files in the image folders. Convert them to JPG or WebP beforehand.
Upload Limit and Large Files
The file size limit is determined by the server’s PHP settings. The smaller of the two values applies to both file uploads and form data. Clicking “Upload” opens your computer’s file browser directly; the file manager does not display the limit. Contact support to find out what the limit is for your store.
For a very large PDF file, you have three options: reduce the file size (most PDF programs can save documents for the web), upload it via SFTP to the files folder, or ask Support to increase the limit.
File with the Same Name
If a file with the same name already exists in the folder, the file manager will prompt you. “Overwrite” replaces the existing file, while “Rename” saves the new file under a different name. For instructions on what to do after overwriting, see “Replace Image.”
Edit Image
The pencil icon next to a product or attribute image (“Edit Source Image”) opens the file manager’s image editor with “Crop,” “Resize,” and “Flip/Rotate.” It supports JPG, PNG, and GIF files, but not WebP files. Afterward, save the product so that the store can regenerate the preview images.
If the upload fails
- If the preview image for a PNG remains blank in the file manager or if the upload of a PNG aborts, this was due to a harmless warning when reading the color profile. The file managerhas been saving such files anyway ever since.from 4.9.106
- On servers running PHP 8.5, every image upload would abort with a message regarding
imagedestroy().from 4.9.47 - If the upload fails for you on a current version, contact support and provide the filename, file size, and the message displayed.
File Names
A good filename consists only of lowercase letters a–z, numbers, hyphens, and underscores, for example, trinkflasche-750ml-blau.jpg. Omit umlauts, spaces, and commas.
What the store renames automatically
- Uploading via the File Manager: “ü” becomes “u,” and “ß” becomes “sz.” Spaces and all other characters except letters, numbers, hyphens, and underscores are replaced with “_.”
- Saving a product, category, or manufacturer: The store renames the source image (ä → ae, ö → oe, ü → ue, ß → ss, spaces and commas → “_”) and enters the new name. Other special characters such as “é” or “&” remain unchanged.
- Import using image URL: The importer capitalizes the name and replaces umlauts.
Why Umlauts Still Cause Problems
Files added to a folder via FTP or import retain their original names. When you save a product, the store renames the file. If a later import or another product restores the old name with an umlaut, the store can no longer find the file. The Porter’s help section therefore explicitly requires names without umlauts or spaces.
Additionally, filenames are case-sensitive: Tasse.JPG and tasse.jpg are treated as two different files by the server.
Uploading and Organizing Product Images
You can manage product images under Products → Categories / Products in the “Images” tab for each item.
Each image row has a “Product Image” field, a description for each language, and an arrow on the right for reordering; the first row is the main image. Click to enlarge.
Here’s how
- Open the product page and go to the “Images” tab.
- Click “Add Image(s).” The file manager opens the product images folder. Upload the files and select one or more. Each file becomes its own image row.
- Alternatively, use “Add New Image Row” to create a blank row and select a file in the “Product Image” field via “Select Image.”
- Enter a description for each language (fields “Description 1,” “Description 2,” etc.), for example, “750 ml water bottle in blue, side view.” The store uses these as alternative text for search engines and screen readers. If no description is provided, the product name will appear there instead.
- Save the item.
Order and Main Image
- The first row (“Product Image 1”) is the main image. It appears in product lists, in the shopping cart, and as the first image in the gallery.
- Drag a row using the arrow button (tooltip “Move”) to a different location. The number next to “Product Image” indicates the new position.
- The red trash can removes a row from the product. The file remains on the server.
- If the same file appears twice in the product, the gallery displays it only once.
Additional fields in the
- “Sticky Column (Detail View)” specifies which column on the product page remains visible as the user scrolls for this item; see Product Page.
- “Fallback Without Product Image” determines what the product page displays if there is no image; see “Without Image.”
- You can manage videos in the adjacent “Videos” tab; see Product Videos.
Replacing an Image
You can replace an image with a new filename or keep the same filename. Using a new filename is the safer option.
With a new filename (recommended)
- Upload the new file with a new name, for example,
tasse-blau-v2.jpg. - Select it in the article in the “Product Image” field and save.
- Since the image URL is new, all visitors will see the new image immediately. You can delete the old file later; see “Cleaning Up.”
With the same file name
- Upload the file to the same folder in the File Manager and select “Overwrite.” The name displayed in the image field is what matters.
- For product images, open the product and save it. When you do this, the store deletes the preview images for all images associated with this product and regenerates them the next time the product is viewed.
- For category and manufacturer images, as well as the small attribute images in the selection, saving does not refresh the thumbnails. Under Settings → Design → Images, select the “Delete Thumbnails” tab.
- Reload the page in your browser without using the cache—on Windows, press Ctrl + F5; on a Mac, press Cmd + Shift + R.
Image Sizes, Resolution, and Cropping
The shop generates five sizes from each product image. It decides for itself which ones to use where; on a smartphone, it loads smaller versions than on a large screen. All settings for this can be found under Settings → Design → Images.
Under Settings → Design → Images, you’ll find output format, background, cropping, and image sizes; the tabs above these are the image tools. Click to enlarge.
| Size | Default | Where the store uses them |
|---|---|---|
| Mini | 330 × 330 pixels | Shopping cart, “Best Sellers” and “Reviews” boxes, image selection on the product page |
| small | 495 × 495 pixels | Product slider in block and thumbnail view, boxes such as “Highlights” and “New Products” |
| medium | 660 × 660 pixels | Product sliders in list and gallery views |
| large | 1320 × 1320 pixels | Product page, zooms in on hover |
| High-resolution | 1980 × 1980 pixels | Click on the image for a full-size view, use the magnifying glass |
Adjust size
- You can adjust “Product Image Width (High Resolution)” and “Product Image Height (High Resolution).” Smaller sizes retain their width and automatically maintain the aspect ratio. The same applies to the large version of category images.
- Valid values range from 10 to 5,000 pixels. After saving, the store deletes the affected thumbnails and regenerates them the next time the page is loaded.
- These values determine the resolution of the thumbnails, not how large an image appears on the page. The layout dictates the space allocated to the image.
What resolution should you upload?
- Upload product images that are at least as large as the high-resolution size—which is 1980 × 1980 pixels by default—and with the same aspect ratio, which is square by default. The store will enlarge smaller images, which will then appear blurry.
- The shop does not resize uploaded source images. Prepare images directly from your camera beforehand to have an edge length of about 2000 pixels; this saves storage space.
- Save photos as JPG or WebP; save graphics with a transparent background as PNG or WebP.
Cropping or Margins
If an image’s aspect ratio does not match the set size, there are two options. With the “Crop function for images,” the shop zooms in and crops a small portion from the top and bottom or the left and right. By default, this is enabled for product, category, and slider images.
Without cropping, the system displays the entire image and fills the empty margins with “Thumbnails: Background Color,” which is set to “ #FFFFFF ” (white) by default. It’s best to upload images with the correct aspect ratio right away; that way, there will be neither margins nor cropping.
Black Borders
Black borders or a black background occur when “ products ” is selected under “Thumbnails: Transparency” and the thumbnails are generated as JPGs. JPG does not support transparency, so transparent areas appear black.
Solution: Deselect “ products ”; the background color will then fill these areas, or set the output format to “ webp ” or “ png ” (see WebP). Also check whether “Thumbnails: Background Color” is accidentally set to black. Then click “Delete Thumbnails.”
Additional Settings
- “Thumbnail Image Quality” applies only to JPG. The default setting here is 100; the setting description recommends 80 as a good balance between quality and file size.
- With “Image Watermark” and “Watermark in Images,” the store applies an image—such as your logo as a PNG with a transparent background—over the selected image types. You can adjust the size and position in the fields below.
- Rounded corners are available for images in the xoContentEditor: use the “Rounding” field in the image block, ranging from “None (square)” to “Circle (round)”; see the xoContentEditor guide. There is no setting for this for product images.
- If you change the background color, quality, watermark, or cropping, the store automatically deletes all preview images. It does not do this for “Thumbnails: Transparency” or the output format; in those cases, you must select “Delete Thumbnails” afterward.
The tabs at the top of the
| Tabs | Effect |
|---|---|
| “Recalculate Thumbnails (Images)” | generates the selected sizes for all images in advance |
| "Delete Thumbnails" | deletes all thumbnails; the store will regenerate them the next time it is loaded. Your source images remain unaffected. |
| “Clean Up Source Image Folder” | deletes unused source images; see “Clean Up” |
| "Reset Original Image Sizes" | resets all image sizes to their factory defaults and deletes the thumbnails |
These tabs appear only as long as “Enable Image Thumbnailing” is set to “ true.” Leave it this way: Without this setting, you would have to manually copy each size into the thumbnail folders.
Thumbnails as WebP
A single setting determines the format in which the store delivers thumbnails. You do not need to convert your source images for this.
- Set Settings → Design → Images → Default Image Output Format for Thumbnailing to “
webp.” The default setting here is “dynamic”: The thumbnail retains the format of the source image. - Select the “Delete Thumbnails” tab. Otherwise, the old JPG and PNG thumbnails will continue to take up storage space.
- Open a few pages and check the images. The image URLs now end with
.webp; the store generates them from your JPG, PNG, GIF, and WebP source images.
- “Thumbnail Image Quality” does not apply to WebP.
- If you save a product, category, or manufacturer after the conversion, the store will adjust the source image’s file extension—for example, changing
tasse.jpgtotasse.webp. The file’s content remains the original. - According to the setting’s description, the “PDF Catalog” feature requires the format
jpg.
Lazy Loading
With lazy loading, the browser loads an image only shortly before it enters the visible area. This speeds up the initial display of a long product list.
Here’s how it works
- The setting is located under Settings → Design → Images → Lazy-Load for Images and is set to
trueby default. - When scrolling, loading begins about 400 pixels before an image becomes visible, so that it’s ready in time.
Disabling
If you set “Lazy-Load for Images” to “ false,” the browser will load all images on a page immediately, including those at the very bottom. Therefore, leave this setting enabled unless support advises you otherwise.
Images in Product Lists
In category lists, search results, and product blocks, each tile displays the main image. Additional images are available via the image carousel when hovering, the preview strip, and the gallery button. The settings can be found under Settings → Design → Product Listing.
The preview strip displays up to four tiles below the image; additional images are grouped under “+N,” and the button in the lower right opens the gallery. Click to enlarge.
Image Change on Hover
If a tile in the gallery view displays a different image when you hover over it with the mouse, “Show alternative images in product listings” is enabled. The second row of images for the item is displayed. Items with only one image do not change.
This setting is located under Settings → Design → Product Listing. If you don’t see it there, it’s only enabled for XONIC; support will toggle it on for you. If you enable the preview strip in a section, the image change is automatically disabled there.
Preview Tiles
“Show additional images as a preview strip in the listing” displays up to four small images of the product below the main image. Clicking one of them switches the main image. If not all images fit, the last tile summarizes the rest as “+N.”
You can enable the carousel for each section: category listings, product presentations (product blocks on the home, category, and product pages), and option listings (variant lists on the product page), in either gallery or list view. By default, it is disabled everywhere.
Gallery Button
“Gallery Button in Listing Image” displays a button in the lower right corner of the image. It opens all images for the item in a full-screen view for browsing and zooming without loading the product page. The button appears only for items with more than one image.
Hide Images
“Show Product Image” hides the images in the list view; “Show Product Image (Family Products)” hides the images in the variant list on the product page. What a tile without an image displays is explained under “No Image.”
The Image Gallery on the Product Page
The gallery is located on the left side of the product page, with the price box to its right. This layout is fixed. You can customize the appearance of the gallery and the content below it under Settings → Design → Product Detail View.
In the “Swiper” image viewer, a row of thumbnails appears below the large image, and a video appears below that as a separate bar with a play icon and its description as the title. Click to enlarge.
| Effect | Effect |
|---|---|
| “Image Display in Product View” | gallery (default): a large first image, with the rest displayed below as small tiles; starting with the sixth image, a “+N” tile summarizes the rest. swiper: a large image for scrolling through with thumbnails. legacy: the classic display from the old shop version. On gallery and swiper, clicking an image opens the full-size view. |
| “Display Mode for the Dynamic Image Viewer” | Only at swiper: modern (default) allows swiping and snaps into place; the arrows appear on the computer when you hover over them; classic fades in and displays the arrows permanently |
| “Navigation Arrows in Image View” | Arrows on the large image instead of on the thumbnails |
| “Mobile Navigation Arrows” | off Hides the arrows on smartphones and tablets; swiping is used instead |
| “Product Detail View: Sticky Column (left / right / none)” | Which column remains fixed while scrolling: left the gallery (default), right product info and shopping cart button, none none. Varies by item in the “Images” tab under “Sticky Column (Detail View).” |
| “Product Detail View: Description Position” | original (default): Description below the images; right_section or left_section: as a collapsible section on the right or left. On smartphones, it is set by default to be collapsible on the right side; this is controlled by “Product Detail View: Description Position on Mobile Devices.” |
Zoom
“Product Image Zoom Type” and “Product Image Zoom Popup” under Settings → Design → Images affect the classic view at legacy: magnifying glass, zoom window, or image enlargement. The views at gallery and swiper open a large view with zoom when clicked.
Image Above the Description
To add an additional image at the top of the description, go to the “Description/Tabs” tab in the product page: Place the cursor at the beginning, select the image icon in the editor, and import the image from the file manager. In the builder, this is done using the image block; see the xoContentEditor guide.
360-Degree View
The XONIC Shop System does not include a 360-degree view. You can add a 360-degree video to the gallery as an MP4 file; see Product Videos. If a 360-degree view is built into your shop, it is a custom feature; contact Support to discuss any changes.
Images for Attribute Values
A feature value such as “Blue” can have its own image, which appears in the selection list, in the gallery, or in both places. The Product Attributes guide explains how to create features.
The button with the number next to “Option Image” opens the “Additional Images for …” window, where you can add more images for this value. Click to enlarge.
Two Image Sources
- Image for the value: under Products → Product Attributes for the value. It applies to all items with this value.
- Option image: In the item, on the “Attributes” tab, in the “Option image” field. This applies only to this item.
- Both files are located in the attribute images folder (Images → Source Images → Options). The “Option Image” field searches only there; it will not find an image from the product image folder.
Where the image appears
This is determined by the “Option Image Display” setting for the attribute in the item: “directly upon selection,” “in the image gallery,” or “combined (both).”
Only the “Option Image” for the item appears in the gallery. The selection buttons display the option image and, if it is missing, the image for that value. If the display is set to “in the image gallery” or “combined (both),” the gallery jumps to the image for the selected value when a value is chosen.
Multiple images per value
To the right of the “Option Image” field is a button with a number (“Additional Option Images”). It appears as soon as the option image display is not set to “directly upon selection.” In the “Additional Images for …” window, use “New Row” to add more images and click “Save and Close” to finish.
When the customer selects the value, the gallery displays the main image and the additional images for that value. Clicking on the main image returns you to the full gallery, while the selection remains active.
Incorrect or Missing Image
- The gallery does not change: The value is missing an “option image,” or the option image display is set to “immediately upon selection.” Optionally, the gallery will use the image of the value as a substitute if “Use characteristic value image as substitute in the image gallery” is enabled under Settings → Design → Product Detail View. Only enable this if the images for the values are product photos and not color swatches. from 4.10
- Same file used for multiple values: The gallery displays each file only once and links it to the first value. Assign a separate file to each value.
- Chained attributes such as color and size: The image is associated with the combination. The dynamic image display follows the selection starting with version 4.10; prior to that, only the display at
legacyis used.from 4.10
Product Videos
The product page displays videos below the gallery in a separate bar with a small preview image, a play icon, and the video description as the title. You can manage them in the product listing under the “Videos” tab by clicking “Add New Video Row.”
The fields
- “Product Video”: an MP4 file from the file manager (Files → videos) or a link to YouTube or Vimeo. The store also recognizes videos from TikTok and Facebook.
- “Video Thumbnail”: an image from the product images folder. The store places a play icon over it. According to the help text, this is required for Apple devices; therefore, always include it.
- “Description” for each language.
Privacy
The shop only loads videos from YouTube, Vimeo, TikTok, and Facebook after the visitor has confirmed the notice regarding external content; it embeds YouTube via youtube-nocookie.com. Be sure to list these services in your privacy policy anyway. A separate MP4 file is stored in your shop and does not rely on third-party providers.
Products Without Images
If an image is missing, the store displays a placeholder or omits the image area. There are separate settings for lists and product pages; additionally, items without images can be moved to the bottom of the list. You can find all the details in the guide “Creating & Managing Products.”
Master Products with a Variant’s Image
When importing from OpenXE or Xentral, a master product without its own image automatically receives the main image of a variant. The store uses the first active variant with inventory; otherwise, it uses the first active variant, in the order specified under Settings → Design → Product Listing → Sorting of Master/Slave Products. An image named after the product family takes precedence.from 4.9.106
Without this integration, you can assign the image to the master item itself—for example, using the same file as for the most popular variant.
Category and Manufacturer Images
You select category and manufacturer images in the category or manufacturer section. The store uses these to create fixed-size tiles, header images, and logos.
Category Image
- Go to Products → Categories / Products, edit the category, and use the “Category Image” field. The file is located in Images → Source Images → Categories.
- The image appears as the header image on the category page, on the tiles for the subcategories and the home page, in the menu, and in the left-hand navigation menu on smartphones.
- Dimensions: “Category Image Width (Large)” and “Category Image Height (Large)” under Settings → Design → Images; the default is 840 × 355 pixels, or approximately 2.4 : 1. By default, the shop crops images for categories: The store will crop images with a different aspect ratio.
- Recommendation: JPG or WebP, at least 840 × 355 pixels, with the same aspect ratio.
Manufacturer Image
- Under Products → Manufacturer, edit the manufacturer and fill in the “Manufacturer Image” field. The file is located in Images → Source Images → Manufacturer.
- The logo appears on the manufacturer page, in the manufacturer box, in the manufacturer slider, and on the product page.
- Dimensions: “Manufacturer Image Width (Large)” and “Manufacturer Image Height (Large)”; default is 300 × 150 pixels, i.e., 2 : 1. By default, the store does not crop manufacturer images; it fills any empty margins with the background color.
- Recommendation: Use a logo in PNG or WebP format with an aspect ratio of 2:1, at least 300 × 150 pixels. A second image, such as a brand banner, should be included in the manufacturer description; see the guide “Creating & Maintaining Products.”
| You would like to… | Setting |
|---|---|
| hide the large category image at the top of the category page | Settings → Design → General → Hide Category Header Image: false always show, true hide only when a slideshow is running (default), always always hide |
| Hide the images on category tiles | “Hide category images on the homepage” and “Hide subcategory tile images,” also under Settings → Design → General |
| Hide category images in the left menu | Settings → Design → Off-Canvas → Off-Canvas Left: Show category images |
| Hide the logo in the header of the manufacturer page | Settings → Design → Manufacturer Page → Hide manufacturer image on manufacturer page |
| Hide the manufacturer name next to the logo | “Hide manufacturer name if a manufacturer image exists,” also found there (enabled by default) |
If you replace a category or manufacturer image with the same name, select “Delete Thumbnails” afterward; see Replacing an Image.
Images via Import
To add images for multiple items or categories at once, use the Porter. The Import & Export guide explains how the Porter works.
Product Images
- The image columns display the filename relative to the product images folder. Upload the files to the File Manager or via SFTP beforehand.
- Using the “
path=catch” import option, the Porter downloads images from a web address. It accepts files with the extensions JPG, JPEG, PNG, GIF, and WebP; see “Import & Export.” - The default “Image Update” Porter contains the product images along with their descriptions.
Images for Multiple Categories
- Upload the images to the Images → source_images → categories folder.
- Export using the standard porter “Category Update.” It includes a column for the category image and is disabled by default; see the Import & Export Guide.
- Enter the filename for each category and re-import the file.
- The “
path=catch” option is not suitable here: it always saves downloaded images in the product images folder.
Label AI-Generated Images
The store can label images that you have created or modified using AI with the note “AI-generated.” from 4.10
Switch per image
Each image has a “AI-generated – Show label” toggle: on every image row in the “Images” tab, on the option image and additional images in the “Attributes” tab, on the value image, on the category image, on the manufacturer image, as well as in news, sliders, banners, and in the xoContentEditor.
In the store
When enabled, the image displays a discreet “AI-generated” label. It is actual text, so screen readers will read it aloud. For product images, the shop also marks the image in the structured data for search engines. You can set the position and appearance (light or dark) under Settings → Design → AI Label.
When It Is Mandatory
According to Article 50 of the AI Regulation (EU) 2024/1689, effective as of August 2, 2026, deepfakes must be labeled: artificial images that resemble real people, objects, or places and would appear to be genuine. You decide whether an image falls under this category. If in doubt, consult your legal counsel.
When importing, the label is attached to the file: If an import adds a different image, the label applies to the new image. In the templates, the setting shown by the toggle applies.
Cleaning Up Old Images
Over time, thumbnails and unused source images accumulate. Two tools under Settings → Design → Images free up storage space.
“Delete Thumbnails”: Safe
Deletes all thumbnails. The store will regenerate them the next time a page is loaded; the first few page loads will take a little longer. Your source images remain unaffected. This is especially worthwhile after switching to WebP or after changing image sizes.
“Clean Up Source Image Folders”: Only with a Backup
Select the Manufacturers, Categories, Options, Products, and Sliders folders. The store deletes every file in these folders that isn’t associated with a manufacturer, category, product, attribute, or slider as an image. Under “Products,” it also deletes unused product videos. Deleted files cannot be recovered.
If you delete products, “Delete Images from Server” will remove their images as well; see the guide on Creating & Managing Products.
images/quellbilder, and do not select “Categories” if you use News or the xoContentEditor. If you have any questions, contact Support.An image is not displaying
If the store displays a placeholder, an old image, or nothing at all, go through these points in order.
- Right folder? A product image must be located in Images → Source Images → Products, an attribute image in “Options,” and a category image in “Categories”—see the folder structure.
- Isthe name exactly the same? Compare the name in the image field with the file in the file manager, including uppercase and lowercase letters and the file extension. If there’s a subfolder before it, it must be correct.
- Umlauts or spaces? Rename the file and enter the new name; see “File Names.”
- Format? The store supports JPG, PNG, GIF, and WebP. HEIC, AVIF, TIFF, and SVG are not suitable as product images.
- Isthe file corrupted? If the file manager doesn’t show a preview image, open the file on your computer and save it again as a JPG or PNG.
- Still showing the old image? Refresh the thumbnails (save the item or click “Delete Thumbnails”) and reload the browser with the cache cleared; see “Replace Image.”
- Black background? See “Black Borders” under Image Sizes.
- Attribute image missing from the gallery? Check the “Attribute Image” value and “Attribute Image Display”; see attribute images.
- Images suddenly gone? Was “Clean up source image folder” run? If so, restore the files from your backup or contact support.
Frequently Asked Questions
Where can I find the File Manager in the backend?
In which folder are category images located?
What resolution should product images have?
How do I change the size of product images in the store?
What formats and dimensions are suitable for category and brand tiles?
Are umlauts allowed in image filenames?
How do I convert all images to WebP?
How do I replace a product image while keeping the same filename?
Why do product images have black borders?
What is the file manager’s upload limit, and how do I upload large PDF files?
How do I disable the image change when hovering over items in the product listing?
How do I disable lazy loading for images?
Can I add multiple images for a single attribute value?
Why does the attribute selection show the wrong images?
Why is the attribute image missing for bundle items?
How do I position the image gallery on the product page?
Where do I insert an image above the description?
How do I change the display of the 360-degree view?
How do I clean up old product images and free up storage space?
What image formats does the import process support?
How do I upload images for multiple categories via import?
Further Guides
We can help with your images
We’ll work with you to check image sizes, formats, and cropping, convert images to WebP, and figure out why an image is missing.
Contact Support Now