The Podcast
Show Links
- Gallery of Flex theme examples - https://jadepuma.com/pages/gallery-of-flex-theme-examples-of-shopify-store
- Flex Custom Sections and Tutorials - https://jadepuma.com/blogs/shopify-tutorials
- Flex Theme (affiliate link) - use coupon code 'AUSTIN10'
Help the Podcast
Transcript
Hey, Scott Austin here.
In this episode, I want to talk to you about my recommended Shopify theme. And that is Flex by Out of the Sandbox. I did an episode on Flex back in 2019 when the theme was still new. Since then, Flex has become the only theme that I use. I have used it on every new store build and store migration that I've done in the past three years. I also frequently upgrade existing Shopify stores from less functional themes to Flex to enhance the brand's shopping experience.
My philosophy about themes is that themes are like toolboxes. Every theme comes with a set of tools in their toolbox. So you need to find the theme that has the tools, or features, that your store requires. Some people focus their theme search on one specific tool that they are looking for, say mega-menus. But I prefer to use a theme that has the most features, not just a specific desired feature. The Flex theme has the most tools in its toolbox of all of the Shopify themes available today. The theme has more features and controls than other themes and it can do more out of the box. All of this can save you money as you won't need to hire a Shopify Expert as quickly when building your store. The price tag for the Flex theme is $495 which is a bit more than the $200-$350 for other premium themes. But I think the cost difference is really small when you see how much more value the Flex theme provides. One thing to note is that this theme is not available in the theme store and you'll have to get it directly from the Out of the Sandbox website. I've got a link to it in the show notes that includes my affiliate link, which I am most appreciative to those that use it.
Now before I talk more about Flex specifically, let me talk about a few terms that I'm going to use during this podcast that apply to all Shopify themes and those terms are templates, sections, blocks and CSS.
Templates. In Shopify's Online Store 2.0, templates are not as important as they used to be. Because in Online Store 2.0, most of the page display is now done in sections, not templates. So templates are now the container for sections. And we can easily create new templates and define what sections are in them to display things differently on collections, products, pages, blogs and articles.
Sections. Sections get used inside of templates. The most common place that you've probably seen sections in use is on the homepage. If you've been in the theme customization app in your Shopify store on the homepage, you know that you can add content sections or remove them and edit them. You can move them up and down on their placement on the page. So sections are components that work inside of templates. It's with sections that we create the large differences in the display of pages. For example, with collections, we could create a default template that shows the list of products in the collection. Then we could create a second a template that is similar to the default template. But we can add a section to the second template that displays a banner image at the top of the page. And we can easily change the placement of a section on the page, so we could move the banner image to be under the list of products if desired.
Blocks. And then inside of sections there are sub-components called blocks. So let's say you add a section, which is a list of collections. You will then add blocks to that section for the different collections that you want listed. So if you want to list five collections in that section, you'll add five blocks. And blocks don't have to identical content types, like a collection in the previous example. The can be different content types. For example in product section, there could be blocks for product title, product price, product vendor, product tags, product description and more. We can add and remove blocks to come up with the desired layout for section. And move the placement of the blocks within the section just like we can move the placement of sections within a template.
So templates, sections, and blocks are all building blocks inside of your theme to show your content the way you want to create your desired shopping experience.
CSS. And now the last term is CSS and CSS is not Shopify specific. CSS is a part of HTML that most websites use and CSS stands for cascading style sheets. What CSS does is tell our pages how to style certain elements. So we may say something like, Hey, I want the background color of my pages to be white or a light shade of gray or black. You can adjust styling for things like colors, fonts, spacing, layout behaviors and more all through CSS.
And what's actually happening is your theme comes with a CSS file created by your theme developer that provides a lot of that functionality and styling already built in. And then when you're in the theme customization app in your Shopify admin and you're adjusting templates, sections and blocks, some of those controls that you're setting like specifying a font size are actually affecting the CSS file that that theme is generating for you.
So that's a little background on some terms that I'm going to be using moving forward. Now let's move back to the Flex theme. Here are some of the top-level reasons that I like Flex:
- It has the most tools in the toolbox. The theme provides the most flexibility. So with Flex there's more things you can do within the theme without having to edit the theme code. That gives more power to store owners who do not edit code. So you can specify different font sizes, button colors, spacing and margins and animation options. And you can specify these at the theme level, the template level, the section level and the block level. Whatever theme you're using today, when you open it up in theme customization, you may have a menu that gives you, let's say five different options that you're making decisions on to adjust the layout of the page. Well that same functionality in Flex is probably going to give you two or three times the number of options. Here are some the tools in the Flex toolbox:
- Predictive search
- Mega-menus
- Support for different desktop and mobile banner images
- Included icon library
- Gradient backgrounds
- Multiple demo designs that you can use as a starting point
- Multiple button styles
- The ability to add and edit CSS in the Theme Customization app in the Shopify admin and not through editing code. You can have custom CSS at the template and section level. So one of the things that I do when I'm working on a theme in a Shopify store is to add my own CSS file that I used to provide my customization to the user experience beyond what's provided by the theme. I'll frequently adjust color, behavior, and layout to meet the goals of the store. In Flex, a lot of that work can be covered in the Shopify theme customization app instead of through liquid code and editing the CSS. And how it works in Flex is that most sections have two text boxes that you can use to adjust CSS without editing liquid files. And those two boxes are CSS class and custom CSS.
So here's an example of using the CSS class box. Let's say that you want to apply an orange background to certain elements on your site, maybe to some of your collection list or some of your photo galleries. You can assign the specific sections that you're using in the specific templates that you want to have the orange background a CSS class of orange. And you can do that in the Shopify theme customization app. And then you can go into your global CSS file and give that orange class the background color of orange. So that global CSS file will make the background color orange for anything that you assign the CSS class of orange from within theme customization. In other themes, you'd have to create a new section that has the orange class in the section code. And then you would choose the appropriate section as you are building the pages. But with Flex, you keep one section and change the background color by adding the class to the desired sections in the template. I use this quite often when building out content-rich pages. I use an alternating background color to keep like content together, like with an image with text section, with and alternating background color between multiple image with text sections.
Now here's an example of using the custom CSS functionality. Let's say that you have 10 different pages with big banner images at the top of the page and those banners have different primary colors. So you want to have heading text over each one of those banners. But you want that heading text to be a contrasting color for each of the banners to provide the best readability with the banner photo underneath. In flex, you can decide a heading color at the section level for each one of those templates to override the global color setting. In other themes, this requires complex custom code and set up.
- The Flex theme comes with a set of different layouts for the header and footer. These can help you create the right design for your store and one that does not have the same look as all of the other stores. As the header and footer are a part of every page in your store, having them look more unique and mapping to your brand goes a long way in having your whole store look unique and map to your brand. I'll include a link in the show notes to a gallery of stores that I've built in Flex so you can see what I mean.
- The Out of the Sandbox team is constantly creating new releases and improving the theme. Over time, I find that things that bug me about the theme get improved. And new features are always getting added. You may notice how Shopify is always improving your Shopify admin. Well, Out of the Sandbox is the same way with the Flex theme - constantly improving. Flex was my favorite theme in 2020 and it has continued to have product development and I like it even more now.
So those are some of favorite features. In my experience, here are some things that you should be aware of when using the Flex theme or areas for improvement for the theme:
- My biggest complaint with the Flex theme is their customer support. Frankly, it's just awful. It seems like their support processes are designed to say Out of the Sandbox is not responsible for any issues you may be experiencing instead of helping you get the most out of the theme. Customer support won't help with any customizations of the theme. And by help, I just mean they won't engage in a conversation and give advice or documentation. And they won't help diagnose issues when the theme and an app are not working well together. I've been so frustrated with their lack of support in the past, that I don't even try to engage them anymore. The typical experience I've had with them when trying to solve an issue is that they add a fresh copy of the theme in the store and show that it is working properly. So they conclude that any issues are either caused by changes made by apps or my customizations. They then state that that is beyond their scope of support. Now this isn't much of an issue for me anymore. When the theme first came out in 2019, it was quite buggy as it was new code. But years later, the theme has continued to develop and is much more stable. And, as this is the only theme that I use, I am so used to all of its quirks that I easily handle them when setting up a store without even thinking about it. But a new user of the theme won't have that level of familiarity.
- The Flex theme has built in support for Shopify's free Product Reviews app, which sounds great. But here's the thing, no one should use that app as it doesn't solicit reviews from customers via email after they have made a purchase. Stores should use a more robust review app. By including built-in support for the app, it seems like a recommendation. The best theme should not endorse the worst review app. I'd prefer they add support for the better review apps or at least pull support for the Shopify Review App.
- The Flex theme has an associated Theme Updater App that sounds great. It will update your theme to the latest version so that you get the benefit of the latest features from Out of the Sandbox. But the app doesn't automate the full upgrade process if you have added any apps or have made significant code changes to the theme. And most stores that are running a robust business are going to make significant changes to their theme. So don't expect to the get the automated benefit of theme updates from the app. The updater app will upgrade your theme code, but will leave some customizations behind. Then someone with technical knowledge will need to determine how to bring the lost functionality back into the upgraded theme.
- There's a lot of functionality inside the Flex theme, so there's also a learning curve when starting out on the theme. It may take some time for you to understand all of the features and controls in the theme and how to access them. As such, and I apologize for the self-serving nature of this advice, it may prudent for you to engage with a Shopify Expert that has experience with the theme to help you get the most out of it in the quickest amount of time.
Now, for me, the pros far outweigh the cons which is why I recommend Flex to most stores and use it on all of my projects. And one of the benefits for my agency in focusing on one theme is that we are experts in it. We know the themes controls and code intimately and are able to quickly integrate apps and customize the theme as needed. And here's where that can benefit you. With the power of sections anywhere in Online Store 2.0, JadePuma has built a library of sections that are designed to work with Flex and we provide the code and instructions for them for free to anyone that wants to use them. We add many of them to almost every store we work on. Some examples of these custom sections are:
- Brand guidelines documentation
- Article image review tool
- Collection content review tool
- Featured promotions with a grid layout
- Image with text with adjustable widths for the image
- And many more
We also provide tutorials for how to do things within the Flex theme. We create these tutorials and custom sections for ourselves but share them as one of the ways that we try to make the Shopify community even better. If you are using the Flex theme, I recommend that you check these resources out to see if any of them can help you. I'll include a link to them in the show notes.
In summary, for all of my client's stores, I use the Flex theme as it’s the most robust, feature-filled theme available. And its easier for me to build a more robust and unique store for each of my clients with Flex as the starting point. Flex is the most expensive Shopify theme out there, but in this case, you get what you pay for.
So I would recommend Flex for many store owners. Basically if you've moved your business from being a basic online store to building an online brand, Flex is going to help you build a site that better supports your brand. But if you are a newer, lower volume store, you might want to get started with a simpler theme with a shorter learning curve and move to the Flex theme later when growing business hits the limits of that simpler theme.
Thanks for listening.