Frontend Developer Technical Test
Introduction
This is the technical test for our frontend developer position. We have created a Figma design file with all design elements for desktop and mobile ready for you to code. Your task is to take these designs and build a Shopify theme for this specific page.
The details
Mega Menu
When hovering over the first "Category" link, a mega menu should appear with four groups of links and an image with a caption.
Mobile Menu
Apply the same link treatment to create a multi-tier mobile menu.
Quick View
Clicking on the "Quick View" button (which should appear when hovering over a product) should trigger a modal with product information, and this "Add to Cart" button should add the item to the cart without closing the modal and update the cart state to reflect the new cart count.
Featured Product Slider
Create a Shopify section to preview a collection of products in a slider. You can choose which slider script you'd like to use, as long as the website matches the design.
What we'll be looking for
On the UX/UI side...
- Your theme should be as close to the design as possible. We're looking for you to use the same fonts (from Google Fonts), sizes, letter spacing, element spacing, etc.
- We'll be testing your theme at all browser widths, so the design should flow regardless of browser width.
- Animations are great, but don't go overboard. Keep any animations to a reasonable level.
- Don't worry about links going to specific pages. All we'll be testing are the elements and functionality listed above.
On the development side...
- Your code should be clean and consistent.
- We'll be looking closely at your preferred methods for JavaScript and CSS. We're fans of BEM (but this is not a requirement), ES6, and keeping libraries to a minimum.
- Code should be placed in the appropriate files.
Get started
To get started, you'll need to create a Shopify development store.
This Shopify theme should be built with Slate v1. Make sure you have all necessary requirements set on your computer by following the instructions in the aforementioned link.
Run yarn create slate-theme taproom-test to begin working on your theme.
Build out the page with the requirements mentioned above. Create a GitHub repo to share with us and send over the myshopify URL so we can request collaborator access.
Questions?
If you have any questions or run into issues, send an email to kelly@thetaproom.com.