Attribute Management

Attribute Management allows administrators to create reusable specification fields and display them on product detail pages. Attribute values can be inserted into product templates by using generated placeholder tokens.

Attribute tokens such as ##{ATTRIBUTE_CAMERA_FAMILY}##, ##{ATTRIBUTE_CAMERA_FAMILY_ICON}##, and ##{ATTRIBUTE_CAMERA_FAMILY_VALUE}## are automatically replaced with the values entered in the product or attribute settings.

Overview

Attributes are used to describe product specifications in a structured way. For example, a camera product may have attributes such as camera family, sensor type, resolution, interface speed, or lens mount.

Attribute Management is divided into two main concepts:

Attribute Groups: Groups that organize related attributes.
Attribute Definitions: Individual specification fields inside a group.

Attribute Groups

Attribute Groups organize related specification fields. A group can represent a product section such as Overview, Features, Specifications, Display, Performance, or Compatibility.

Field	Description
Group Code	A unique code used to identify the group. Examples: `SPEC`, `FEATURE`, `OVERVIEW`.
Category	The category where the group will be used. Examples: `iBoard`, `iShop`.
Group Name	The display name of the group.
Description	Optional explanation for the group. Rich text formatting may be available.
Display Order	Controls the display order of the group. Lower numbers usually appear first.
Status	Controls whether the group is active.

Create a New Attribute Group

Open Admin > Attribute > List.
Click New group.
Enter a unique Group Code.
Select the Category.
Enter the Group Name.
Enter a description if needed.
Set the display order.
Check Active if the group should be used.
Click Save Group.

The database should use clear and consistent group codes. Avoid using spaces or special characters in group codes.

Attribute Group List

The Attribute Groups list displays all saved attribute groups by category. From this screen, administrators can open attributes, edit a group, or delete a group.

Column	Description
ID	The internal identifier of the group.
Code	The group code.
Category	The category assigned to the group.
Name	The group name.
Sort	The display order.
Status	Shows whether the group is active.
Manage	Provides actions such as Attributes, Edit, and Delete.

Attribute Definitions

Attribute Definitions are the actual fields used to store and display product specification values. Each definition belongs to an Attribute Group.

Example:

Group: 0001 - OVERVIEW
Attribute: Camera family
Token: ##{ATTRIBUTE_CAMERA_FAMILY}##

Attribute Definition List

The Attribute Definitions screen shows all attributes inside the selected group. Each attribute has a generated token that can be copied and used in a product detail template.

Column	Description
ID	The internal identifier of the attribute.
Code	The attribute code. Example: `1-0001`.
Name	The attribute name. Example: `Camera family`.
Token	The placeholder token used inside templates.
Type	The data type of the attribute. Example: `text`.
Unit	The unit displayed with the value, if applicable.
Sort	The display order of the attribute.
Status	Shows whether the attribute is active.
Manage	Provides actions such as Edit and Delete.

Create or Edit an Attribute

The Create/Edit Attribute screen is used to define the details of a specification field.

Field	Description
Attribute Code	A unique code for the attribute. Example: `1-0001`.
Attribute Name	The name of the specification field. Example: `Camera family`.
Icon Type	Determines how the icon is rendered. Example: Icon Class.
Icon Class	The icon CSS class. Example: `fa fa-camera`, `bi bi-cpu`, `ti ti-settings`.
Icon Color	The color used for the icon. Example: `#111111`.
Icon Preview	Displays a preview of the selected icon.
Data Type	Defines the type of value. Example: text, number, date, boolean.
Unit	Optional unit label. Examples: px, mm, Gbps, MP.
Display Order	Controls the order in which the attribute appears.
Placeholder	Placeholder text shown when entering the attribute value.
Help Text	Optional explanation displayed to guide administrators or users.

Display Options

Display Options control how and where the attribute is used.

Option	Description
Required	Makes the attribute required when entering product data.
Filterable	Allows the attribute to be used as a filtering condition.
Comparable	Allows the attribute to be used in product comparison features.
Visible on Detail	Displays the attribute on the product detail page.
Visible on List	Displays the attribute in product lists when supported.
Show in Spec Table	Displays the attribute inside the specification table.
Active	Enables or disables the attribute.

Generated Attribute Code

The Generate code button creates sample HTML code based on the current attribute definitions. This code can be copied and pasted into a product detail template.

Example generated code:

<div class="ipx-spec__row">
    ##{ATTRIBUTE_CAMERA_FAMILY}##

    <div class="ipx-spec__label ipx-spec__label--with-icon">
        <i class="##{ATTRIBUTE_CAMERA_FAMILY_ICON}##" style="color:##{ATTRIBUTE_CAMERA_FAMILY_ICON_COLOR}##"></i>
        <span>##{ATTRIBUTE_CAMERA_FAMILY}##</span>
    </div>

    <div class="ipx-spec__value">##{ATTRIBUTE_CAMERA_FAMILY_VALUE}##</div>
</div>

How Token Replacement Works

Attribute tokens are placeholders. When the product page is rendered, iBoard replaces the placeholder with the actual value saved in the product or attribute data.

Token	Replaced With
`##{ATTRIBUTE_CAMERA_FAMILY}##`	The display name of the attribute. Example: `Camera family`.
`##{ATTRIBUTE_CAMERA_FAMILY_VALUE}##`	The value entered for the product. Example: `Mirrorless`.
`##{ATTRIBUTE_CAMERA_FAMILY_ICON}##`	The icon class saved for the attribute. Example: `fa fa-camera`.
`##{ATTRIBUTE_CAMERA_FAMILY_ICON_COLOR}##`	The icon color saved for the attribute. Example: `#111111`.

The token name is usually generated from the attribute name. For example, Camera family becomes ATTRIBUTE_CAMERA_FAMILY.

Recommended Workflow

Create an Attribute Group, such as OVERVIEW or SPEC.
Open the group and click New attribute.
Enter the attribute code and name.
Select the icon type and icon class if an icon is needed.
Set data type, unit, display order, placeholder, and help text.
Select the display options.
Save the attribute.
Click Generate code.
Copy the generated code.
Paste it into the product detail template.
Enter product-specific attribute values.
Preview the product detail page.

Common Use Cases

Use Case	Recommended Setup
Product overview section	Create an `OVERVIEW` group and add key attributes such as brand, model, and product family.
Technical specification table	Create a `SPEC` group and enable Show in Spec Table.
Product comparison	Enable Comparable for attributes that should appear in comparison views.
Product filtering	Enable Filterable for searchable or filterable attributes.
Icon-based feature display	Set an icon class and icon color, then use the generated icon token in the template.

Important Notes

Attribute codes should be unique within the group.
Attribute names should be clear and consistent because they are used to generate tokens.
Changing an attribute name may affect generated token names.
If a token does not display correctly, confirm that the attribute exists and has a value.
Deleting an attribute may remove or break related specification output.
Always test the product detail page after changing attribute definitions.

Best Practices

Use short and consistent attribute names.
Group related attributes together.
Use display order to control the final output sequence.
Use icons only when they improve readability.
Keep token names stable after templates are published.
Generate code again after adding or changing attributes.

Attribute Management is designed to separate product specification data from product detail templates. This makes product pages easier to maintain and update.