The perfect page builder for Shopify's Online Store 2.0
Page builders are a core element of the Shopify ecosystem. Page builders are there to extend what you get from your Shopify theme. This was especially important with the original way Shopify themes were architected. If you've been using Shopify for a while, you'll be familiar with the limited options for all secondary pages like About, FAQ, and such.
With the introduction of Online Store 2.0 and the flexibility it brings, are page builders even still necessary?
To answer that first we'll look at exactly what Online store 2.0 has to offer merchants.
What is Online Store 2.0 ?
Online Store 2.0 is a series of features that Shopify has rolled out to modernize the theme experience for merchants using Shopify.
Shopify truly listened to what merchants and developers were finding as pain points and created a comprehensive set of features to address them.
There are quite a lot of new features, but the most relevant to merchants managing their themes are Sections Everywhere and the new Metafields.
Sections Everywhere
Shopify themes have 2 basic elements, templates and sections. Templates are essentially the pages of the store and sections are the elements on each page.
In 1.0 themes only the home page had the flexibility of allowing the merchant to add different sections to it and dragging and dropping them in the theme editor. All other pages were mostly built with the admin WYSIWIG editor - which certainly was quite limiting in its design options.
There were ways to make pages more designed and therefore more engaging, but it usually required hiring a developer. Sections could be hard-coded by developers into page templates, but merchants were usually unable to manage this themselves. Hence the popularity of page builders.
Sections Everywhere has expanded that drag and drop flexibility of the home page to every page on the site. This means you can add any section in your theme to any page, giving merchants so much control and flexibility in designing the secondary pages of their sites - yay 🎉.
So will people still even need page builders? Most certainly.
Online store 2.0 themes are still limited in the number of sections they offer and each theme comes with a unique selection of sections.
I can't count the number of times clients have come to me asking to mix and match themes that they've found in the theme store. And unfortunately, that's just not how themes work. They're built to work with themselves, but not with each other.
Custom development is expensive and honestly, it's getting harder to find experienced developers with the rapid increase in the number of people selling on Shopify and the general trend of people selling more online.
Metafields
The new metafields that have been rolled out by Shopify are a little more under the radar, but they also really give the merchant a lot of power in customizing their theme without the need for developers.
Metafields are essentially extra pieces of data you can add to products, collections, blogs etc. Once this data is added to say a product, the merchant can then connect that field in the Theme Editor. There's a little more of a learning curve on this one but once you get the hang of it, it is immensely powerful.
Some use cases are a specific size chart for each product, unique product specs, downloadable PDFs for specific products, or a list of related products.
Metafields have always been available, but now Shopify has made this completely manageable by the merchant without having to touch the code. Merchants can create metafields on each object type (ie product) and then connect that data to the template through the theme editor 🎉.
Here's a good explanation of how to use the new metafields.
Why Design packs
Traditional Page builders vs Design Packs
Because of the limitations of Shopify themes, traditional page builders created their own drag-and-drop interface, where merchants and designers could create pages and then the whole page would be imported into the theme. Once there, the page could not be modified and the elements already in the theme could not be added. This could sometimes create a disparity in designs for these pages disrupting the cohesion of the site and giving a slightly less professional feel.
Design Packs Seamless Integration
Design Packs sections are built exactly like regular theme sections (with a lot more customization options). They integrate directly into the theme and can be put anywhere. Both templates from the theme and templates from Design Packs can integrate all the sections from the theme and design packs.
After the Design Packs sections are added to your theme, you then can edit them in the Shopify theme editor and then have access to everything Shopify has to offer, including connecting metafield data to each section. Meaning Design Pack sections can be used to display unique data on product pages 🙌.
Performance and SEO
With Design Packs, we've strived to provide a lot of flexibility in customization for each pack, but we've balanced this with the need for fast sites and sound web principles. Too much flexibility in drag and drop editors inevitably leads to markup bloat that not only slows down websites but makes it harder for Google to properly categorize the content, decreasing the benefits of SEO.
Design Packs follow the same SEO and performance principles as Shopify itself and Shopify has made these a big focus in their updates for Online Store 2.0.
Get 2.0 functionality on your 1.0 theme right now!
One reality of running an online business is that there's never enough time to get everything done. There are many benefits to updating your theme to 2.0, but it's also a lot of work and merchants don't always have extra time, especially in busy seasons.
Design Packs allows you to add the benefits of 2.0 to your theme right now ⏰. All of our templates are 2.0 and can be added to any theme. Want to update your "About Us" page? Add the about template to your theme in a minute and start customizing. When you're ready to update to 2.0, you can add that template to your new theme too!