Developer Diary: Matt Coy, Arctic Leaf Inc.
Welcome to BigCommerce’s Developer Diaries, where we’re tackling what it is like to work in ecommerce, as a developer. We’re asking agency partners, in-house devs, and freelancers about how they spend their week and what it takes to be successful.
This entry features Matt Coy, Lead E-Commerce Developer at Arctic Leaf Inc. Matt has worked in Front End Web Development for over 4 years. He began his career developing simple Wordpress sites and then progressed to more complex ecommerce builds. Now, he’s the senior developer at Arctic Leaf, a leading ecommerce agency. He has extensive knowledge on BigCommerce and other leading platforms — knowing how to effectively code and build themes for each.
Let’s explore a week in the life of Matt and learn how he works and solves client requests at Arctic Leaf.
Day One
7:00am
I arrive at the office and review emails that came in over the weekend, replying to questions from clients, account managers, designers, and other developers. I also put on a pot of coffee.
7:30am
I begin work on a brand new BigCommerce store. Having already set up a repository in our company’s GitLab through forking our base theme, I begin to set up the base styles and main features of the site’s homepage. Using sections from our base theme, I add the popular products section, adjusting the styling to match the mockup. I also set up and style parts of the site’s footer.
10:00am
One of our clients is eager to launch their refreshed BigCommerce store. They are upgrading from Blueprint to Stencil, with a fully custom buildout. They plan to implement Yotpo for reviews, but to speed up the go-live process, decide this is something that can be done post-launch. Having been approved to move forward with the built-in BigCommerce review system, I spend some time adding the tab on the product page for this item, styling the reviews to match the mock-up, and styling the “Write a Review” form.
11:00am
As Lead Ecommerce Developer, I attend a meeting for a project that is moving from the design phase to the development phase. The project designer, a fellow team member, walks us through the mockups in InVision prototype. It’s my job to point out items that might introduce complications in development or that could require an unusual product/catalog setup. One item that catches my attention is the product pricing listed on the category page. The design calls for a price and a unit price. For example: $2.56/ft ($460). This will require some custom code, and that the product be set up with a custom field to denote the number by which to divide the price to yield the unit price. I make sure to point this out, and leave a note on the project in our Project Portal.
12:15pm
After returning from lunch. I resume work on the project I started first thing this morning. I add a few styling touches to the product card elements. The majority of this time is spent setting up the menu, which involves adding and styling a mega-menu dropdown. Because the client desires a very specific setup of links, and this setup does not exactly correspond with the category structure of the store, I decide to hard-code the entire menu. This is less than ideal, since any updates to the store’s catalog would not be reflected in the menu; however, I have weighed the options here and decided this was the best route to take. This route gives us the maximum control over the menu structure, and the client will not be making frequent updates to the store’s categories.
2:45pm
Having completed the majority of the homepage now, I switch over to set up the category page template. I add in a banner, adjust the grid widths, and set up the filter bar. The filter bar requires some items that will be custom fields, so I create a few test products with these custom field values for demonstration purposes.
3:15pm
I have been asked to look into the possibility of setting up a wizard that will allow a visitor on the store to select the Year, Make, and Model of their car, and then be taken to a category page with these filters applied. I spend some time looking into requirements and send off an email with my findings.
3:45pm
This client has just provided updated links and text content for certain sections of the site through a comment in our project portal. I put this content into the correct locations of the theme files.
4:15pm
Our base theme does a decent job of inheriting the base styles I set for the project, but there are usually a few items that need to be tidied up on the auxiliary pages such as “Shipping”, “Privacy Policy”, and the like. I notice that the width of the site is a bit large for these pages that consist mostly of plain text. I decide to set a smaller maximum width by adding a style to the wrapper class on these pages.
Day Two
7:00am
I quickly provide some development estimates on a few tasks I was asked to look at.
7:20am
I hop over to a task that requires adding the “Payment Methods” tab to the account page. Although we keep our base theme up to date with the latest Cornerstone releases, this particular site was built before the Cornerstone update that added the ability for customers to manage their stored payment methods. Viewing the Pull Request on the Cornerstone Git Repository that added this functionality, I’m able to add the required page templates, stylesheet, Node Module, and JavaScript code. I am running into an issue where the tab still doesn’t appear on the site. It appears that the setting for “show_payment_methods” is not set to true. I remember that I ran into this problem before, and the solution is to have a published theme with the “account_payment_methods” value set in features array in the config.json file. Because this would require a change to the published theme, I have to ask for approval here before continuing development.
8:30am
I have been asked to join a meeting for the client who is nearing launch. During this meeting, we go over items that are remaining. The client is very eager to launch, so we discuss what we need from them to get this project ready to go live. We are mostly missing some content and links.
9:15am
I begin to implement some of these updates to the site, starting with hiding the Q&A tab on the product page. They will need to use an app for this, and they will install this post-launch. I also make an adjustment that will take a portion of the product description, as entered into the WYSIWYG editor, out of the description tab and paste it into a secondary tab. In order for the code to work, the client will have to ensure they have this content marked inside an HTML element with a specific class name.
10:00am
The client has also asked that I add dropdown menus to the main category menus in the navigation bar. This is a simple toggle in our theme, but it is resulting in a bit of unpleasant styles in the mobile menu. I make a few minor tweaks to the mobile menu styling to accommodate this.
10:30am
Because our company consists of employees from two very distant offices, Orange County, California and Ottawa, Canada, we have an all-hands meeting via Zoom Rooms. Once a month, everyone takes half an hour out of their day and we discuss the company. It’s nice to get a chance to see some of the new hires and learn about the direction our company is moving.
11:00am
I have been pinged on a few tasks. I provide a quick estimate for how long a page will take to develop, and I respond to a few questions from one of our designers on how wholesale pricing works on BigCommerce.
11:15am
With only a short time before lunch, I decide to begin this week’s UX training. Our company has recently purchased accounts for some of the design and development team members for a UX training program. We try to spend a few hours each week looking over a few of the over 600 UX guidelines this program offers, we take notes, and then we discuss our takeaways in a brief team meeting on Fridays.
12:30pm
After lunch, I pick up right where I left off on the UX training course. This week we are reviewing Intermediary Category Pages. An Intermediary Category Page is usually a first- or second-level category whose main focus is to get a visitor to narrow down their scope before being presented with products. For example, the category “Men’s Clothing” would probably be too broad to show products at this level, and hope by some miracle that one of these items is exactly what the visitor is looking for. Instead, we can use this page to show the subcategories of Men’s Clothing in a unique way with high quality imagery and descriptive text.
3:00pm
After a short break where I take a lap around the office building complex, I complete the exercise for the UX training. I have been tasked to look at a few major industry leading ecommerce sites and rate them on how their Intermediary Category Pages conform to the guidelines I have just read. The results aren’t great. Out of the three sites I was asked to look at, only one conforms to these guidelines.
3:30pm
I spend some time working on the category sidebar for the BigCommerce site I started last week. The client wants all the subcategories (along with their subcategories) of the currently active main category to be displayed in the sidebar. Using the “categories” Stencil object, I can loop through, find the active parent category, and then display the children in the sidebar. I adjust my markup to use the accordion style that the faceted search filters use.
Day Three
6:50am
Arriving at the office, I have another small task that requires a quick estimate. I provide this. I then put on a pot of coffee.
7:00am
The client who is nearing launch has approved the addition of instruction manuals (PDFs) to be pulled from WebDAV, and linked to the product via a custom field. I set up this logic, adding a manual for one of the products. I then post instructions on the project portal so the client can set up the other products in the same fashion.
8:00am
I have received approval to publish a theme with the updated config file for the client who is looking to add the payment methods tab to the account page. Now that this setting is in, I can begin to style the page to have the same look and feel as the other account pages on the store. I adjust the spacing and colors. Once complete, I package this code up and push it to our Staging environment. Since development is now complete, I ping our Quality Assurance team with a link to the Shippy (proprietary live service) preview for this Staging theme. If everything looks good, I will be able to publish it later.
9:30am
I take some time now to train one of our newly-hired developers. I go over parts of our process with him and help to get him setup with his local environment.
10:45am
After a short break, I decide to take a moment to check on the BigCommerce Community. I usually try to spend about 15–30 minutes a day checking the forums, but I’ve been so busy this week, I’m just now getting my first chance. I find a few threads that I can offer assistance on, and I post replies accordingly.
11:15am
I take some time to finish up the footer on the fresh BigCommerce build. I set up the spacing between elements and hook inlinks for the email and phone numbers.
1:00pm
I make some minor adjustments to the site that is nearing launch. They added a new page and need it linked in the footer and in a dropdown menu.
1:10pm
I fire off a quick estimate to make some updates to a landing page for one of our clients.
1:15pm
I am now holding up development of the project that was handed off on Monday as I have not yet set up a repository and sandbox store yet. I login to our GitLab account, fork our base theme to a new repository, and configure the repository settings. I also setup a sandbox store, creating an API account. I then put these API credentials into the .stencil file in the Git repository. This will allow the developer working on this store to simply download the repository and begin development immediately.
1:45pm
I pause to send off another development estimate for aligning a PayPal button on the cart page of one of our clients’ stores.
1:50pm
Having been granted approval for my estimate for the landing page updates, I begin working on the page. It’s a few simple updates — changing the category of products that is loading in and updating the title text.
2:45pm
A client has asked a question on the portal, so I take a moment to respond.
3:00pm
The client completely changed their mind on the landing page layout. They also realize they sent over the wrong images originally. They really want this page to go live first thing in the morning, and I have been approved to quickly change out the content per the new design and assets.
3:45pm
One of the last steps before launching a fresh BigCommerce build for our clients is to add a little branding, and some much-needed love to the default styling of the store email templates. I go through the most-commonly used email templates, such as the order status and account creation, and add the store logo to the top of the template, as well as adjust the colors a bit to look more like the site.
Day Four
7:00am
I start off the day by spending some time on the fresh BigCommerce build. I touch up the header, adding in the search bar, and styling the spacing of elements. I also set up the product carousels, adjusting the styling of the navigation arrows.
9:00am
A request comes in. The client has decided to switch the landing page up again. I move the content around per the request, and deploy the changes to the live site.
9:30am
I find a moment to check the BigCommerce Community, follow up on replies and messages we have received, and comment in an attempt to assist users.
10:00am
I am tasked with updating some swatch images on a product page for one of our clients. This simply requires me to upload the new images and call for them. I make this edit, push the code to our staging environment, and send the preview link off for review.
10:40am
I receive approval for my estimate to adjust the PayPal button positioning on the cart page. This edit just requires a simple CSS edit to center the cart additional checkout buttons and increase the margin between them.
11:00am
I have been asked to attend a meeting for another deal that has just been closed. This meeting is to hand the project off from our solutions team to our production team. I’m just here to ensure the project makes sense from a development standpoint. Everything seems straightforward.
1:45pm
After returning from lunch, I see the task I sent off to review earlier is now approved to go live. I submit a merge request to the production branch on our Git repository, which then triggers a deployment to create a new theme and publish it. I then ping the review team to check this on the live site to ensure everything is functioning properly.
2:00pm
I was asked to add the landing page I updated to the mega menu dropdown in the store’s header. This requires a bit of work since I need to add an extra column just for this one link. I add this and send it off for review.
3:15pm
The QA team has sent back the Payment Methods update. There is an issue with attempting to add a payment method where upon clicking submit, an error message appears but doesn’t really explain what went wrong. I spend some time looking into the error, and ask another developer to take a quick look. It seems the error is server-side and out of our control. My solution is to update the error message to say “Please try again”, since the form seems to submit just fine on the second attempt. I push this edit to the staging environment and leave a note of my findings.
4:00pm
Our client really wants to launch their store before a show tomorrow. We have a short call to discuss what I still need from them. They tell me they have set up some categories for the homepage tabbed section. I hook these categories in and I will wait for them to send over the images.
4:30pm
While waiting for the updated assets and content, I switch over to the fresh buildout store. I make a few minor adjustments to the category page, styling the sidebar elements and the spacing of the product card elements.
5:00pm
Having received the updated content from the client, I work to curate the images in Photoshop, then export them for web. I then upload these assets and link them in. I also update the content for this tabbed section on the homepage. They have also provided a new image for another section on the homepage. I place this asset in and update the link accordingly.
5:45pm
One other minor note came in where the client wanted to adjust the free shipping text on the product page. I make this change before leaving for the day. The client has agreed that we should just launch the site first thing in the morning so I’m there to make changes if need be.
Day Five
6:45am
I arrive at the office a bit early to get prepared to launch the new site. I put on a pot of coffee and start replying to emails.
7:10am
There are a few edits that need to be made before this site can go live. First, their resource center page is not set up yet, so I need to go through and hide all links to it. We will add this back in after launching the site. A request to adjust the installation instructions PDF titles on the product page also came in, so I make this adjustment.
8:30am
My final edits are approved, and I have been given the go-ahead to launch the new site. Since the site is already on BigCommerce (using a Blueprint theme), this will just require that I publish the created Stencil theme. I create a production branch in our Git repository, and then I publish the theme generated by this CI/CD pipeline. There were a few items I noted that needed to be done after switching to Blueprint, so I address some of these. I also send the site off to our QA team to do a full review.
9:15am
I take a short break from development to join the rest of the E-Commerce team here at the company in a meeting via a Zoom call. We meet weekly to discuss the status of our projects and touch base on what we are working on.
10:15am
The client that has just launched is a bit confused on how to add their category images. They ask us to add the images in, and approve two hours for this. I start downloading the images, cropping them in Photoshop, exporting them for web, and then uploading them to the correct location in the BigCommerce admin (the category image upload field).
11:00am
I have to take a break from this task to join the design team for the UX training meeting. We discuss the guidelines we read for the Intermediary Category Pages, as well as the exercises we performed, auditing those large sites. I’m able to speak to how we could implement some of these guidelines into our clients’ stores, and platform limitations we might need to be wary of.
12:00pm
I switch back over to the category image curation and upload task. The client has fourteen main categories, each with between two and seven subcategories that all need these images uploaded.
1:30pm
Our QA team got back with a few notes. The blog page is a bit messed up, having a sidebar with irrelevant links which carried over from our base theme. I remove the sidebar, and adjust the base theme so this won’t happen in the future. I also reduce the width of the blog page.
2:00pm
I take a moment to respond to the BigCommerce Community.
2:30pm
I have a quick meeting with a client to discuss the changes they would like to their product and category pages.
3:00pm
Because the currency selector was added after the site was launched, I didn’t have time to review it. It needs a few styling changes, especially the one in the mobile menu drawer.
4:00pm
I finish out the day and week assisting our newly-hired frontend developer with the project he is working on. He has not spent much time working on BigCommerce, so I show him the ropes a bit. We work on uploading images, calling them with the CDN Handlebars helper. We set up a grid of images.
We’d like to thank Matt for sharing his week with us. If you have a question for BigCommerce, or want to learn more about our platform reach out in the comments below or tweet us at @BigCommerceDevs.
