Product Attribute Grouping

1. Overview

This guide explains how to configure and display product attributes grouped with HTML div wrappers in your storefront's product pages. By following the steps outlined here, you will be able to organize attributes with shared properties into a single group, ensuring they display neatly while maintaining functionality like hiding or showing attributes based on logic. This enhancement improves the customisation ability of attribute layouts, making it easier for administrators to customise the styling of select groups of attributes.

For additional information and detailed tutorials, the Infigo Academy offers extensive resources on a wide variety of topics. Visit the Infigo Academy to search and browse our content.

2. Contents

1. Overview
2. Contents
3. Key Points and Takeaways
4. Key Settings
5. Scenario-Based Guide
   • Scenario 1: Grouping Product Attributes for a Storefront
6. FAQs
7. Alternate Search Terms

3. Key Points and Takeaways

• New Entity: Product Attribute Groups: Attributes are grouped using the new Product Attribute Groups page.
• Display Order: Attributes within a group follow their display order, with groups themselves ordered based on the lowest display order of their first attribute.
• UI Enhancements: Div wrappers provide better control over visual appearance of grouped attributes using CSS.
• Attribute Logic: Group visibility integrates with existing attribute logic for hiding and showing attributes dynamically.

4. Key Settings

1. Attribute Groups

• Path: Admin Dashboard > Catalogue> Attributes > Product Attribute Groups
• Explanation: Create and manage groups to categorize attributes with a shared purpose or behavior.

5. Scenario-Based Guide

Scenario 1: Grouping Product Attributes for a Storefront

Problem: You want to group related attributes (e.g., quantity-based attributes) and display them within a single div wrapper on the product page for further visual customisation.

Solution:

1. Navigate to Admin Dashboard > Catalogue> Attributes > Product Attribute Groups
2. Create a new group by providing:
   • A System Name for backend use.
   • An optional Friendly Name for UI display.
3. When assigning attributes to a product (Product Management > Edit [on your chosen product] > Product Variants > Edit > Attributes Tab):
   • Select the associated group in the Group column when specifying the attributes within a product.
4. Save the changes. The attributes will now display within a div wrapper which can easily be used for further visual customisation.
   • Please note: Knowledge of HTML and CSS will be required to stylize the resulting group.

6. FAQs

Q1. Can I add attributes to multiple groups?
No, each attribute on a single product can belong to only one group at a time.

Q2. What happens if no group is assigned to an attribute?
Attributes without a group will display individually without a wrapper.

Q3. Are grouped attributes compatible with custom styling?
Yes, you can apply custom CSS classes to group divs for tailored styling.

Q4. How does display order work for groups?
Groups are ordered by the display order of their first attribute, followed by creation date for ties.

For additional information and detailed tutorials, the Infigo Academy offers extensive resources on a wide variety of topics. Visit the Infigo Academy to search and browse our content.