Published 06/02/2023
Making the most of your Shopify store
By Asher White
Shopify is an extremely powerful ecommerce solution that offers many options for expansion and customization. It’s easy to pick up and build a simple store, but it can also grow with your business and provide all the flexibility you could need. Customizing your Shopify site lets you add new capabilities, perfect its style and ultimately reach and engage customers. There are three main ways your Shopify website can be customized, with themes, apps and a custom storefront. This blog post will examine these areas and explain how to use each one to get the most out of your Shopify website.
Themes
Themes are the simplest way to customize your Shopify store, but they’re still very powerful. A Shopify theme is the website code it uses to display the product and business information that you set in the admin panel. By changing your theme, you change how your products or other pages are displayed. There are three ways to modify your theme: with theme settings, switching to a new theme and customizing theme code.
Theme settings
Theme settings are theme-specific preferences that have an interface that’s built right into the Shopify admin. To find theme settings, go to your admin panel, then look under Sales channels > Online Store > Themes, then, click the Customize button on the theme you want to edit.
In the theme editor, you’ll start in the ‘Sections’ tab. This is probably the most important area for making changes to your site. This area gives you control over the structure and layout of your site. This is where you can add more blocks or sections to pages, edit interface text or non-product copy and change what goes in the headers and footers.
To edit the appearance of your site (that is, things like colours, fonts and sizes, as opposed to structure and content), you can go to the ‘Theme settings’. Depending on your theme, there will be different options here, but it would be normal to see options for colours, fonts, buttons, inputs, product cards, media, etc.
However, theme settings depend entirely on what theme you have and what options they offer. So, theme settings are generally an easy and flexible way to change how your site looks and what it says, but for changing what it does requires something more.
Changing your theme
Changing your theme can open up a lot of new possibilities and looks. The first priority for picking a new theme is how it looks, but the settings and options it offers can let you customize it in other ways as well.
Where can you find themes? The Shopify Theme Store has over a hundred paid and free themes to explore. Many paid themes also offer the option to try it for free—you can preview it with your store and see what options it offers without paying anything, and then you buy the theme when you’re ready to publish.
What if nothing on the theme store really fits your needs? You have two options: get a theme and then edit the theme code, or hire a web developer to write you a complete theme, purely for your needs. In general, the first option will be much more powerful and cost-effective—editing code lets you pick a jumping-off point and work from there instead of starting basically from scratch. And, you might be surprised how few changes are needed to make your site completely your own.
Editing theme code
Editing your theme’s code is the most flexible way of customizing your theme, but it’s also the most complex (unless you get a web developer to do it). To edit a few files, you can go to ‘Edit code’ in a theme’s menu, or for more involved changes you can ‘Download theme file’, edit it, and then ‘Add theme’ > ‘Upload zip file’ when you’re done.
Shopify themes are written in a mix of Liquid and JSON. Liquid is a programming language like HTML, but with extra features. JSON is a data-storing language that plays two roles in a theme. When you change your theme settings in the Shopify interface, it saves the results in a JSON file that you can also edit manually if you really want to. It’s simpler to just use the interface most of the time. JSON is also embedded in some Liquid files to provide information about that block and the options it provides. Themes also often include CSS and JavaScript as assets—these files aren’t run by Shopify, but they’re sent to site visitors and let you add styles and interactivity.
Editing your theme code lets you make changes that you can’t make in theme settings. If you have some familiarity with HTML, you can probably make some changes to your theme code yourself. You can look at Shopify’s documentation for themes and the Liquid language. Other changes are more complicated to make, like adding line item properties. Line item properties are how you can add extra information to an item being ordered, like a message to put on it or the way to prepare it. For more intensive changes like adding these kinds of new interface elements, or a whole new kind of page, you can hire a web developer.
Theme customization is the easiest way to change how your store looks, what it says, and what it does inside the browser. But, what if you want to add features that involve saving data or doing things on the server, like product reviews, email marketing, or social media integration?
Apps
Enter Shopify apps. These fill the same role that plugins and extensions fill on other platforms, but the name difference is significant. Extensions and plugins are built into a service, so they’re limited by definition. But, Shopify apps are separate entities—they run on their own server, with any technology, and they securely interface with Shopify’s servers. What does that mean? Apps can do anything. They aren’t limited to fit into Shopify’s platform, so they can provide any service that Shopify doesn’t. Apps can interface with any other systems they need to. Plus, well-built apps have a reduced performance impact, meaning your store keeps loading fast. Where can you find apps?
The Shopify app store is the authoritative source for both general-purpose and niche apps. As of February 2023, they have over 8,000 apps. If your use case for an app is one that other businesses would have too, there is probably an app covering it. Many of the basics we’ve come to expect from an online store, like reviews and searches, are covered by free apps from Shopify itself. You can find integrations for selling and advertising on other platforms, like Google or social media. Other apps are paid, based on a subscription model (many apps have a free tier for testing) or a one-time fee. Every app that is submitted to the Shopify app store is vetted by Shopify, so the quality of apps is generally decent.
If your use case is not covered by the app store, you can hire a Shopify app developer, like Broch, to build you an app that perfectly covers your use case. The downside of this is cost, both of development and server space to host your app, but the upside is a very flexible app that’s tailored to your specific business model. Because this app doesn’t have to ‘plug in’ to the Shopify system, it can incorporate virtually anything—from 3D rendering to AI—and just send the result to Shopify.
Apps are the easiest way to add features and extra functionality to your online store and admin panel. Unfortunately, not all apps are built equally—some load a lot of unnecessary files when loaded, slowing down your store. What’s the solution if you need a lot of custom functionality in your store, but you still want to use the reliable and proven Shopify infrastructure?
Custom storefronts
Custom storefronts deliver the ultimate flexibility and customization by using the Shopify service with a completely custom website. This means you can still control the products, collections, tags, etc. with the Shopify interface, and let them handle payments and payouts. A custom storefront will then pull in that data, combine it with any other needed data, and deliver a custom interface.
Custom storefronts require a lot of coding, so it’s best to hire a web developer familiar with the Shopify platform to make them. They can use any technology you want with the Shopify API (which is internet-based, so not dependent on specific software), or they can use Shopify Hydrogen. Hydrogen is a full-stack framework based on React (a popular JavaScript framework) that is designed to interface custom code seamlessly with Shopify. Hydrogen uses the latest technologies to provide a fast, flexible and secure end product.
The benefits of using Hydrogen or another custom storefront are complete control—Shopify is part of your website, instead of being your site. Plus you get control over how your store is deployed—instead of it running on Shopify’s servers, you can choose an architecture that’s best for your needs. The downsides are, again, cost and complexity. Complexity especially is a deciding factor—if a problem can be solved with a few apps and theme changes, stick with Shopify. But if would need custom themes or private apps anyways, or the apps are hurting performance, at some point it becomes less complex to just get a completely custom storefront and still take advantage of Shopify’s ease-of-use, reliability and security.
As seen in this post, Shopify provides many ways to customize and expand your online store. In general, themes and apps are simpler and easier to gradually adopt as you need them. Themes control how your store looks and what it says, and apps can extend what it does. For an ambitious project however, a custom storefront with total control might be the way to go. Ultimately, Shopify is a very flexible platform, and at Broch we can help you make the most of your online store using these three methods and others.