Category Archives: Project Log

My collection of web development projects.

Add FAQ to Shopify Collection in 5 Steps

Introduction

An FAQ interface is a straightforward way to provide your customers with the insight they need without the need to call customer service. In this tutorial, I will show you how you can take an existing collection template (irrespective of theme) and add an editable interface by way of sections in 5 easy steps.

This specific case leverages Bootstrap 3 Accordion techniques (as the theme was built with it), however all of this can be integrated via Bootstrap 4, other JavaScript toggling solutions and CSS only implementations.

My 5 step tutorial assumes you have basic/intermediate knowledge of Shopify, HTML/CSS and that you’re able to read a JSON object (see schema tags).

In The Trenches

Step 1

First and foremost, you’ll need to embrace Shopify’s opinion on how code is organized.

Assuming you have access to your store, jump in to Shopify Admin > Online Store > Themes. From the Actions drop-down menu, click Edit code and you’ll be navigated to the online code editor built into Shopify.

Take stock on how Shopify organizes its codebase. You cannot deviate from this opinion. It is a tight structure and the abstractions are intentional.

Step 2

Navigate to Sections directory, click Add a new section and create this new file: collection-faq.liquid.

Step 3

The code. Here’s the breakdown of that in short order:

  • Line 7, 34: The for loop keys off from schema settings defined from line 44.
  • Line 8, 10, 33: A decision will be made to either print a header or a panel.
  • Line 23, 25, 27: A decision will be made to either display or hide the answer.
  • Lines 40-91: The required schema tag which ultimately defines your UI and its editable fields and initial settings.
  • Line 93, 94: optional custom CSS styling to lay on top of this section.
  • Line 96, 97: optional custom JavaScript to lay on top of this section.

Step 4

Reference this newly created section to on your theme’s collection template: /templates/collection.liquid

{% section 'collection-faq' %}

Frankly, you could add this interface to whatever template you see is most fitting for your use case.

Step 5

Test it! Navigate to Shopify Admin > Online Store > Themes and click Customize.

Inside of the preview panel, click into a collection page which leverages your new addition. From there, you will see your FAQ settings on the left panel and a preview screen on the right.

Once inside of the Customize screen, you have full authority in adding/removing FAQs and previewing that in real-time.

Go ahead and add/remove a header, question and an answer! It won’t save unless you click the Save button at the top-right.

Conclusion

Sections are awesome. It’s a great way to extend an established theme with your customizable interfaces.

If I have one gotcha to reinforce it’s this. Always revisit step 1. Acknowledge Shopify’s file system and don’t dance around it. The way it organizes its assets are very much intentional and if you can quickly accept the Physics of this particular world, you’ll very much learn how do these kinds of tasks in 5 steps or less.

Additional Resources

The Angry Developer

Introduction

Developers. How many companies have them? The developer suffix is often prepended with any of the following: Front End, Back End, iOS, Android, Web, Full Stack, Embedded, Software, Desktop, Middle Tier, etc. 

But what about The Angry Developer? You know who I’m talking about. That one developer always wrapped in angst, flips out on scope changes or constantly punts back, it works on my machine. Okay, that last one might be a stretch because honestly, that could be any developer under any circumstance.

But back to the point and I must confess, I’m very much guilty of being that person. When I first got into this industry, I picked up some bad habits and I wanted to send notice on my mistakes and offer suggestions, in case you ever feel angry when in the trenches of code.

Choose Your Role Models Wisely 

It’s your first day at the company and you’re meeting people left and right. You follow certain personalities on social media. Be extra mindful on who you choose to fold into your own. In the beginning of my career, I was seriously just excited to do web. But I never thought beyond the task and the level of detail which takes place after receiving the opportunity, namely your soft skills.

What I can tell you is that Austin 3:16 may work in the squared circle but you should think twice before bringing the rattlesnake into a conference room. 

Take a break and meditate.

Embrace Criticism

Criticism – both good and bad will exist in the workplace. It just happens. It’s a song and dance you and your coworkers are playing at every turn, especially if you’re in a position which literally produces an experience. Rest assured, nothing is perfect. Facebook, Google and the start-ups of today still go through their examinations before throwing something out into the wild. Remember, your customer doesn’t know you by name. But they do know how they’d feel after a first pass at your product or service. Criticism, in my opinion is an inclusive exercise when inside your office space. But once it exits that door, the customer’s critique will always be exclusive.

It’s Just A Job

This comment won’t win any stars with recruiters or your boss but when you distill all things into its basic parts, it very much is that…a job. Payment in exchange for your service and time. When you’re done with the day, go home owning that simple fact. There are no additional burdens to carry into your night and it’ll help you get that mental break you need in this insanely fast paced world.

Additional Tips & Tricks

  • Insight Timer – a FREE meditation app I’ve used since 2017. They have paid programs as well but their free service is honest enough for you to enjoy, FOREVER.
  • Soft Skills: The Software Developer’s Life Manual – a book which brushes on the hard bits of software development: dealing with clients, peers, managers, staying productive and more.

Conclusion

I had to get this one off my chest. 2020 has been quite a rodeo to say the least and with our zoom skills increasing and our soft skills not getting its fair shake, I figured now was the time to bring back the human elements needed in an ever abundant remote work ecosystem.

Thanks.


This post may contain affiliate links. Should you make a purchase by clicking on any of the links, I may earn a commission at no extra cost to you. Read my full affiliate disclosure here.

When To Call It Quits (UX Edition)

Welcome to Season 3 of the allwebSD podcast! I’m back bringing stories to the foreground within the San Diego tech community and today I’m opening up this season with an awkward subject.

Simply put, when to call it quits

Today, I’m here with my former coworker who is helping me understand just that. His name is Greg Schumsky and I had the privilege of working with him for a little over 6 months on a digital project within the consumer sleep space.

Here’s a bit about Greg – he drives a DeLorean almost daily and built a remote controlled R2D2 out of God knows what. It’s accurate enough that I think Disney would want to acquire it. 

But today he is working on his bigger creative dreams, which I’ll let him disclose should he want to but for the most part he’s here to clear things up on today’s topic.

You see Greg decided to do just that. Specifically within the UX side of our digital world and I wanted to know why. So here he is, opening up his heart as to why that decision was necessary in his creative career.

Best advice I can give is to be flexible…and don’t take anything personally.

Greg Schumsky, Maker of Music and Dreamer of Dreams at Acorn Entertainment Group, Inc.

Highlighted Topics

  • “UX Design is just not me or a thing I want to be a part of…”
  • “I really don’t know who’s to blame for that happening, yet no one seems interested in fixing that…Yes, you can fight them on it if you wish, but at the end of the day, they will always win.”

Conclusion

For anyone listening, it’s important to pull certain elements from this as you blaze your own path but for the most part, leave the rest in passing. Greg’s story and experience is unique and I’m thankful that we got this chance to reconnect and gain perspective.