File Manager
You can manage all media files (images, documents, PDF, Excel, ZIP, etc.) of your store from a central interface in the Design & Content > File Manager section.
File Manager also works as a media selector when opened from the Block Editor with the Add Image and Add File buttons — the selected file is added directly to the TinyMCE editor.
Interface Structure
File Manager opens as a modal window. It consists of two main parts:
| Section | Content |
|---|---|
| Left panel (1/5) | Category and folder tree (navigation menu) |
| Right panel (4/5) | Toolbar + file grid + pagination |
Left Panel — Folder Tree
Files are kept divided into three main categories:
| Category | Icon | Description |
|---|---|---|
| Images | Image icon | Image files such as product images, banners, logos, icons |
| Documents | Document icon | Document types such as PDF, Word, Excel, TXT, ZIP |
| Page/Block Images | Grill icon | Images loaded from block templates |
There may be folders and nested subfolders under each category. The selected folder is highlighted with a blue background.
Special Skins
Below the categories are two more special views:
| View | Description |
|---|---|
| All | Lists all files without category distinction |
| Last Viewed | Lists recently used/selected files (descending order by selection time) |
Toolbar
Folder Operations (Left Side)
When a file is not selected, the following buttons appear:
| Button | Function |
|---|---|
| Add Folder | Creates a new folder under the selected category. Folder name and parent folder are selected |
| Name | Renames the selected folder |
| Delete Folder | Permanently deletes the selected folder upon confirmation |
File Operations (Left Side)
The following buttons appear while a file is selected:
| Button | Function |
|---|---|
| Select | Uses the selected file (copies the URL or adds it to the editor) |
| Edit | Edits file information |
| Download | Downloads the file to local computer |
| Delete | Permanently deletes the file after confirmation |
Installation and Shutdown (Right Side)
| Button | Function |
|---|---|
| Upload New File | Uploads to the active folder with multiple file selection |
| X | Closes the File Manager window |
Folder Selection is Required for Upload
In order to upload a file, a subfolder must be selected from the left panel. Uploading cannot be done when the main category (Images, Documents) is selected.
File Grid
Files are listed in the middle of the page in a 4-column grid layout. Each card file:
- Preview image (thumbnail for images, type icon for documents)
- file name
shows.
File Type Representation
| Extension | View |
|---|---|
jpg, png, gif, webp etc. | Thumbnail preview |
doc, docx | Blue Word icon |
xls, xlsx | Green Excel icon |
pdf | Red PDF icon |
txt, text | Gray text icon |
zip, rar | Purple ZIP icon |
| Others | Orange unknown file icon |
File Selection
| Action | Conclusion |
|---|---|
| One click | Selects the file (highlighted with blue border), file operations are added to the toolbar |
| Double click | Selects the file and uses it immediately (adds it to the editor or copies the URL) |
Pagination
Below the file grid is the pagination bar. 20 files are shown on each page. It can be navigated with forward/back arrows or page numbers.
Usage Scenarios
Adding Images from the Block Editor
- While editing the TPL file in the Block Management > Editor tab, click the Add Image button on the toolbar
- File Manager opens
- Select the relevant folder from the left panel
- Double-click the image you want to use (or single-click it and press the Select button).
- The image is automatically added to the TinyMCE editor
Copying Individual File URL
When the File Manager is opened outside the TinyMCE editor (e.g. directly from /panel/#/files), selecting the file will copy the URL to the clipboard and display an informational message.
Uploading New Folders and Files
- Open a main category from the left panel (Images or Documents)
- Create a new folder with Add Folder on the toolbar
- Select the created subfolder
- Upload multiple files at once with Upload New File
Creating a New Folder
The dialog that opens when the Add Folder button is clicked:
| Area | Description |
|---|---|
| Folder Name | The name to be given to the new folder |
| Parent Folder | Under which category/folder will it be added (Images, Documents or existing subfolders) |
After pressing the Save button, the folder is added to the list and the file grid is refreshed.