Metadata Display on the Frontend

This guide demonstrates how metadata settings for attributes and their values affect the visual representation of product features on the website. Examples are illustrated with screenshots showing the results of applying various configurations.

Core Configuration Features

Settings are managed through the module interface on the Settings tab in the Frontend section.

Recall that the Settings Table contains two columns:

• Attribute — global settings for all attribute values
• Value — individual settings for specific values

Available Options

Parameter	Description
Image	Enable/disable display of an image for the attribute or its value
Icon	Add a graphical symbol (e.g., 📦 for packaging)
Tooltip Icon	Display ⓘ to trigger a pop-up with additional description
Description	Text content for tooltips
SEO URL	Display a hyperlink for linking to external resources
Auto-generate URL	Automatically create SEO-friendly URLs
Units	Enable display of measurement units (GB, MHz, W)
Display Style	Format of unit output: Clockspeed (MHz) vs Clockspeed, Megahertz

---

Implementation Examples

Product Page

Settings for the product page allow you to create a structured feature table with interactive elements.

Result after configuration on the product page

Frontend metadata settings

Highlights:

• ⓘ icons open detailed descriptions (e.g., Wi-Fi standards)
• Values with hyperlinks (🔗) redirect to external pages (e.g., interface descriptions)
• Units of measurement appear in the selected format (350 (W) instead of 350 W)

Frontend product tooltip

Category Filter

Settings for filters make the selection process more intuitive and user-friendly.

Result after configuration in filters

Frontend filter

Highlights:

• Attributes with icons (⚡ for power consumption) improve visual recognition
• Tooltip icons ⓘ explain parameter meanings (e.g., “Input voltage”)
• Measurement units add context and allow dimension control (220–240 (V))

Frontend filter tooltip

---

Benefits of Using Advanced Settings

For the Product Page

1. Improved UX:

   • Tooltips reduce the need to navigate to the “Description” section
   • Graphic icons simplify understanding of technical specs

2. SEO Optimization:

   • Auto-generated URLs help link to authoritative sources
   • Structured data improves indexing by search engines

3. Flexible Presentation:

   • Allows unit formatting tailored to the target audience (e.g., Hz vs Hertz)

For Category Filters

1. Effective Search:

   • Range values (250–300 (W)) help quickly narrow down options
   • Icons in filters visually highlight key parameters

2. Reduced Bounce Rate:

   • Detailed tooltips ⓘ decrease user uncertainty when selecting products

3. Consistent Design:

   • Centralized configuration ensures a uniform display style across the site

---

Technical Implementation Details

Product card and filter modifiers are automatically enabled when the module is installed through event handlers.

Handler	Action
attributipro_frontend_product	Connects the script for modifying the product card
attributipro_frontend_filter	Connects the script for modifying the filter

If frontend modification is not required, you can disable any of these handlers.
To do so, go to the Extensions ⇒ Events menu.

Important: All modifiers are adapted to the native OpenCart 3.x design. When using third-party themes or plugins, additional adjustments may be required.

---

Summary

Proper metadata configuration enables you to:

• Create informative and interactive product pages
• Simplify the filtering process for users
• Boost conversion by clearly presenting product features

Use the provided examples as a starting point for configuring your own store!