New year, new theme: Pro designer tips for buying a new Shopify theme

Welcome to 2020! A new year, especially once the BFCM rush is over, is always a great time to roll out a redesigned store with a fresh new Shopify theme.

However, with so many great Shopify themes out there to pick from, how do you decide which theme is right for your Shopify store redesign (or launch), and how can you make it fit your needs and brand.

Out of the Sandbox’s design director, Sharon Austin, and designer Charlie Quinn, share some of their favorite features and design tips on Out of the Sandbox’s high-performance premium Shopify themes, Flex and Turbo.

Both Turbo and Flex received major updates in 2019 — with Flex making its debut in August followed by a major feature update in September.

How Shopify theme updates made these themes even better

“Flex launched chock-a-block full of fantastic features and sections, so it was hard to top in subsequent updates,” notes Sharon.

However, being the “outside of the box” thinker that she and the entire Out of the Sandbox design and development teams are, the release came with an impressive array of new features, including the addition of the multi tag filter sidebar option, predictive search and more.

Sharon’s favorite, however, is something more subtle — the ability to do an image swap on hover using the “show secondary product image” setting.

“This is a great opportunity to show an additional photo of the same product without leaving the collection page,” she explains. “The second photo could be an alternate view of the product or one that shows the product in context, which can help the shopper better envision using that product in their own life.”

Charlie, meanwhile, points to the theme’s new button font settings.

“Arguably, buttons are one of the most important UI elements on a website, especially in ecommerce, because they prompt users to act on something,” she points out. “Having more styling options gives merchants more control over the user’s experience throughout their store.”

Turbo has been around longer but did graduate to Version 5.0 in November 2019, and has already had a series of design additions along the way, Sharon notes.

“Dubai and Tennessee are nice clean design presets that have been added recently, so those are definitely worth an upgrade, even if it’s just for inspiration!”

Sharon also notes that for stores with relatively simple products, or don't have too many variants, the new “inline” style option for quick shop is a great way to add a perfect flow to the “add to cart” action all from the collection page.

“Shoppers can do this without interrupting their perusal of the offerings,” says Sharon.

“This capitalizes on the purchase impulse and, coupled with enabling the dynamic payment buttons, can really help streamline a sale,” Sharon, who is an experienced ecommerce UX and UI designer, explains.

Making a Shopify theme your own

While all Out of the Sandbox themes look great right “out of the box” with just a few updates such as adding your logo, colors, and fonts, many store owners want to expand beyond what Sharon calls “opinionated” styling that most Shopify themes come with.

Flex was designed from the outset to be less “opinionated.”

This makes creating unique looks faster and easier.

“A quick glance at the dozen Flex demo shops shows what a wide range of looks is possible, but take some time to acquaint yourself with all the different options available to you in the Settings and take full advantage of them,” she advises.

“The more you get to know Flex, the more you’ll realize how easy it is to make ten sites look and feel unique,” Charlie notes.

Sharon encourages theme developers and store owners to dig deeper into all of the layout settings under theme settings to really explore all that’s possible with Flex.

She advises making sure you have a “vision” for your store’s look and feel — which may be driven by your branding (if you already have it).

If not, Sharon advises considering what “vibe” your store should give off — whether it’s more pastels, white space and minimal text or a bright, bold and energetic look that pops.

Meanwhile, Charlie points to the theme’s vertical spacing and width options to create multiple sections that sit beside each other — instead of just the traditional stacked layout — as another great way to create unique layouts.

Sharon also encourages store owners to get creative. “Mix and match, and don't be afraid to experiment; remember you can create multiple unpublished versions of your shop with different looks and configurations, so try a few variations then see which you like best,” she says.

In addition, Sharon encourages you to create a foundation for the “look” of your Shopify store by picking icon styles available under the “Elements” settings and to configure your button styles and then base other design decisions off of that.

Charlie reminds designers to take advantage of the ability to apply custom CSS to almost every section. Though this does require knowledge of writing CSS, it’s fairly easy to learn if you don’t know it already.

Another thing she advises is to pay attention to your sections’ animation settings:

“Movement applied to anything on a shop can be one of two things: distracting or subtly enhancing. Adding too much animation to page elements can prevent customers from continuing to scroll, but adding subtle animation to large or small pieces, as we can do in Flex, can really bring your products and store to life.”

While stores built on Turbo tend to be a bit easier to spot, there are still plenty of ways to make them unique.

Sharon suggests starting with the featured promotions section, because it has so many options and can look quite different depending on how many per row you choose and what shape of image cropping you pick.

She also notes that you shouldn’t let the name fool you — the section is great for a wide variety of content, not just promotions, thanks to that flexibility.

An interesting twist is to use this section type at the top of your homepage, rather than the traditional slideshow, something she opted to do when creating the Florence demo store.

Additionally, Sharon points out that you shouldn’t feel compelled to have headers or dividers on all your sections.

“Just leave the text input area blank, and in the colors setting choose ‘none’ for ‘Heading divider line” to create unique looks that are also cleaner and, in many cases, easier to read.

For the testimonials section, she suggests skipping the background image and just using the shop background color for a nice minimalist look while still taking advantage of the section’s other features.

Going way outside the box

If you’re really looking to make a splash with Flex or Turbo, there are plenty of ways to do that — though they do take some creative thinking.

Sharon and Charlie brainstormed several ideas to share with you.

Of course, the Flex style presets are an excellent starting point and are intended as a build tool to get your shop looking great as quickly as possible.

“This is a time-saver for sure, but if you want your shop to look different from the preset you chose, your best bet is to change the fonts, button styles, header style, and colors for the most impact,” Sharon notes.

She also advises avoiding using the stock images that come with them and use your own lifestyle photos instead or, at the very least, swapping in different stock imagery.

However, what’s Sharon’s go-to secret for creating a truly unique Flex store? Not using a preset to begin with — start from the flex.zip file instead — and experiment with all the setting options available.

For Turbo, her first suggestion is to take everything out of the top bar area except the cart, and change the cart background so that it matches the background color of the top bar. This will create a solid and minimalist bar that puts the focus on the cart functionality — which ultimately can lead to higher conversions.

Charlie encourages users to get creative using the slideshow section.

“There are so many great settings to add some depth to your slides. On top of adding a background image and text to each individual slide, you can also play with the text’s positioning, alignment, and decide whether or not to add a background color to the text itself,” she explains.

There are also a few mobile specific settings to consider, such as how the slideshow images should be cropped and where the text should sit — on top of or below the image.

Sharon also suggests disabling the search box from the header bar in Turbo since it has such a distinctive look. This is especially true if your store is smaller and search functionality isn’t as important — and you can always use the search section to offer users a way to search from the homepage.

She also suggests resisting the temptation to use the full-width setting. While full-width sections are popular, they can also be overused and keeping things the “standard” width can be a great way to stand out and also give your design some “breathing room” on the sides on larger screens.

The “highlight” button feature, available in select sections, is another unique design element that Sharon has worked with, as is using all lowercase text for main menu and button text or placing the logo to the left of the page, instead of centered.

Sharon also notes that there are several approaches that can be used equally effectively on both Turbo and Flex.

First, consider using sections for something other than what they were intended or labeled as.

“For example, use a slideshow for testimonials, use testimonials as a ‘meet the team’ section instead,” she explains.

Sharon also suggests keeping your homepage “minimal” and using only a handful of sections with carefully selected imagery and text that makes a huge impact. This can often make your homepage less daunting while also drawing in users to learn more about specific elements by clicking links or buttons.

Finally, she circles back to the variety of button styles that are available in Turbo and Flex — and experimenting with the variety of settings that each one comes with to get a truly unique look for these all important elements of any ecommerce design.

Charlie encourages users to get creative with how they use the mega menu feature in both Turbo and Flex.

“Just because it has the word ‘menu’ in the name doesn’t mean you can’t use more images and less text! Next time you enable a mega menu, try simplifying your navigation by using product, collection or promotional images under each column,” she suggests.

Final thoughts

Sharon and Charlie also hint that more styles and features are coming to both Turbo and Flex in 2020 as Out of the Sandbox continues its commitment to provide regular updates.

“Feedback from those using our themes has always been a very important part of our decision making when coming out with theme updates. 2020 is no exception, and we can’t wait to show you what we have in store,” says Charlie.

She also points out that longtime Turbo users who haven’t updated in a while might want to take a look at the most recent version — and consider updating.

Not only does updating ensure your Shopify store will be using the most efficient, secure and updated code, but that you’ll get full advantage of the latest design and setting options.