The compare page allows customers to compare n amount of selected products by their common attributes.

Where this element can be seen?

Product compare page. This page can be accessed by clicking on the compare icon at the header or by accessing the /compare route.

How should this element be designed?

<aside> ℹ️ Usually, styling this element takes from-to: 4-8h

</aside>

How the design may look like?

Design example #1

How to develop styles for this element?

Theme the ProductCompare component.

<aside> ➡️ Additionally, adjustments for smaller elements may be needed.

</aside>

Additionally, you might need to theme the following components:

• ProductCompareAttributeRow
• ProductCompareItem
• ProductComparePage route, as it is responsible for rendering all of these components

Examples:

ProductCompare.override.style.scss

.ProductCompare {
    ...
    &AttributeRow { // Select ProductCompareAttributeRow
        background-color: var(--background-light-grey-color);
        padding-block: 12px;
        border: none;

        @include mobile {
            padding-block: 0;
            margin-block: 0;
        }

        &:nth-child(2n) { // Make every second row white
            background-color: var(--color-white);
        }

        &-Title,
        &-Value {
            padding-inline: 15px;
            width: var(--product-compare-column-width);
            
            &, p, li { // Select the title, the value, and every p and li inside
                font-size: 14px;
                line-height: 20px;

                @include mobile {
                    font-size: 12px;
                    line-height: 16px;
                    text-align: start;
                }
            }
        }
    }
}

ProductCompareItem.component.js

/**
 * Overridden to remove rating
 */
renderProductDetails() { 
    // This is an example where we removed the rating stars from the item cards
    return (
        <div
          block="ProductCompareItem"
          elem="TitleWrapper"
        >
            { this.renderTitle() }
        </div>
    );
}

How the implementation may look like?

Implementation Example #1