CSS hierarchy

You can easily adjust the CSS hierarchy when overwriting CSS/SCSS styles with the "Body class" in the ThemeWare® configuration. This allows you to avoid using !important statements.

• Body class: Tab "Others" => Block "Expert settings" => Section "Individual CSS class"

For example, enter "myshop" here and place this at the beginning of the corresponding CSS/SCSS selector.

CSS

// Before
.product-detail-ordernumber-container .product-detail-ordernumber-label {
    font-weight: 300 !important; 
}

// Better
.myshop .product-detail-ordernumber-container .product-detail-ordernumber-label {
    font-weight: 300; 
}

SCSS

// Before
.product-detail-ordernumber-container {
    .product-detail-ordernumber-label {
        font-weight: 300 !important;
    }
}

// Better
.myshop {
    .product-detail-ordernumber-container {
        .product-detail-ordernumber-label {
            font-weight: 300;
        }
    }
}