(Also in Taproom Test Readme)
npm run start
- Starts Gulp watcher onscripts
andstyles
directories.npm run build
- Gulp builds the .min files fromscripts
andstyles
, but doesn't watch.npm run watch
- Runs theme deploy and theme watch on development config.npm run test
- Runs Cypress open and will start any tests.npm run deploy-dev
- Runstheme deploy --env=development
npm run deploy-stage
- Runstheme deploy --env=staging
To build this project:
-
Clone repo locally
-
Install Shopify tooling: Using Homebrew
brew tap shopify/shopify
brew install themekit
-
Install Themekit
-
Run
npm install
-
Set up config.yml
- Note:
settings_data
andsettings_schema
are ignored in snippet below. If you are adding to them from code, uncomment by replacing-
with#
.
# Password, theme_id, and store variables are required.
#
# For more information on this config file:
# https://shopify.github.io/themekit/commands/#configure
development:
password: [your-api-password]
theme_id: "[your-theme-id]"
store: [your-store].myshopify.com
ignores:
-themekit.ignores
ignore_files:
- config/settings_data.json
- config/settings_schema.json
staging:
password: [your-api-password]
theme_id: "[your-theme-id]"
store: [your-store].myshopify.com
ignores:
-themekit.ignores
ignore_files:
- config/settings_data.json
- config/settings_schema.json
production:
password: [your-api-password]
theme_id: "[your-theme-id]"
store: [your-store].myshopify.com
timeout: 100s
readonly: true
- Setup Private app to link local dev environment to Shopify
- Setup Private App
-
Shopify admin => Apps => Private Apps => Manage Private Apps => Create New Private App
- Enter App Name (Taproom Development) & Contact Email (kelly@thetaproom.com)
- Theme templates and theme assets set to Read Write access.
- Save
- Copy Password
-
- Add password to
config.yml
file - Go to Shopify Admin -> Online Store -> Themes -> Actions -> Edit Code
- Grab Theme Id from URL
- Add Theme Id to
theme_id
field inconfig.yml
(should be a number)
- Run
theme deploy
- Shopify Admin -> Online Store -> Themes Actions -> Preview
For this part of the interview process, we're looking at your HTML, CSS, and JavaScript - is it semantic, is it clean, is it mobile-friendly, are you using best practices when writing your code. We also want to see your commit history; we're looking for clarity on how you communicate the changes you're making as requested.
Edit the Debut theme (default published theme) to make the following changes:
-
Add a "Buy Now" button to the product loop in the Featured Collection section. The button should appear when you hover over the product's image. (During your pair programming session, you'll link that Buy Now button to add that item to the cart via Ajax.)
-
Create a new FAQs section. The section should have a title and blocks for question and answer. When you click on a question, the answer's visibility should toggle. We're not testing you on your liquid; we want to see how you write the JavaScript to make the questions toggle to show the answer, and we want to see how you style it for desktop and mobile.
You'll have one week to complete this; the sooner you can get the test back to us, the sooner we can schedule your next interview.