Why adding a new feature to a Shopify theme isn't as easy as it might seem (at least to do it right)

One of the most exciting parts of Shopify theme updates — for both you and us — is adding new features.

Not only do adding new features bring more value to your theme but they also enable you to do more with your online store — whether it’s new functionality or a refined or updated design.

However, you might be surprised what exactly goes into adding a new feature. Many store owners might think the process of adding a new feature looks something like this:

1. Get an idea or suggestion for a new feature
2. Decide to add the feature
3. Add the feature

However, this is far from the case. In reality, there are numerous steps — many of them with “sub steps” or that require multiple teams within Out of the Sandbox to collaborate extensively.

Every year, Out of the Sandbox gets hundreds of Shopify theme feature requests — and every one is logged internally so we can track not only what our customers are looking for but how many merchants are requesting each type.

The more requests we get for a particular feature, the higher it is on the product team’s list to investigate, and we start looking into what would be involved in adding it to our Shopify themes.

To give you an idea of how a feature goes from “dream” to reality let’s take a look at some of the thought processes, steps and collaboration that went into adding the “recently viewed products” feature to our premier Shopify theme, Turbo:

Research and strategy

• This type of functionality (which is commonly seen on sites like Amazon) typically requires an app on the Shopify platform; so we needed to come up with a way to do this solely within the theme code itself.
• We started getting requests for a feature like this even before Turbo was released, and had considered multiple ways to make it happen.
• For example, we knew we would have to be able to track what products a user had already looked at since that’s obviously a key part of making this feature work.
• It quickly became clear that a cookie would be needed to track each user’s individual shopping session — and what products they looked at during a particular visit.
• Since Shopify doesn’t give us much control over managing user sessions directly at the server level, this required integrating with JavaScript to create and manage cookies.
• A lot of careful attention went into figuring what data should be stored in this cookie.
• We also wanted to the tracking as unobtrusive and lightweight as possible so as not to affect performance or raise major privacy concerns.
• At this point of development, we reviewed Shopify’s GDPR recommendations and avoided including any “unique identifier” in this cookie (as with many of the other cookies we use). Although the exact requirements vary between jurisdictions, our goal was to create a solution that worked well for users in most of the world.

UX and design

• Next we had to decide where exactly the list of recently viewed products would appear.
• At this point, our development team collaborated closely with our designers to determine where in the layout these items would appear and how they would look.
• This feature appears in several places (e.g. in a row on the product page, in the sidebar on collection page) so it required different considerations in each instance
• The design team went through several iterations, while keeping a close eye on avoiding too much clutter.
• Our design and dev teams also had to consider what would happen if the user hadn’t viewed any products — and develop the code to needed to “hide” this feature if no products had been viewed yet.
• This also required considering how the theme would look if a user’s browser privacy settings, namely cookies, prevented the feature from being used at all. Here again, we had to find a way to hide the section so that it didn’t look “empty”.
• Then came the time for our designers to start pushing pixels and going through numerous rounds of refinements, testing and gathering feedback.
• Our product team also contributed to this step and made suggestions as to which settings to include.
• Our support and QA teams also got involved throughout the process to ensure that the settings were clear for merchants, including paying attention to the wording used.
• Once the designs were finalized, they were handed off to our front end development team, who took over writing all the HTML/ CSS needed to match the designs.

Development and quality assurance

• Next, the backend team had to take care of the logic and JavaScript that would determine if the feature was active, generate a cookie to store data in and if previously viewed options were stored in a cookie, finally display the HTML and CSS with a list of those products.
• Once all of the code was written, it had to be submitted to our quality assurance team, who, quite literally, try to break every new feature or design we create in hopes of catching any “worst case scenarios” that come up.
• In the case of the recently viewed products sidebar option, our QA team helped work with the design team to determine the maximum number of items a sidebar could have — trying to find a happy compromise between making sure shoppers could see their history while also not creating an excessively long sidebar.
• During this process, the QA team also uncovered some quirks for product names with special characters in the title, which was sent back to the developers for updating.
• Each issue or change initiated by the QA team results in a sort of “sub round” of coding and design before being sent back to the testers to see if the issue is resolved and if there’s any other potential issues they spot.
• Typically new features take multiple rounds and close collaboration between many of our teams to ensure we’re delivering a feature that works reliably, satisfies the needs of most merchants and looks great.
• Once something is finally “QA approved,” it’s finally given the OK to be added to the next release of a theme!

Even then, the hard work of adding a feature to a Shopify theme doesn’t end:

• Our support team keeps a close eye on questions or issues that our customers are asking about, which are logged and referred back to the design and development teams.
• If these issues are common and create significant hurdles, the teams will reconvene and examine the issues being reported, to brainstorm a good update or solution.
• In some cases, limitations with how the Shopify platform works means we can’t accommodate every issue that gets reported, but any that do get identified to update have to go back through the entire process of design, development and quality assurance before being added to a future release.