This is our development test that is required from all new potential developers.
If you've got this far in the recruitment process, well done! Onto the fun stuff...
In this repository, you will find a barebones Shopify theme with a very basic header and footer.
We would like you to use the code in this repository as a starting point and create a new "featured products" section that has different functionality on desktop compared to mobile.
We've included a JPEG of the product card design in this repository to show you how it should look.
Limit yourself to 2-3 hours on this test. If you do not complete all the work in that time, do not worry, submit what you have. We are looking at your approach rather than completion.
- On desktop: the product cards should automatically drop into a grid format (4 product cards across should work fine).
- On mobile: the product cards in a slider. This can be achieved by using a Slider library of your choice but our preference here at Brave the Skies is Swiper.js.
- You will notice that the scaffold is bundled with Webpack and Tailwind. This is required to use throughout the task.
We've included a JPEG of the product card design in this repoistory to show you how it should look like. On the left, we have a non-hovered state and on the right, hovered. If you don't have chance to get around to doing the add to cart functionality, that's not an issue.
In the design, there are badges on the product card. It your choice on how you want to show these on your work, whether it be tags or metafields. Having these included will show us your understanding of the intricacies of Shopify and how the products are catalogued.
On the second image in the design, there is a Quick Add to Cart Button.
We are currently showing the variants under the product cards in the designs. At the moment, these look to be populated using a solid colour.
Before developing, you will need to install the Shopify CLI. Shopify provide a great guide on how to install it and all the required pre-requisites that can be viewed here
| Operating system | Requirements |
|---|---|
| MacOS | Note: When you install Shopify CLI using Homebrew, Homebrew installs Node.js, Ruby, and Git for you. |
| Windows |
|
| Linux |
|
- Create a new Shopify development store from your Shopify Partners dashboard.
- Open your local terminal / command prompt.
- Clone the most recent version of this theme using SSH:
git clone [email protected]:bravetheskies/bts-developer-test.git- Navigation to the folder you have just cloned:
cd bts-developer-test- Update /shopify.presets.json with the URL of the store you just created. e.g.
themoonbase.myshopify.combecomesyour-new-store.myshopify.com. - Install the dependencies for the project:
npm ci- Once installed, run the following command to start development:
npm start- Make sure deploy the theme to your store (zip the files and upload them).
- Provide us with a ZIP of your source code.
- Provide us with a preview link and storefront password for your work.