Welcome, and congratulations!
This repository contains a fresh copy of Debut, the starter theme provided with every new Shopify store. Debut is great because it's a relatively blank slate for anyone familiar with Shopify, and is easy to understand for a neophyte.
This developer test is intentionally straight forward. It allows you to get a feel for what it's like to work with us, and us to get an idea of how you solve problems.
Try to have fun with this, and feel free to reach out with any questions you might have.
Let's get started.
Before starting, ensure you have ThemeKit, Git, and a text editor like VSCode installed on your machine.
You should also have a mild understanding of Shopify's theme settings, Liquid template language, Ajax API, and are familiar with the git workflow.
Finally, as this is a frontend developer role, you should be comfortable writing Javascript, CSS, and HTML.
- Create a Shopify partners account
- Create a development store
- Import the provided
products.csv - Create a private app for ThemeKit
- Check out this guide
- Create a new Git repository with this code
- Github or BitBucket preferred
- Can be public or private
- Create a development branch off of master
- Complete the requirements
- Within your dev store
- Using the provided Debut theme (what this codebase is)
- Review/QA code against evaluation criteria
- Create a pull request into the master branch
- Share link or provide access to your repo
- Share development store URL
Imagine you are already on our team, and a client request comes in. They want the ability to show or hide a "buy now" button on their collection pages, allowing users to buy a product and go to checkout immediately.
Furthermore, the client would like that button to either direct the customer directly to checkout ("buy now" button), or add the product to cart and allow the customer to continue shopping. This would mimic how the add to cart button works on a product details page (PDP).
Additionally, the client would like the option to show variants for each product, allowing customers to select their variant before choosing to buy now (or add to cart based on the above setting), or direct to the specific variant on a PDP.
The additional request is deemed by the team to be out of scope for the initial build ("Phase 1"). We agree that we will only accomplish this if time allows. If not, we will push it to a "Phase 2" rollout.
The time estimate we put on this feature is 10 hours.
Being mindful of the time constraint, start with completing Phase 1, and then move on to Phase 2. Each phase/step builds on the next; so try to keep your code DRY.
The requirements for each step/phase are as follows:
- Create a new "Collection" section in the Shopify theme customize view, under "Theme settings"
- This new setting section contains a toggle for enabling our new buy now feature
- On collection pages, a "buy now" button shows under each available product when the toggle is on
- Do not show if the product is unavailable
- When buy now is clicked, the browser is redirected to checkout with the chosen product in the cart
- Create a second toggle to change the button to "add to cart"
- The "buy now" button under each product changes to an "add to cart" button when both toggles are on
- When add to cart is clicked, the product is added to the cart, and the browser does not redirect
- Ideally, the existing functionality for adding to cart on a PDP is replicated
- Cart size counter in the header updates
- A small modal displays with information about the newly added product
- Bonus points for handling the error the same way as well
- Create a third toggle to show or hide product variants
- If a product has multiple variants, a select dropdown displays
- Each of the product's variants display as options
- Disable variants that are unavailable
- When a different variant is selected, the data in the product listing changes
- Image
- Price
- Product Link (Append Variant to URL)
- Bonus Points:
- Always have an in-stock variant selected by default
- Handle errors
- Match functionality on PDPs
- Code is well organized, formatted, and documented
- We should be able to read through your pull request and understand what's going on
- Code is DRY
- Spaghetti belongs in the kitchen, not in code
- Progression through the request
- We will not "dock points" if you only accomplish one feature, however, you should at least complete Phase 1A & 1B
- Brass tacks: does your code work?
When working with an existing theme, it's best to follow the established standards already in place. However, in instances where you are creating a standalone feature, your best bet is to encapsulate that feature into its own file(s). This keeps your code separate from the theme's base code, making it easier to find, modify, or remove in the future. This is usually accomplished with a snippet.
More importantly, you can access global theme settings within snippets, using a Liquid object. You can also include CSS <style> tags and JS <script> tags in snippets, as well as utilize Liquid objects within those tags. Your text editor might show it's concerns, but it's valid, and encouraged.
Remember that everyone works a little differently, and there truly is no right answer to any one problem. The way you solve a problem today, might not be how you'd do it the next time around. Be kind to yourself; don't get lost in finding the perfect solution, and forget to come up with one at all. As a Great Programming Sage once said: "Today's code is tomorrow's trash".
Happy coding! -MW