Building a high-performing Shopify store isn't simply a matter of choosing a nice template and filling in the blanks. At SCF, when we talk about developing a store 'based on a theme', we're describing a deep-seated, strategic relationship with that theme that extends far beyond its initial visual presentation.
This approach is fundamental to creating the tailored, scalable, and robust e-commerce solutions that serious businesses demand.
'Based On' vs. 'Using' - It's more than just looks.
The distinction between simply using a theme and being based on one is crucial.
Using a theme often implies leveraging its out-of-the-box appearance, its fonts, colors, and layout, with minimal functional changes. The theme serves primarily as a visual skin.
In contrast, at SCF, based on a theme means we're utilizing the theme as a functional and structural base. The theme is the bedrock of the store's core features, its underlying architecture, and its fundamental operational capabilities. It provides an extensive array of preset sections, blocks, and global theme settings that offer a wealth of functionality, not just aesthetics.
In the example above of Billingham Bags, on the left you can see how the theme Expanse by Archetype looks when freshly installed. On the right is the completed store.
A professional Shopify theme comes packed with features like various product page layouts, built-in filters, mega menu structures, and specific sections for testimonials, FAQs, or image galleries.
This base functionality is what we build upon, leveraging the theme's code structure to quickly deploy complex e-commerce features.
The Role of High Fidelity Mockups
This functional foundation introduces some necessary constraints. While a theme provides a head start, it does not absolve the design process. In fact, it sharpens it. You absolutely still need to design your store.
Our process mandates the creation of high fidelity mockups before any development work begins. This step ensures the brand's unique aesthetic and user experience (UX) is fully defined within the established parameters of the chosen theme.
The theme is the technical canvas, but the brand's identity must be intentionally painted onto it.
The mockups serve as the blueprint, detailing not only the final look but also explicitly noting any deviations from the theme's defaults. These intentional deviations are what we term customisations.
Extending the Base Functionality
The term based on inherently acknowledges that the theme's default offering is just a starting point, a base.
Virtually every ambitious e-commerce project requires extensions to this base functionality or visual design.
This is the origin of the term: we are adding on top of that base functionality and visual to meet specific business requirements.
A customisation can span a wide spectrum of complexity:
- Minor Customisations could be something as simple as adding a colour selection setting to a specific block within a theme section or giving the merchant finer control over an element's appearance.
- Significant Customisations could involve developing a whole new section with bespoke logic and functionality, such as a highly specialized product builder or a custom-built loyalty point tracker.
The possibilities are limited only by the business need.
Future-Proofing Customisation
When a required customisation necessitates changing a theme, section, block, or setting outside of the theme’s default editing parameters, touching the core code, we face an important technical decision.
We effectively create a fork in the road of the theme's development path.
To safeguard the investment and ensure the long-term stability, we create a duplicate of the theme's defaults and connect it to a version control system. All custom development takes place within this cloned version.
This rationale is paramount for playing in the big leagues. A future theme upgrade (pushed by the theme developer) should not break any of our bespoke customisations. By cloning, we create an insulated environment. When an upgrade is released, we can apply it to the original, clean theme, verify the changes, and then selectively merge the upgraded aspects into our customised version.
Above you can see what we call a diff where the tools we use allow us to see what has changed in the code when updating. It keeps a history of these changes so we can revert if needed.
This method is safer all round, ensuring we can take advantage of the theme developer's bug fixes and feature enhancements without jeopardizing the custom work that defines the client's competitive edge.
This robust process goes a long way to explain why building a serious, high-end store is never just a case of picking a theme and launching. It is a calculated, iterative, and technically rigorous process of building based on a theme to achieve functional excellence and enduring performance.