Frontend customization example: Product Details page
Edit on GitHubIn 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 Marketplace into separate elements with their respective style files. To customize a particular element, you override it with the desired code in the respective style file.
| # | PATH TO SCSS |
|---|---|
| 1 | project/src/Pyz/Yves/ShopUi/Theme/default/components/molecules/breadcrumb-step/breadcrumb-step.scss |
| 2 | project/vendor/spryker-shop/price-product-volume-widget/src/SprykerShop/Yves/PriceProductVolumeWidget/Theme/default/components/molecules/volume-price/volume-price.scss |
| 3 | project/vendor/spryker-shop/product-review-widget/src/SprykerShop/Yves/ProductReviewWidget/Theme/default/components/molecules/rating-selector/rating-selector.scss |
| 4 | project/vendor/spryker-shop/product-group-widget/src/SprykerShop/Yves/ProductGroupWidget/Theme/default/components/molecules/product-detail-color-selector/product-detail-color-selector.scss |
| 5 | project/vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/atoms/select/select.scss |
| 6 | project/vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/atoms/button/button.scss |
| # | PATH TO SCSS |
|---|---|
| 3 | project/vendor/spryker-shop/product-review-widget/src/SprykerShop/Yves/ProductReviewWidget/Theme/default/components/molecules/rating-selector/rating-selector.scss |
| 7 | project/vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/pagination/pagination.scss |
Thank you!
For submitting the form