Magento 2 theme created on top of own components library, designed from scratch by SNOW.DOG front-end team following design systems methodology principles.
- Magento 2 Open Source + Alpaca theme - https://alpaca-ce-demo.snowdog.pro
- Magento 2 Open Source + Alpaca theme + Solr based catalog* - https://alpaca-ce-solr-demo.snowdog.pro
- Magento 2 Commerce + Alpaca theme - https://alpaca-demo.snowdog.pro
- Magento 2 Commerce + Alpaca theme + Solr based catalog* - https://alpaca-solr-demo.snowdog.pro
- Apache Solr based catalog is an internal Snowdog product, not open-sourced. If you are interested in having it in your store, please contact us at email@example.com
- Install Magento using Composer
composer require snowdog/theme-frontend-alpaca
dev/tools/frontools/config/themes.jsonconfig file following one of the samples:
- Install Frontools dependecies and setup config files
cd vendor/snowdog/frontools && yarn && gulp setup
- In Frontools directory (or
/toolsin project root) run
gulp styles && gulp babel && gulp svgto compile all static assets
Child theme packages structure
Each theme is built from two packages:
- Magento theme
- Components library
This leads to 4 packages linked together to create a custom theme based on Alpaca:
- Alpaca components
- Alpaca theme - depends on Alpaca components
- Custom components - depends on Alpaca components
- Custom theme - depends on Alpaca theme and Custom theme components
Inheritance of components is solved on Frontools level, it's based on the same rules as in Magento core - files from child overwrite the parent.
In the theme, you should keep almost only templates and JS. Do not create any non-magento specific styles inside your theme. Components are designed to be able to reflect your store UI, without having to run Magento instance. Implementing some part of UI directly inside theme will make components preview useless and you will lose all benefits of writing UI in separation.
We don't want to mess with the checkout and product gallery (Fotorama) templates, nor styling, so these two parts are copy-pasted from the SASS Blank theme.