Top Tips for Building Themes That Are Fully Featured, Like Customizing Shopify’s Best Free Themes

Themes are super important for people who are starting their business, and for existing merchants. In this article, we’ll talk about what 2022 could have in store for you, including what the Online Store product team has been working on since June.

2022 is going to be a busy year.

Themes are super important for people who are starting their business, and for existing merchants, we know Q1 is the busiest time of year for theme updates and changes. In this article, we’ll talk about what 2022 could have in store for you, including what the Online Store product team has been working on since June. 

Spoiler alert: there are some highly requested feature updates, and we’ll introduce you to a new suite of Shopify’s best free themes being released in January. 

First, let’s recap what was released last year. 

New Online Store features in 2021

At Shopify Unite 2021, we announced some serious improvements to the way merchants can customize their online store without code, as well as new developer tooling for anyone building themes and apps for Shopify merchants. 

For merchants, we upgraded the theme architecture to support sections on every page and theme app extensions with app blocks and app embeds. Up until then, merchants were limited in how they represented their business on Shopify, with the flexibility of sections being limited to only the home page. 

Code edits, elaborate workarounds with blocks, or custom apps were needed to achieve a similar effect across other pages. Now, merchants can add sections to all pages, not just the home page, unlocking a range of new opportunities to personalize every aspect of a store. 

Previously, there was no structured, end-to-end solution for apps to easily integrate with themes. With theme app extensions, app developers can now build UI components that can be added, removed, and configured directly through the theme editor without touching a theme’s code. This means uninstalls are also cleaner, with redundant code automatically removed.

Lastly, the updated theme editor allows merchants to add metafields and properties without using APIs or code. That means merchants can now add custom content they need to the product page, like introducing a space for buyers to include a size chart or ingredient list. Anything that is unlikely to appear in the core store editor can now be added in via metafields.

For a full recap of the new Online Store features and what they mean for developers, check out these resources: 

• Read this blog article
• Catch the Shopify Unite recording
• Join our upcoming deep dive webinars for partners: Sections Everywhere and Metafields + Storefront Filtering. 

To accompany the launch of Online Store 2.0, we launched a brand new default theme that ties together all the new features. We call it Dawn. Dawn is Shopify’s first source-available reference theme with OS 2.0 flexibility and a focus on speed. It’s accessible, performant, and a great starting point to customize on. 

Installing Dawn isn’t the only way to access the new Online Store features - merchants can install any theme labeled OS 2.0 in the Shopify Theme Store, or update their theme to use JSON templates. Migrating a theme to using JSON templates is likely the preferred approach for any merchant who has a lot of customizations on their theme already.

Feature improvements 

Since the release of sections on every page, app blocks and embeds, and dynamic sources that support metafields, the Online Store team has been working through a backlog of outstanding feature improvements. Merchants will now also be able to:

• Add metafields on Collections, Orders and Customers. For example you can now add wishlists, shipping addresses, and favorite products associated with customers. For metafields with Orders, you can add barcodes, order IDs, serial numbers, notes, and even give an indication if an order is a gift.
• Create storefront filters and choice lists for metafields. For example, for a wine collection merchants might like to filter by country and region. The choice list for the country filter might include France, Italy, etc and the choice list for the region filter might include Southern Rhone or Tuscany.
• We got a lot of feedback on the template limit, so we're extended this limit to 1,000 templates per storefront.

Shopify's best free themes 

This January, the Shopify Theme Store will release three new free themes and reposition Dawn as an apparel theme. 

Shopify’s new free themes are designed to empower anyone to effortlessly create the Online Store of their dreams. Equipped with pre-configured layouts to support industry trends including, apparel, health and beauty, home and decor, and food and beverage, we’re encouraging merchants to find a theme that matches their unique brand first and then showcase their products. 

With Shopify’s new theme settings, anyone can also create easier buyer experiences and branding that stands out from the crowd for free, using new styling options and new sections. New themes have both global settings, and settings on the section level for personalizing themes.

Global settings

Global theme settings impact the overall style of the theme and provide merchants with the ability to control different repeated elements to impact the look and feel and achieve a look that is closer to their own brand. 

To build our new global theme settings, the UX team identified key repeatable elements on a theme that would benefit from their own settings. As a result, customizations on badges, cards, colors, buttons, dropdowns and inputs, content containers, typography, popups, drawers, overall layout, media, are all now possible. 

Examples of global theme settings include changes to borders (border opacity, border width, and corner radius) and the shadow (opacity, horizontal offset, vertical offset, blur radius) of components like product cards and buttons. 

There are default pre-configurations on each theme for each global setting, for example, the vertical spacing between each section in the layout settings. We know things like spacing can be really challenging for merchants to fix if they don’t code so we hope this will be an experience improvement.

Settings on the section level

Settings on the section level allow merchants to take existing sections like the image banner and customize them to suit the look and feel of their brand. 

The main section on product pages now lets merchants choose between different layout options to display media. Merchants now have control over the size the media occupies on the page, as well as a stacked option, and a carousel option with thumbnails. 

There are more options to achieve different layouts on image banners, images with text, and collages; for example, you can re-position the content within the section. 

New sections 

The highly requested slideshow section has been reintroduced – a popular feature with vintage themes. Merchants can also use the new collapsible content section to display secondary information or FAQ-type content. These new sections are available on every new theme but each theme comes with some default configurations to support the suggested industry. 

Time to introduce our new themes…

Crave

Crave is a vibrant and playful theme designed to make products stand out. It would work well for a food and beverage product because, by default, you'll get sections and blocks for media galleries that allow buyers to find their favorite products quickly, along with ingredients, instructions, and recipes, and a cart drawer that enables buyers to review the products they've added before entering the checkout.

Craft

Craft is intended to bring the story of craftsmanship and quality to life. We think it’s great for home and decor products because it comes equipped with sections and blocks for dimensions, materials and care instructions. Merchants also get a drop-down menu to help buyers navigate multiple subcategories.

Sense

Lastly, we designed Sense with the intention of creating an energizing theme that would establish trust with customers. It comes standard with sections and blocks for product ratings, ingredient lists, and ‘how to use’ instructions. Cross selling blocks, which pair well with cross selling arrays, are designed to help you showcase accompanying products. Sense could be a great theme for a health and beauty product.

Dawn

Dawn is a minimalist theme designed for product images to take center stage. So far, we’ve seen it being adopted by apparel merchants, which makes sense because, by default, you’ll get sections and blocks for image galleries, size chart pop-ups, and collapsible tabs for secondary information like materials and care instructions. Cross selling blocks, which pair well with cross selling arrays, are designed to help you showcase accompanying products.

Your work supporting merchants

Moving forward, merchants will only be able to have access the new theme settings mentioned if they Dawn, Crave, Craft or Sense and will only be able to access sections on every page, app blocks, and metafields if they update their theme to use JSON templates or migrate to a new theme in the Shopify Theme Store (free or paid). 

If a merchant is already using Dawn, they will also be encouraged to update to the latest version of their theme in order to access the new theme settings.

In addition to supporting merchants with their theme updates and migrations, there are a number of benefits for agencies to build on top of Shopify’s free themes when supporting brand new clients.

For starters, our new free themes have been built with Dawn, meaning they layer in significantly more customization settings and new sections onto the Dawn repo. They are also highly accessible and performant themes and come with new Online Store features that were announced in 2021. 

Shopify is also committed to continuing its development of developer tooling and making Shopify the best place to build ecommerce themes. On GitHub, Dawn will continue to be source available, meaning theme developers can view, clone and fork Dawn to use it as a reference for building themes. 

Talk to your clients about Online Store 2.0 and the benefits that this new feature set unlock.