Following the first major feature update for our Flex Shopify theme, Out of the Sandbox has rolled out another big theme update just before BFCM — but this time it’s Turbo’s turn.
Welcome Turbo 5.0.
The latest version of this best selling Shopify theme is focused on responding to customer requests as well as incorporating popular features from Flex into Turbo.
We’re also using this release to introduce a new demo shop and style with a fresh new take on Turbo to inspire your own store building.
Mobile banner text position option
For banner, slideshow and video sections, Turbo now offers the option to pick between “overlay” or “below” position for text — one of Turbo’s most requested features.
- By default, Turbo places the text added to these types of sections below the image or video on mobile devices.
- Turbo 5.0 introduces the option to keep the text on top of the image or video on mobile devices.
- This setting applies to all text in a particular banner, slideshow or video section or block, including any buttons.
It’s worth noting that this feature should be used with care to ensure your banner text remains readable on all devices.
- Be sure that the image you pick has enough contrast with the text color. In general, images with large, open spaces of solid or relatively solid color tend to work better.
- Keep in mind that the text won’t always be in the same position on all devices, so be sure to test that the text is legible on a variety of screen sizes.
- You can also use the text background transparency or text backgrounds to improve legibility on all devices or if you need to use a more complex background image.
- In addition, the text shadow option under Theme settings > Typography > Banner headings can also improve legibility.
- If you’re particularly concerned about keeping the text legible across all devices, you may want to consider sticking with the default “bottom” positioning since this places the text against a solid background.
Cart page shows discounts, savings
Turbo’s cart page, as well as the drop-down mini cart, have been updated to display automatic discounts – a key conversion boosting feature that Flex first introduced:
- Automatic discounts that apply to specific line items in the cart will be displayed with the discounted price shown as well as the original price in strikethrough.
- For cart level discounts, shoppers will see the total savings.
- In addition, if any items in the cart are on sale (as opposed to being automatically discounted), these savings will be included in the total savings shown.
Displaying these discounts on the cart page or dropdown serves as both a visual confirmation that the user is getting any discounts you may have advertised as well as a way to add a bit of urgency to check out before the prices increase.
It’s worth noting that, because Shopify’s standard flow doesn’t show the discount code field until the first page in the checkout process, these discounts aren’t included in the total savings on the cart page.
Shopify’s checkout pages will, however, update pricing automatically if a customer enters an eligible discount code.
In addition to automatic discounts, we’ve also added a “remove” link to both the cart page and mini cart – a simple but popular request from merchants. The “remove” link makes it easier for shoppers to remove items from the cart, although hopefully, they won’t have to use it!
Show sold out product prices
If an item is sold out or not in stock, you now have the option to display the price on the product page.
- Assuming you don't have “continue selling when out of stock” on, this feature will show the product price in lighter text.
- A notation reading “Sold out” (or whatever text you have defined in the within the Product Grid settings) will display next to the price so it’s clear why the item can’t be ordered.
- Add to cart and dynamic checkout buttons will not be shown.
The ability to show prices on sold out product pages can often be useful so potential buyers still know how much the item costs.
This feature can be used in conjunction with the “back in stock” notification form.
Since customers who sign up to be notified will have the opportunity to see the cost of the item, it can be a good way to gauge interest in an out of stock product and if it’s worth topping up inventory.
Section placeholder content
Turbo 5.0 also introduces a feature that will help you get started with your store faster — downloads will now include ZIP files that preconfigure your theme with the placeholder text, settings and section setups shown in our demo stores.
The caveat here is that, at this time, these files do not include the image files like with Flex, but stay tuned!
Tennessee demo store
Finally, Turbo 5.0 also comes with a fresh new look — Tennessee. In our demo store, we’ve used this to showcase high-end barware.
When creating Tennessee, our design team focused on showing off how, with a few theme setting changes, Turbo can take on a whole new look.
In this design, we balanced bold imagery with a clean, white non-fixed header to give Turbo a more refined and nuanced aesthetic.
In addition, instead of the familiar full-width slideshow or image with text overlay homepage sections, we turned off the “wide display” settings so that, on larger screens, these don’t fill the entire viewport horizontally.
This illustrates how a non full-width slideshow or image with text overlay section can still make a huge impact — while also giving your store more elegant white space.
The overall feel of the new style is smooth and sophisticated, with plenty of white space and polished typography.
