Capybara – Storefront UI based theme for Vue Storefront
New default template theme for Vue Storefront, based on Storefront UI. 90% of the Capybara code is closed in the Storefront UI library. Thanks to it, Capybara can maintain its flexibility, but minimize the risk of errors.
🔨 Current status: Production Ready
We have prepared short introduction to our coding standards and conventions we are using in Capybara theme.
🚀 See it in action
Try out our open demo and if you like it first give us some star on Github ★ and then contact us on Vue Storefront Official Slack or via [email protected]
This demo site is connected to Magento2.
📺 Video demo
Capybara theme provides out of the box ready to use elements, like Cart, Checkout, Modals or Product-related components – to name only a few of them, which all are based on awesome Storefront UI. It provides new look & feel for the Vue Storefront with simpler development experience. You can just grab it and use it, or you can play around to re-design existing components and build something new easily.
If you’re new and need some guidance feel free to visit out forum or reach anyone from the core team on our slack:
- Tomasz Kikowski – @qiqqq
- Tomasz Kostuch – @gibkigonzo
- Paweł Smyrek – @psmyrek
- Rafał Makara – @rmakara
We are currently in the early developer’s preview phase. If you would like to help us improve this beautiful theme we’d be more than happy if you want to contribute! Here you can find all the required information how to start.
To be able to use new Capybara theme in your Vue Storefront installation, you need to:
npm install -g lerna
yarn global add lerna
vsf-capybararepository as a git submodule in theme path of your Vue Storefront workspace, and then track
git submodule add -b master https://github.com/DivanteLtd/vsf-capybara.git src/themes/capybara
Fetch all the data:
git submodule update --init --remote
local.jsonfile from script
Update Vue Storefront configuration by copying
Update TypeScript compiler option in
tsconfig.jsonin root directory: change value for
theme/*from default theme
["src/themes/default/*"]to brand new Capybara theme:
Download all dependencies and start development server:
lerna bootstrap && yarn dev
That’s all! Now after opening your development server (http://localhost:3000 by default) you should see Vue Storefront with Capybara theme! 🎉
If you want to customize the Capybara designs you can start with this amazing Figma file by Aditya Patel from HotWax Commerce.