Frontend customization example: B2C Product Details page

Last updated:
Edit on GitHub

In Spryker, front-end elements have dedicated SCSS styles. To show you how to customize the Spryker front end, we broke down the Product Details page from our B2C Demo Shop into separate elements with their respective style files. To customize a particular element, you adjust the code in the respective style file.

You can see the full version of this page in our B2C Demo Shop.

B2C-1

# PATH TO SCSS
1 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/breadcrumb/breadcrumb.scss
2 project/src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.scss
3 project/src/Pyz/Yves/ProductLabelWidget/Theme/default/components/molecules/label-group/label-group.scss
4 project/src/Pyz/Yves/ShopUi/Theme/default/components/atoms/title/title.scss
5 project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/rating-selector/rating-selector.scss
6 project/src/Pyz/Yves/PriceProductVolumeWidget/Theme/default/components/molecules/volume-price/volume-price.scss
7 project/src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/variant-resetter/variant-resetter.scss
8 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/custom-select/custom-select.scss
9 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/toggler-item/toggler-item.scss
project/src/Pyz/Yves/ShopUi/Theme/default/components/atoms/title/title.scss
10 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/quantity-counter/quantity-counter.scss
11 project/src/Pyz/Yves/ShopUi/Theme/default/components/atoms/button/button.scss

B2C-2

# PATH TO SCSS
12 project/src/Pyz/Yves/ShopUi/Theme/default/components/atoms/title/title.scss
13 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/toggler-item/toggler-item.scss
14 project/src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-detail-option/product-detail-option.scss

B2C-3

# PATH TO SCSS
15 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/product-slider-title/product-slider-title.scss
16 project/src/Pyz/Yves/ShopUi/Theme/default/components/atoms/title/title.scss
17 project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review-average-display/review-average-display.scss
project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review-distribution-display/review-distribution-display.scss
project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review-distribution-display/review-distribution-display.scss
project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/rating-selector/rating-selector.scss