Capybara - Storefront UI based theme for Vue Storefront

Stay connected

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 Discord or via contributors@vuestorefront.io. This demo site is connected to Magento2.

📺 Video demo

✨ Features

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 discord:

• Tomasz Kikowski - @qiqqq
• Tomasz Kostuch - @gibkigonzo
• Paweł Smyrek - @psmyrek
• Rafał Makara - @rmakara

🤝 Contributing

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.

🔌 Installation

To be able to use new Capybara theme in your Vue Storefront installation, you need to:

1. Install lerna globally:

   npm install -g lerna
   

   or

   yarn global add lerna
   

2. Configure vsf-capybara repository as a git submodule in theme path of your Vue Storefront workspace, and then track master branch:

   git submodule add -b master https://github.com/DivanteLtd/vsf-capybara.git src/themes/capybara
   

3. Fetch all the data:

   git submodule update --init --remote
   

4. Generate local.json file from script generate-local-config.js:

   node src/themes/capybara/scripts/generate-local-config.js
   

5. Update Vue Storefront configuration by copying local.json file from src/themes/capybara to root config directory.

6. For Vue Storefront 1.12.3 and earlier include "children_data.*" as includeFields for category in default.json.

7. Update TypeScript compiler option in tsconfig.json in root directory: change value for compilerOptions.paths.theme/* from default theme ["src/themes/default/*"] to brand new Capybara theme: ["src/themes/capybara/*"].

8. Download all dependencies and start development server:

   lerna bootstrap && yarn dev
   

9. That’s all! Now after opening your development server (http://localhost:3000 by default) you should see Vue Storefront with Capybara theme! 🎉

Design customization

If you want to customize the Capybara designs you can start with this amazing Figma file by Aditya Patel from HotWax Commerce.