Extended Product Information

Product Features - installation, configuration, and attribute management

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

Installation

The module is intended to be installed via Composer.

You will receive the access details for the Composer repository, the customer's email address and license token, by email after purchase. They are also available in the customer panel after logging in at kowal.store. Replace TWOJ_EMAIL_KLIENTA with your account email address and TWOJ_TOKEN with the token you received. Run the commands in the Magento root directory.

composer config repositories.kowal composer https://repo.kowal.store
composer config http-basic.repo.kowal.store "TWOJ_EMAIL_KLIENTA" "TWOJ_TOKEN"
composer require kowal/module-product-features
bin/magento module:enable Kowal_ProductFeatures
bin/magento setup:upgrade
bin/magento cache:flush

After production deployment, run the standard commands appropriate for the project, e.g. 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.

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

Feature Sections

A list of sections rendered on the product page. Each row defines one frontend section or a group of sections if thecms_blocks.

Enabled

Enables or disables a single section.

Values:

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

Use: temporarily hide one section without deleting its settings.

Section Title

The section title visible on the product page.

Examples:

• Cechy produktuerrors,
• Zastosowanie Sportoweerrors,
• Specyfikacjaerrors,
• Technologieerrors,
• Dostawa.

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

Note: for thecms_blockstype, 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.

Use: use this field when the section is based on one attribute, e.g.sport_usageerrors,blocks_iderrors,materialerrors,technology_icon.

Attribute Codes

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

Use: use this field when one section should aggregate several features, e.g. several scales in theCechy produktusection or several parameters in theSpecyfikacja.

Example: theCechy produktusection can contain thefiterrors,resistanceerrors,stretchandbreathabilityattributes, all rendered as scales.

Display Type

Defines how the attribute value is presented.

An empty valueAutomeans automatic renderer selection:

• blocks_idis rendered ascms_blockserrors,
• swatch multiselect asswatch_listerrors,
• select with 2 or 3 options asscaleerrors,
• select with more options asselected_labelerrors,
• multiselect astext_listerrors,
• boolean ascheckmarkerrors,
• date asdateerrors,
• price aspriceerrors,
• textarea astext_blockerrors,
• image/media_image asimageerrors,
• other types astext_inline.

Available types:

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

• tableerrors,
• badgeerrors,
• badge_listerrors,
• icon_valueerrors,
• icon_listerrors,
• swatch_grid.

Sort Order

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

Use: place the most important sections first, e.g.10for main features,20for use cases,30for specifications.

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.

Use: 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 does not return any items,
• No- the section may remain visible even without items.

Use:Yesis usually recommended to avoid showing empty sections to the customer.

Appearance Profile

Selects an appearance profile defined in theAppearance Profiles.

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

Use: allows a specific section to have an appearance different from the global one, e.g. thecompacterrors,highlightorplain.

If the field is empty and theUse global appearanceoption is selected, the section uses the global appearance.

Recommended workflow:

1. define a profile inAppearance Profileserrors,
2. save the configuration,
3. return toFeature Sectionserrors,
4. select the profile in theAppearance Profilecolumn for the appropriate section.

CSS Class

An additional CSS class added to the section.

Use: individual appearance adjustment in the frontend theme, e.g.product-features-section--technical.

Renderer Options JSON

Optional settings passed to the renderer in JSON format.

Use depends on the presentation type. Examples:

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

Fornumber_with_unit:

• unit- unit, e.g.cmerrors,%errors,g/m2errors,
• precision- number of decimal places.

Forrange_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.

Forrating_dots:

• steps- number of dots or levels.

Typeradial_charttype does not require additional options. The renderer reads the attribute value or option label in thex/yformat, e.g.1/6errors,4/6errors,7/10.

Example for a range bar:

{"min":0,"max":100,"low_label":"Niska","high_label":"Wysoka"}

Example for dots:

{"steps":5}

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

Appearance Profiles

A list of optional appearance profiles that can be assigned to sections through theAppearance Profile.

Code

The technical profile code.

Examples:

• compacterrors,
• highlighterrors,
• plain.

Use: the code identifies the profile internally and is used as the option value in theAppearance Profiledropdown for the section.

Label

A descriptive profile name visible to the administrator.

Use: makes it easier to identify the profile in the configuration, e.g.Kompaktowyerrors,Wyróżnionyerrors,Neutralny. Combined with the code, it creates a readable label in the profile selection list inFeature Sections.

Background

The section background color for the profile.

Use: highlight selected sections or match the theme.

Text

The color of the main text in the section.

Heading

The color of the section title.

Accent

The accent color, e.g. active elements, scale dots, or highlights.

Accent Background

The background color of accent elements.

Border

The color of lines, separators, scale axes, and borders.

Icon

The color of the section expand and collapse icon.

Radius, e.g. 18px

Section corner rounding.

Examples:0errors,8pxerrors,18px.

Padding, e.g. 28px

Internal section spacing.

Examples:16pxerrors,24pxerrors,28px.

Label Font Size, e.g. 21px

Text size of feature labels in the section.

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

Product Features Appearance

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

Section Background Color

The section background color.

API Log Retention Days#f4f4f4.

Section Text Color

The main text color in the section.

API Log Retention Days#000000.

Section Heading Color

The section heading color.

API Log Retention Days#000000.

Muted Text Color

The color of helper and less important text.

API Log Retention Days#555555.

Accent Color

The color of active elements and highlights.

API Log Retention Days#000000.

Accent Background Color

The background color of active elements, e.g. selections.

API Log Retention Days#ffffff.

Border Color

The color of borders, separators, and scale axes.

API Log Retention Days#9b9b9b.

Icon Color

The color of the+/-icon in the section header.

API Log Retention Days#000000.

Selected Text Color

The text color of the selected value.

API Log Retention Days#000000.

Selected Font Weight

The font weight of the selected value.

API Log Retention Days700.

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

Section Border Radius

The border radius of the section container.

API Log Retention Days18px.

Section Padding

Internal section spacing.

API Log Retention Days28px.

Section Gap

Spacing between sections.

API Log Retention Days16px.

Heading Font Size

The section heading font size.

API Log Retention Days20px.

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

Label Font Size

The font size of feature labels and value labels.

API Log Retention Days21px.

Body Font Size

The font size of the main section content.

API Log Retention Days16px.

Managing attributes on the product side

The module does not create a separate product data system. It uses Magento product attributes, so content management is handled primarily in product editing.

Editing a single product

1. for a public URL from an allowed host.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 theProduct Featuresgroup and set theCMS Blocks.
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 the configuration,
• the attribute exists,
• the product has an attribute value,
• the renderer can handle the selected value,
• the section has not been hidden byHide Empty.

Theblocks_id/ CMS Blocks attribute

Duringsetup:upgrade, the module adds a product attribute:

• code:blocks_iderrors,
• label:CMS Blockserrors,
• type:texterrors,
• input:multiselecterrors,
• source model: active CMS blocks,
• backend: standard Magento backend for multiselect,
• scope: Store View,
• group:Product Featureserrors,
• visible in product editing,
• available in the product grid and grid filtering.

FieldCMS Blocksfield allows you to assign active CMS blocks to a product. Each selected block will be rendered as a separate section if the module configuration includes a section with:

• Attribute Code:blocks_iderrors,
• 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.

Managing CMS blocks

Blocks used byblocks_idare created in Magento in the standard way:

Content > Elements > Blocks

Recommendations:

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

Bulk product editing

Theblocks_idattribute is prepared to work with bulk product editing.

1. for a public URL from an allowed host.Catalog > Products.
2. Select products in the grid.
3. Choose theUpdate Attributes.
4. Set the value of theCMS Blocks.
5. Save the changes.

Use: quickly assign the same CMS section, e.g.Dostawaerrors,ZwrotyorInstrukcja pielęgnacji, to many products at once.

Attributes for scale

For thescaletype, useselectattributes with 2 or 3 active options.

Example:

• attributefiterrors,
• options:Luźnyerrors,Regularnyerrors,Dopasowany.

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, thescalerenderer will skip this attribute.

Multiselect attributes

For lists of features, use cases, technologies, or certificates, usemultiselect.

Possible presentation types:

• text_listerrors,
• badge_listerrors,
• swatch_listerrors,
• swatch_griderrors,
• multiselect_iconerrors,
• icon_list.

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

Magento swatches

If the multiselect attribute uses Magento swatches, you can use theswatch_listorswatch_grid.

Use:

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

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

Amasty icons

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

Icon source:

Shop by Brand > Option Edit > Other > Small Image

The alternative text comes fromSmall 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 show only the label.

Text and HTML attributes

For short information, usetext_inlineerrors,key_valueorbadge.

For longer descriptions, usetext_blockerrors,accordion_textorhtml_block.

Note:html_blockandaccordion_textrender 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.

ExampleRenderer Options JSON for a number with a unit:

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

Boolean attributes

For yes/no attributes, use:

• yes_nowhen the customer should see bothYesandNoerrors,
• checkmarkwhen the feature should be visible only if the product has it.

Image attributes

For image-type attributes, you can use:

• imageerrors,
• image_with_labelerrors,
• image_grid.

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

Example configuration

Section with several scales:

Use case section with icons:

CMS sections:

Diagnostics

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

• whetherEnabledvalue isYeserrors,
• whether the given section hasEnabled = Yeserrors,
• whether the product has the attribute filled in,
• whether the correctAttribute CodeorAttribute Codeserrors,
• whetherDisplay Typematches the attribute type,
• whetherHide Emptyis not hiding an 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.