Product Features - installation, configuration, and attribute management

This document describes the configuration of the kowal/module-product-features module, the meaning of all admin fields, and working with attributes on the product side.

Installation

The module is intended for installation via Composer.

composer config repositories.module.product.features vcs https://github.com/kowalco/product-featurescomposer config --global --auth github-oauth.github.com composer require kowal/module-product-featuresbin/magento module:enable Kowal_ProductFeaturesbin/magento setup:upgradebin/magento cache:flush

After production deployment, standard commands appropriate for the project should be run, for example DI compilation and static asset deployment, according to the Magento operating mode.

Configuration location

The module configuration is located in the Magento admin panel:

Stores > Configuration > Catalog > Product Features

Appearance settings are located in a separate group:

Stores > Configuration > Catalog > Product Features Appearance

Configuration fields are available at the Default, Website, and Store View levels. This allows different store views to have different feature sections or a different appearance.

Product Features

Enabled

Enables or disables the module for the given configuration scope.

Values:

• Yes - product feature sections are rendered on the product page,
• No - the module does not return sections and the block does not appear on the frontend.

Usage: quickly disable the module for the entire store, a selected Website, or a Store View without removing the section configuration.

Feature Sections

List of sections rendered on the product page. Each row defines one frontend section or a group of sections if the cms_blocks type is used.

Enabled

Enables or disables a single section.

Values:

• Yes - the section is included in rendering,
• No - the section is skipped.

Usage: temporarily hide one section without deleting its settings.

Section Title

The section title visible on the product page.

Examples:

• Product Features,
• Sports Use,
• Specification,
• Technologies,
• Delivery.

Usage: the name should be understandable to the customer and does not have to match the technical attribute name.

Note: for the cms_blocks type, the child section title is taken from the CMS block title.

Attribute Code

A single product attribute used by the section. The field is a dropdown with a list of product attributes.

Usage: use this field when the section is based on a single attribute, for example sport_usage, blocks_id, material, technology_icon.

Attribute Codes

A list of multiple product attributes used by one section. The field is a multiselect.

Usage: use this field when one section should aggregate several features, for example several scales in the Product Features section or several parameters in the Specification section.

Example: the Product Features section may contain the attributes fit, resistance, stretch and breathability, all rendered as scales.

Display Type

Defines the presentation method for the attribute value.

An empty Auto value means automatic renderer selection:

• blocks_id is rendered as cms_blocks,
• swatch multiselect as swatch_list,
• select with 2 or 3 options as scale,
• select with more options as selected_label,
• multiselect as text_list,
• boolean as checkmark,
• date as date,
• price as price,
• textarea as text_block,
• image/media_image as image,
• other types as text_inline.

Available types:

In the admin panel, some items are marked as available in future release. This applies to types that are already visible in the configuration list but do not yet have their own final frontend presentation:

• table,
• badge,
• badge_list,
• icon_value,
• icon_list,
• swatch_grid.

Sort Order

The order of sections on the product page. A lower number means earlier display.

Usage: place the most important sections first, for example 10 for main features, 20 for use cases, 30 for specification.

Default State

The initial state of the section on the product page.

Values:

• Expanded - the section is expanded by default,
• Collapsed - the section is collapsed by default.

Usage: the most important content can be shown immediately, while longer supporting information can remain collapsed.

Hide Empty

Determines whether the section should be hidden when there is no data to display.

Values:

• Yes - the section is hidden if the product has no attribute value or the renderer returns no items,
• No - the section may remain visible even without items.

Usage: Yes is usually recommended so the customer does not see empty sections.

Appearance Profile

Selects an appearance profile defined in the Appearance Profiles field.

The field is a dropdown. The administrator no longer enters the code manually, but selects a ready-made profile from the list, usually in the code - label format.

Usage: allows a specific section to have a different appearance than the global one, for example the compact, highlight, or plain profile.

If the field is empty and the Use global appearance option is selected, the section uses the global appearance.

Recommended workflow:

1. define the profile in Appearance Profiles,
2. save the configuration,
3. go back to Feature Sections,
4. select the profile in the Appearance Profile column for the appropriate section.

CSS Class

Additional CSS class added to the section.

Usage: individual appearance customization in the frontend theme, for example product-features-section--technical.

Renderer Options JSON

Optional settings passed to the renderer in JSON format.

Usage depends on the presentation type. Examples:

{'unit':'cm','precision':1}

For number_with_unit:

• unit - unit, for example cm, %, g/m2,
• precision - number of decimal places.

For range_bar:

• min - minimum range value,
• max - maximum range value,
• low_label - label for the beginning of the range,
• high_label - label for the end of the range.

For rating_dots:

• steps - number of dots or levels.

The radial_chart type does not require additional options. The renderer reads the attribute value or option label in the x/y format, for example 1/6, 4/6, 7/10.

Example for a range bar:

{'min':0,'max':100,'low_label':'Low','high_label':'High'}

Example for dots:

{'steps':5}

Note: the field must contain valid JSON. An invalid value is ignored by the renderer.

Appearance Profiles

List of optional appearance profiles that can be assigned to sections through the Appearance Profile field.

Code

Technical profile code.

Examples:

• compact,
• highlight,
• plain.

Usage: the code identifies the profile internally and is used as the option value in the Appearance Profile dropdown for a section.

Label

Descriptive profile name visible to the administrator.

Usage: makes it easier to recognize the profile in configuration, for example Compact, Highlighted, Neutral. Combined with the code, it creates a clear label in the profile selection list in Feature Sections.

Background

Section background color for the profile.

Usage: highlight selected sections or match the theme.

Text

Primary text color in the section.

Heading

Section title color.

Accent

Accent color, for example active elements, scale dots, or highlights.

Accent Background

Background color of accent elements.

Border

Color of lines, separators, scale axes, and borders.

Icon

Color of the section expand and collapse icon.

Radius, e.g. 18px

Section corner rounding.

Examples: 0, 8px, 18px.

Padding, e.g. 28px

Inner section spacing.

Examples: 16px, 24px, 28px.

Label Font Size, e.g. 21px

Font size of feature labels in the section.

Examples: 16px, 18px, 21px, 1.25rem.

Product Features Appearance

This group contains the global appearance of sections. The settings are converted into CSS variables and applied to the module wrapper.

Section Background Color

Section background color.

Default: #f4f4f4.

Section Text Color

Primary text color in the section.

Default: #000000.

Section Heading Color

Section heading color.

Default: #000000.

Muted Text Color

Color of supporting and less important text.

Default: #555555.

Accent Color

Color of active elements and highlights.

Default: #000000.

Accent Background Color

Background color of active elements, for example selections.

Default: #ffffff.

Border Color

Color of borders, separators, and scale axes.

Default: #9b9b9b.

Icon Color

Color of the + / - icon in the section heading.

Default: #000000.

Selected Text Color

Color of the selected value text.

Default: #000000.

Selected Font Weight

Font weight of the selected value.

Default: 700.

Examples: 400, 500, 600, 700, bold.

Section Border Radius

Corner rounding of the section container.

Default: 18px.

Section Padding

Inner section spacing.

Default: 28px.

Section Gap

Spacing between sections.

Default: 16px.

Heading Font Size

Font size of the section heading.

Default: 20px.

Examples: 18px, 20px, 1.25rem, clamp(18px, 2vw, 22px).

Label Font Size

Font size of feature labels and value labels.

Default: 21px.

Body Font Size

Font size of the main section content.

Default: 16px.

Attribute management on the product side

The module does not create a separate product data system. It uses Magento product attributes, so content management takes place mainly in product editing.

Single product editing

1. Go to Catalog > Products.
2. Open the product for editing.
3. Fill in the attributes used by the module sections.
4. If the product should use CMS blocks, go to the Product Features group and set the CMS Blocks field.
5. Save the product.
6. Clear the cache if the project requires it.

The section will appear on the frontend only if:

• the module is enabled,
• the section is enabled in configuration,
• the attribute exists,
• the product has an attribute value,
• the renderer can handle the selected value,
• the section has not been hidden by Hide Empty.

Attribute blocks_id / CMS Blocks

During setup:upgrade, the module adds a product attribute:

• code: blocks_id,
• label: CMS Blocks,
• type: text,
• input: multiselect,
• source model: active CMS blocks,
• backend: standard Magento backend for multiselect,
• scope: Store View,
• group: Product Features,
• visible in product editing,
• available in the product grid and grid filtering.

The CMS Blocks field allows active CMS blocks to be assigned to the product. Each selected block will be rendered as a separate section if the module configuration contains a section with:

• Attribute Code: blocks_id,
• Display Type: cms_blocks.

The section title on the frontend comes from the CMS block title, and the content comes from the block content. Inactive blocks or blocks unavailable for the Store View are not rendered.

CMS block management

Blocks used by blocks_id are created in the standard Magento way:

Content > Elements > Blocks

Recommendations:

• use clear block titles because they may be visible as section titles,
• assign blocks to the correct Store View,
• set the block as active,
• store descriptive content in blocks that should be shared by many products, such as delivery, returns, instructions, or technologies.

Mass product editing

The blocks_id attribute is prepared for use with mass product editing.

1. Go to Catalog > Products.
2. Select products in the grid.
3. Choose the Update Attributes action.
4. Set the value of the CMS Blocks field.
5. Save the changes.

Usage: quickly assign the same CMS section, for example Delivery, Returns, or Care Instructions, to multiple products at the same time.

Attributes for scale

For the scale type, use select attributes with 2 or 3 active options.

Example:

• attribute fit,
• options: Loose, Regular, Fitted.

The product should have one of the options selected. The module will show all scale options and highlight the one assigned to the product.

If the attribute has fewer than 2 or more than 3 options, the scale renderer will skip that attribute.

Multiselect attributes

For lists of features, use cases, technologies, or certificates, use multiselect attributes.

Possible presentation types:

• text_list,
• badge_list,
• swatch_list,
• swatch_grid,
• multiselect_icon,
• icon_list.

The product may have several values selected. The module renders only the values assigned to the product.

Magento swatches

If a multiselect attribute uses Magento swatches, you can use the swatch_list or swatch_grid type.

Usage:

• technology icons,
• colors,
• use-case pictograms,
• material markings.

If the option has an image swatch, the module will display the image. If it has a color or text swatch, the module will use the appropriate variant.

Amasty icons

For the multiselect_icon type, the module attempts to retrieve the option icon from Amasty ShopbyBrand / ShopbyBase.

Icon source:

Shop by Brand > Option Edit > Other > Small Image

Alt text comes from Small Image Alt, and if it is missing, from the option label.

If Amasty is not installed or the option has no icon, the module will display only the label.

Text and HTML attributes

For short information, use text_inline, key_value, or badge.

For longer descriptions, use text_block, accordion_text, or html_block.

Note: html_block and accordion_text render HTML, so they should be used only for trusted admin content.

Numeric attributes

For numeric values, you can use:

• number_with_unit - when the number requires a unit,
• range_bar - when the value should be shown as progress within a range,
• rating_dots - when the value describes a level or rating.

Example Renderer Options JSON for a number with a unit:

{'unit':'%','precision':0}

Boolean attributes

For yes/no attributes, use:

• yes_no, when the customer should see both Yes and No,
• checkmark, when the feature should be visible only if the product has it.

Image attributes

For image-type attributes, you can use:

• image,
• image_with_label,
• image_grid.

The module builds the image URL based on the Magento product media directory and uses the attribute label as the alt text.

Example configuration

Section with several scales:

Use-case section with icons:

CMS sections:

Troubleshooting

If a section does not appear on the frontend, check:

• whether module Enabled is set to Yes,
• whether the given section has Enabled = Yes,
• whether the product has the attribute filled in,
• whether the correct Attribute Code or Attribute Codes was selected,
• whether the Display Type matches the attribute type,
• whether Hide Empty is not hiding the empty section,
• whether the attribute is available for the given Store View,
• whether the CMS block is active and assigned to the correct Store View,
• whether the Magento cache has been refreshed.