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 B2B 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 B2B Demo Shop.

B2B-1

# PATH TO SCSS
1 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/breadcrumb
2 project/src/Pyz/Yves/ProductLabelWidget/Theme/default/components/molecules/label-group/label-group.scss
3 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/page-info/page-info.scss
4 project/src/Pyz/Yves/ProductImageWidget/Theme/default/components/molecules/image-gallery/image-gallery.scss
5 project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/rating-selector/rating-selector.scss
6 project/src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-configurator/product-configurator.scss
7 project/src/Pyz/Yves/PriceProductVolumeWidget/Theme/default/components/molecules/volume-price/volume-price.scss
8 project/src/Pyz/Yves/ProductGroupWidget/Theme/default/components/molecules/product-detail-color-selector/product-detail-color-selector.scss
9 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/custom-select/custom-select.scss
10 project/src/Pyz/Yves/ProductOptionWidget/Theme/default/components/molecules/product-options/product-options.scss
11 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/quantity-counter/quantity-counter.scss
12 project/src/Pyz/Yves/ShopUi/Theme/default/components/atoms/checkbox/checkbox.scss
13 project/src/Pyz/Yves/ShopUi/Theme/default/components/atoms/button/button.scss

B2B-2

# PATH TO SCSS
14 project/src/Pyz/Yves/ProductDetailPage/Theme/default/components/molecules/product-detail/product-detail.scss
15 project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/organisms/review-summary/review-summary.scss
project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/rating-selector/rating-selector.scss
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
16 project/src/Pyz/Yves/ProductReviewWidget/Theme/default/components/molecules/review/review.scss
17 project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/pagination/pagination.scss