The Podcast
Show Links
- Flex Theme (affiliate link) - use coupon code 'Austin10'
- Turbo Theme (affiliate link) - use coupon code 'Austin10'
Help the Podcast
Transcript
Hey, Scott Austin here. A few months ago I did a podcast episode on themes in it. I recommended the turbo theme by a company by the name of out of the sandbox as the best theme for Shopify stores. Turbo has long been my favorite theme. I've used it in most of the projects of new stores that I've built or store redesigns that I've done over the past two-plus years. And the reason I like turbo so much is that it's the theme that has the most tools in the toolbox. It has the most components, the most sections, and those templates of any of their themes out there that give you the most flexibility. So with turbo there's more things you can do within the theme without having to customize the theme. Well since that podcast episode, that same company out of the sandbox has released a new theme named flex and now there's a new winner for the theme of the most tools in the toolbox and that is this new theme.
Flex will now become my go-to theme and I'll probably be using it a lot more than I do turbo in the future. But the flex theme is not for everyone. So what I'm going to do in this podcast episode [inaudible] give you a review of the flex theme and how it differs from turbo and after that review I'll provide recommendations for who should use flex and who shouldn't. Now before I talk 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. So let's start with templates. If you create a new page or product or collection in your Shopify admin in your store, you have the ability in that Shopify admin for that collection, that page or that product to define what template it uses.
Some themes provide just one or two templates and other themes. We'll provide five or six templates. And with these templates do, it's changed the way that the content is laid out to the end-user in the front end of your website. So using the product as an example, you may have one template that presents the photos in a slideshow carousel and another template that puts the photos in a different place and allows the customer to interact with them in a different way. And the next term is sections. Now sections get used inside of templates. Not every template has sections. The most commonplace that you've probably seen sections in use is on the homepage. If you've been in the theme customization functionality in your Shopify store on the homepage, you know that you can add content sections or remove them and edit them. You can also the homepage, move them up and down on their placement on the page.
So sections are components that work inside of templates. And then inside of sections there's also 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. So templates, sections, and blocks are all building blocks inside of your theme to render. The pages, the way you want them to show up. And now the last term is CSS and CSS is not Shopify specific. CSS is part of HTML that most websites use and CSS stands for cascading style sheets. What CSS does is how it's how we're telling 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 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 that styling already built in. And then when you're in the theme, customization happened, Shopify and you're adjusting templates, sections and blocks, some of those controls that you're moving around like specifying a font size that's actually affecting the CSS file that that theme is generating for you. So that's a little background on some terms and I'm going to be using moving forward. Now let's move back to the flex theme. Flex looks and feels a lot like the turbo theme. So if you're used to turbo, flex is going to seem very familiar to you. Flex has a lot of templates, it has a lot of sections, and it provides a lots of control. So the end user, you, the store owner, can adjust the settings that get used in the CSS.
So you can specify different font sizes, button colors, spacing and margins and animation options. With the flex theme, we now get a lot more control and unbelievable about more of more of control than we used to have in any other theme in a Shopify store. So in flex we can specify more fun sizes, more typography choices, more colors, more options about how things are going to behave. And we can specify these at the template level, at the section level and at the block level. Whatever theme you're using today, when you open it up in theme customization, you may have a menu wherever you're at that gives you, let's say five, 10 different options that you're making decisions on to adjust the layout of the page. Well that functionality and flex, it's probably gonna be two or three times the size of options. So we used to have 10 you might have 30 options and that gives us the ability, do you have much more control over that user experience than we've had in the past without having to go to code customization.
So now going to walk through some examples of how flex gives you more control than any other theme does in Shopify including the turbo theme. And I'm going to go through them with the ones that I think are the most important first and then moving down to the ones that are less important or less impactful for your business. And in most of this falling discussion, I'm going to comparing flex to turbo, but please don't take that as me. Distinct turbo. I still think turbo is one of the best themes out there, but now I think stores should consider which the two top tier themes is right for them. Flex or turbo item number one, flex gives you more control over simply everything, colors, fonts, affects, et cetera. And the controls are at the template and the section level and let me give you a couple of examples.
The first one is in footer layout. Turbo provides a flexible foot or layout that allows the foot or to have one to five columns with different content blocks for each, but in flex it provides four different layout options for the footer. It has the same one that turbo does that allows the one to five columns and then it also has three other options and this gives you more flexibility in what content you're putting in your footer and how you display it. Another example is with buttons. Turbo provides different controls for buttons for things like color, hover, color button styles and border radius and there's about 10 different controls that it has. Lex provides three times in a row controls that you can adjust for buttons and this gives you much more control over the experience. For example, now in flex you can have unique styles applied to gesture, add to cart buttons.
So all your add to cart buttons can be one action color and other buttons on the site can be a not as dominant or more of a background color than the add to cart. And in the past when I've used other themes, I frequently want to do things like give the add to cart button, its own unique color. And to do that I would have to go into liquid and customize the CSS to make that change. And so now that's built into the flex theme. So it's easier for people to set that up without having to go into do customize CSS. And it's also easier to change later on because now it's changed within the Shopify theme customization app instead of through liquid code of the CSS. Item number two, we now have the ability and flex to 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 my own CSS file that I used to provide me customization and use experience beyond what's provided by the theme. I'll frequently adjust color behavior layout to meet the goals of the store. Now 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 CSS class box. Let's say that you want to apply an orange background to certain elements on your site. Maybe do some of your collection list or some of your photo galleries in flex. You can assign the specific sections that you're using in the specific templates that you want it to happen in 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 a property of a background color equal to orange. So that global CSS file will make the background color orange for anything that you assign the CSS class of orange.
So in this scenario, you are editing a CSS file but you're editing it one time and then you don't have to go into each of the templates in sections that you're creating and edit those to give it that CSS class cause you can do that inside of the theme customization app. 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 different color for each of the banners to provide the best contrast 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 the past before flex, I've done this a lot, but it had to go into the liquid files and the CSS of each of those templates and sections and create these custom elements and now in flex that level of customization is so much easier.
Item number three, banner images. One of my biggest frustrations with the turbo theme was about a really simple thing but it was really frustrating and I'm a big fan of responsiveness and I actually think that we should develop our websites for mobile-first and what turbo does with banner images, which you make landscape, they're very wide and not very tall, let's say 1800 pixels by 500 pixels and that looks great on a desktop and then you have text over that on desktop and it looks really good on the mobile phone. However, what turbo does with that element, it takes that 18 by 500 banner image and still shows that full image, but it's now very small cause it's on a mobile screen and there's not enough space there to put the text. So it then puts the text underneath, and this is especially frustrating if you're optimizing that banner image to have text over it.
So a lot of times I'll take a banner image and darken maybe the center of it or a certain part of it to provide better contrast to the text that's on top. But now on the mobile phone, there's no text on the top and that treatment you do to the banner image kind of looks silly and out of place. So now if flex allows us to do is make the decision for every banner that we add to our store, if we want the text to be over the image or below the image on mobile and that'll help make our mobile sites look a lot more complete and compelling. Item number four, icons. Flex comes with a built in library of icons that you can use. For example, they have a truck that you can use to represent shipping. And these icons can be added to many of the sections that come with flex.
So if you're creating an element with three horizontal images to represent some of the value props for your store, you can also assign an icon for those and it's just another visual identifier to allow people who are skimming through your site to quickly see and understand the messages that you're trying to convey to this icon functionality. I'm really happy with though the library of icons that currently comes with flex, a small that said you can add your own icons to the store and then use them in the theme. Now the format of those icons will be SVG files, which is a vector graphic format and adding them is is sort of like how you can add swatches to the color choices if you've ever done that in your store. So it's a pretty simple process to go through.
Item five, demo shop styles. So flex provides so many choices and so many options. There's so much flexibility that it's hard to get your head around what is possible within the theme. So what out of the sandbox is done has provided 10 demo stores. So you can look at these stores and get a feel for the different ways that you can present your website to your customers. And not only can you look at these demo stores, you can install these demo stores as the theme into your store and that gives you a great starting point to work from. And one advantage of this is that it puts a placeholder content and images in place as you install the new theme. So then it's easier for you to visualize what the final product is going to look like and determine what sort of assets you're going to need to complete the experience.
That said, I usually start with a blank store and build it out from scratch the way I want it to be, but that's because I've used the flex theme a few times now and better understand all the possibilities that are within it. Item six, the flex theme provides more half page with elements than is available in the turbo theme or in a given section. You just have the option through a checkbox to say, make this a half page or a full width element. And the reason that this is important is it helps make sites more responsive. As we lay out a page for desktop and we've got that full width of the screen going on, things may look great but then when they get compressed down to the smaller with screen on the phone, they don't look as good. So breaking things down into two half-screen elements that sit side by side ends up being more responsive and working better on mobile phones and on desktop.
You know, just like I was talking before about the banner image, which is really wide and not very tall, very landscape and how it looks good on desktop but on the mobile phone doesn't look as good if you take that and make that two half page elements instead it looks good on desktop and on the mobile phone item number seven there's a lot more layout options for the header and footer. I already gave an example of the footer and how on turbo there's one option or one layout that you can set up, but on flex there's four and the same is absolutely true. For the header. You can have a header that's horizontal across the top of the page or you can have it vertical on the left side of the page and you have all the typical functionality and options to add in things like a top bar and announcement bar and a mega nav and in flex ware and in flex it allows up to 10 mega nav menus.
Item number eight there's more animations and effects available inside of the flex theme. One example is you can have gradient background colors, so you can have an element that starts at light gray and then fades to blue or for images. There are a lot more options on how that image gets rendered. Inside of the page. You can have fades slides or zoom and there are different options for which directions those animations come from. And item number nine and it's the last one in our list here today is not really a feature that makes its way to the front end, but it actually makes using this theme a little bit easier, especially when you're inside the liquid code editing files and that is an Inflex all the section names and there's a lot of sections because of all those different options we have, all those section names have now been given a prefix for what that section is used for.
So for example, the homepage, all the sections that show up on the homepage is options for you to use. They're all prefaced with index, same thing for footer or page FAQ and all the different templates that are available. So it's a lot easier when you're inside of the theme code to determine which section element is the one you want to be at for the different templates that you're working with. So these are the changes that I'm most impressed with so far. Remember the list I just walked you through is not all the features that flex provides. These are just the ways that the flex theme differentiates itself from the turbo theme now I've been using turbo for the past few years and I have a lot of work that I've done in a custom code that I built out and and different things that I do with inside the liquid code to make turbo work the way I want it to work.
So one of the things I tested out was taken a turbo section and dropping it into flex to see if it would work because I'm so familiar with how turbo works and the CSS and Java script between flex and turbo are different enough that a section from turbo does not work inside of flex, but a lot of the theme customization, the code that I create and add to stores to add functionality beyond what's available in the theme. That code, I was able to just drop into flex as I had built it for turbo and it worked just fine. There might be a couple situations where I might have to change some of the CSS classes that are used, but in general most of the custom code work that I've done in the past and turbo also works inside of flex, so flex provides a lot of flexibility, a lot of customization, but sometimes too much of a good thing is a bad thing and what I mean by that is flex is going to be great for some people and not the best solution for others.
So the people who should use flex, in my opinion are agencies, Shopify experts, people that already know exactly what they want and are being held back by their theme or people that spend a lot of time in liquid adjusting the CSS and are comfortable with CSS editing people who should not use flex are people who don't know how to adjust CSS or people have a hard time making decisions because there are so many choices you have to make inside of this theme. Also, store owners that are just setting up one store for themselves. There are so many choices to be made and the learning curve behind flex is pretty steep that I wouldn't invest in flex if you're just building out one store for these people. My recommendation remains to use turbo. So here's the net of this whole podcast episode. Out of the sandbox provides, in my opinion, the two best themes for Shopify stores.
If you're a store owner that's going to build your own website, I recommend you use turbo. If you work in more than one store and are frequently building or redesigning stores, I recommend that you use flex. Both turbo and flex are only available from the out of the sandbox website. They are not available in the Shopify theme store and I've included links to both in the show notes. And the last thing to note is that this review is my own opinion. This is not a paid endorsement or ad. I use turbo and flex every day because they are the best options for my clients.
Thanks for listening.