Product Price

Styles for a product price used in product_price macro.

Structurally .product-price element contains following element:

• .product-price__base-price
• .product-price__final-price
• .product-price__unit-price
• .product-price__regular-price
• .product-price__lowest-historical-price
• .product-price__shipping-cost-info
• .product-price__special-offer-duration
• .product-price__price-outside-loyalty-program
• .product-price__price-outside-loyalty-program-link

LESS

You can modify any product price less variable in your User Less section to change a product price styles.

Product Price variables

Variables used to style a product price.

@productPriceBasePriceMarginBottom: 8;
@productPriceBasePriceWithUnitPriceMarginBottom: 4;

@productPriceUnitPriceMarginBottom: 16;

@productPriceSpecialOfferDurationColor: @secondaryColors500;
@productPriceLowestHistoricalPriceColor: @globalFontColor;
@productPriceLowestHistoricalPriceMarginBottomInPx: 6;

@productPriceRegularPriceFontSizeInPx: 14;
@productPriceRegularPriceLineHeightInPx: 20;
@productPriceRegularPriceFontSizeInPxSecondary: 12;

@productPriceSpecialOfferDurationFontSizeInPx: 14;
@productPriceSpecialOfferDurationLineHeightInPx: 20;

@productPriceLowestHistoricalPriceFontSizeInPx: 14;
@productPriceLowestHistoricalPriceLineHeightInPx: 20;
@productPriceLowestHistoricalPriceFontSizeInPxSecondary: 12;

@productPriceOtherPriceValueFontSizeInPx: 14;
@productPriceOtherPriceValueLineHeightInPx: 20;

@productPriceMaxWidthInPxMobile: 288;

@productPriceRegularPriceFontSizeInPxMobile: 12;
@productPriceRegularPriceLineHeightInPxMobile: 20;

@productPriceSpecialOfferDurationFontSizeInPxMobile: 12;
@productPriceSpecialOfferDurationLineHeightInPxMobile: 20;

@productPriceLowestHistoricalPriceFontSizeInPxMobile: 12;
@productPriceLowestHistoricalPriceLineHeightInPxMobile: 20;

@productPriceOtherPriceValueFontSizeInPxMobile: 12;
@productPriceOtherPriceValueLineHeightInPxMobile: 20;

@productPriceLowestHistoricalPriceMarginBottomInPxMobile: 4;

Product Price styles

Here are standard product price styles.

.product-price {
    &__base-price {
        display: flex;
        align-items: flex-end;
        .pixel-to-rem(gap, @gridGutter * 0.25);
        .pixel-to-rem(margin-bottom, @productPriceBasePriceMarginBottom);
    }

    &__final-price {
        display: flex;
        .pixel-to-rem(gap, @gridGutter * 0.25);
    }

    &__unit-price {
        display: flex;
        margin-bottom: @globalSpacing;
    }

    &__regular-price {
        display: flex;
        .pixel-to-rem(gap, @gridGutter * 0.25);
        margin-top: @globalSpacing;
    }

    &__lowest-historical-price {
        display: flex;
        .pixel-to-rem(gap, @gridGutter * 0.25);
    }

    &__shipping-cost-info {
        color: @productPriceRowInfoColor;
        margin-top: @globalSpacing;
    }

    &__special-offer-duration {
        margin-bottom: @globalSpacing;
    }

    &__price-outside-loyalty-program {
        margin-top: @globalSpacing;

        &-link {
            display: block;
        }
    }
}