x-product.scss

Tha main product's page file.

WARNING: All the classes bellow are required.

.x-product-header

The product's header container.

.x-product-gallery

The galerry container. You should customize right above the import line.

All the elements inside this element are generated by the platform.

.x-title

The main title.

All the elements inside this element are generated by the platform.

.x-reference

The product's reference code.

.x-rating

The total rating for this product. You should customize right above the import line.

All the elements inside this element are generated by the platform.

.x-description.short

Short product's description.

All the elements inside this element are generated by the platform.

.x-price

The product's price container.

All the elements inside this element are generated by the platform.

.x-sku-selection

The product's sku selection container. Usually for sizes and/or colors. All the elements inside this element are generated by the platform.

.x-payment-methods

Payment methods allowed for the product. Usually hidden element.

All the elements inside this element are generated by the platform.

.x-delivery

The delivery's information.

All the elements inside this element are generated by the platform.

.x-social

Share buttons. Only facebook is available by default.

All the elements inside this element are generated by the platform.

.x-button.buy

The buy button container.

All the elements inside this element are generated by the platform.

.x-buy-together

Buy together container.

All the elements inside this element are generated by the platform.

.x-product-content

The product full content container.

.x-description.full

Full product's description.

All the elements inside this element are generated by the platform.

.x-specs

The product's specs table.

All the elements inside this element are generated by the platform.

.x-carousel.x-qvvt/.x-qvct/.x-qcct

Additional carousels, enable only the containers that you will use.

All the elements inside this element are generated by the platform.

.x-reviews

The product's reviews container.

All the elements inside this element are generated by the platform.

@import "compass/css3";

.x-product-header {


    .x-product-gallery {
        @import "vtex/product/_ProductImage.scss";
    }


    .x-product-info {
        .x-title {}


        .x-reference {}

        .x-rating {
            @import "vtex/product/_evaluationRate.scss";
        }


        .x-description.short {}

        .x-price {
            @import "vtex/product/_skuPrice.scss";
        }


        .x-sku-selection {
            @import "vtex/product/_skuSelection.scss";
        }


        .x-payment-methods {
            display: none;
        }

        .x-delivery {
            @import "vtex/product/_Delivery.scss";
        }


        .x-social {}

        .x-button.buy {
            @import "vtex/product/_BuyButton.scss";
        }

    }
}

.x-buy-together {
    @import "vtex/product/_BuyTogether.scss";
}


.x-product-content {


    .x-description.full {}

    .x-specs {}
}



.x-carousel {
    &.x-qvvt {
        display: none;
    }
    &.x-qvct {
        display: none;
    }
    &.x-qcct {
        display: none;
    }
}


.x-reviews {
    @import "vtex/product/_UserReview.scss";
}