Description: This tool allows you to create interactive digital catalogs, where images can be "tagged" with clickable points that link to specific products or content.
What is it for? (Practical examples)
Use taggable catalogs to transform static images into dynamic and commercial browsing experiences.
- Furniture e-commerce: Show a photo of a living room and tag each piece of furniture (sofa, lamp, coffee table) linking it directly to the product purchase page.
- Fashion catalogs: Upload an image of a model and tag individual clothing items (jacket, pants, shoes) to allow immediate purchase.
- Technical diagrams or floor plans: Allow users to click on specific areas of a diagram or map to view technical details or additional information.
Main Features
Catalog Management
The main management area allows you to:
1. Create new catalogs: Assigning a name and page structure.
2. Upload pages: Each catalog page is an image on which tags can be placed.
3. Define interactive tags: Using the visual editor to position points of interest on the image.
Visual Tag Editor
When editing a catalog page, you enter an editing mode that allows you to:
- Add new tags: Clicking anywhere on the image.
- Move existing tags: Dragging the point of interest to the desired position.
- Edit tag content: Each tag must be linked to an existing element in the system (typically a product or service).
Automatic Content Linking
The system is designed to automatically retrieve product or service information and display it within the tag.
When creating or editing a tag, you need to enter a specific code identifying the content to link. This code consists of the content type and its unique ID, separated by a comma.
| Tag Field | Description | Example Format |
|---|---|---|
| Tag Text | Identifier of the content to display (e.g., Product, Article, Service). | prodotto,1234 |
If the link is valid, the tag will automatically show:
- A preview of the item.
- The item's title.
- The price (if applicable and correctly formatted by the system).
- A direct link to the item's page.
User Interaction (Frontend)
When the catalog is displayed on the website, tags work as follows:
- Display: Tags are represented by a visible point on the image.
- Interaction: Hovering over the point with the mouse (or tapping it on mobile devices) brings up a popup containing detailed information about the linked item.
- Navigation: Clicking on the popup redirects the user to the full item page.
How to Configure
Configuration takes place in two phases: catalog creation (backend) and insertion onto a page (frontend).
1. Catalog Creation and Management (Backend)
1. Access the main menu and select Cataloghi taggabili.
2. Create a new catalog or edit an existing one.
3. Within the catalog, add pages by uploading images that will compose your catalog.
4. For each page, click on the option to enable editor mode.
5. Click on the image at the point where you want to place a tag.
6. A text field will open in the tag popup: enter the linking code (e.g., prodotto,567).
7. Click the Save button to confirm the tag.
8. Repeat this operation for all products to be tagged.
2. Inserting the Catalog into a Page (Frontend - Visual Builder)
To display the interactive catalog on a page of your site:
1. Open the desired page in the visual editor.
2. Add a new block and search for the block named Taggable Catalog.
3. In the block configuration options, select the catalog you previously created using the appropriate selector.
4. Save and publish the page. The catalog will be displayed with all active tags.
Automatic Integrations
Integration with Inventory/Services Data
The system uses an internal search function to retrieve in real time details (name, price, link) of products, services, or other contents specified in the tag code. This ensures that information shown in popups is always up-to-date.
API Access
Catalog data is exposed through programming interfaces (APIs), allowing external developers to integrate taggable catalogs into custom applications or external systems.
