The Turbo theme has a highly configurable, feature-rich home page, with many different types of sections to choose from. You can use any combination of these sections and you can also put them in whatever order you like. This approach gives you lots of options and flexibility in terms of how your home page can look, so experiment a little and get creative!
Use the numbered diagram below as a reference; note that the order of the sections shown is how we’ve set it up in the Portland demo, but remember that you can reshuffle or ignore some of these in your own shop - no need to stick to this particular arrangement!
1 - Promo Bar
The promotional bar can be used to draw a shopper’s attention to flash sales, shipping discounts, or anything you like! It is ‘dismissible’ so the shopper can click on it to hide it if they wish. To enable this bar, simply input text in the “Promotional banner text” field located in theme settings > Header
2 - Top Bar
The top bar will display on all pages (not just the home page) and always contains your shopping cart/bag icon over on the far right side; you can also have it display links to your social accounts, a phone #, a currency converter, customer login, and even additional menu links.
- the phone # and menu can be specified in theme settings > Header
- the social icons can be enabled via theme settings > Social media
- the currency converter can be enabled in theme settings > Currency (the default currency and the display - format can also be set here)
- the customer accounts must be enabled from within the shop (via Admin > Settings > Checkout) in order to have the login link appear in the top bar
3A/B - Main menus
The main menu also displays throughout the shop, and the Turbo theme has the added flexibility of including 2 different menus in the main menu area, along with the shop logo and a search box. You can read more about configuring menus + your various logos in Turbo here (link) but for now note that the main menus can be specified in theme settings > Header.
4 + 14 - Banner images
These are full-width banner images that you can add text and/or buttons to if you wish. You can have up to 3 sections of text (preheader, heading + subheading) and up to 2 buttons on each image, and these can all be specified in theme settings > Home page - banner images.
5 + 8 - Featured Content
These sections will insert a page of content (which you create via Online Store > Pages) and these pages can contain text, images, tables, animations, etc. You can make the layout of these pages (and therefore this featured content section) more interesting by using columns to lay out your page.
6 - Featured Promotions
This super flexible section can feature up to eight images that can link to any content in the shop, such as a specific page, a product, your blog, a collection, etc. You can upload an image for each featured promo and set various options for text, buttons, hover animations, number of images per row, full or standard width, etc. You can find all these options in theme settings > Home page - featured promotions. This is a highly configurable section that can achieve a variety of looks, so use this one to advantage! Note that keeping your image sizes consistent here will make this section look professional and polished.
7 - Featured Collection (slider format)
In this section you can showcase a full product collection in either 'slider' style or the standard column grid layout. In this example we’re using the slider format to showcase the Yoga Mats collection, which then displays as a single row of images with arrows at each end. This allows the shopper to scroll through all the products one by one, advancing through the collection with a quick, fluid motion. Set this up in your theme settings > Home page - featured collections.
9 - Featured Links
Turbo’s featured links section has a super clean grid/block style that showcases links from a menu in a very visual way. First you’ll need to create a menu for this section (via Online Store > Navigation) then add links to collections, products, pages or your blog. The theme will use the image associated with each of these and place it alongside a white block that includes the name of the link on the button; in the case of collections, it will automatically include any text description there as well. For example in the Portland demo, all 3 featured links are linking to collections which all have descriptions associated with them. Specify either 2 or 4 links per row as well as the alignment for any text, in theme settings > Home page - featured links.
10 - Slideshow
This is a full-width slideshow or image carousel area that supports up to 6 slides. It’s very similar to the banner image sections in that each slide can have both text and buttons; there are also options for the arrow style and the slideshow speed. Configure this section in theme settings > Home page - slideshow.
11 - Featured Collection (grid format)
Similar to section #7, this is another opportunity to showcase a product collection on your home page. In this one we’ve chose to use the grid style instead of the slider though, so the products display in multiple rows. You can specify how many products to show per row (2, 3, or 4), again in theme settings > Home page - featured collections.
12 - Video
This is a full-width video section that will insert a video clip directly into your home page. You’ll need to specify the source for this video (it can be something hosted on Vimeo or YouTube, or even an HTML5 mp4 or OGV file) and there are also options for aspect ratio, auto-play, auto-loop, having text/buttons display over the a static placeholder image, etc. You can configure all this in theme settings > Home page - video
13 - Collection in detail
This section will display each product in a collection in detail (this includes an Add to Cart button, to enable purchase directly from the home page). In the demo shop, we’ve used a collection that contains only a single product, but your collection can definitely include multiple products if you prefer. Go to theme settings > Home page - collection in detail to set up this section and configure the options for displaying the full product description and staggering multiple products left and right.
15 - Blog
This section is home to the blog feed, where you can display blog post excerpts (including a featured image) to entice readers to explore your blog and read further. You’ll just need to specify which blog to display and how many excerpts to show, You can find the settings for this section in theme settings > Home page - featured blog (NOTE: this is different from theme settings > Blog page, you’ll use those for configuring your main blog page layout instead).
16 - Social Feeds
The Turbo theme supports both a Twitter feed and an Instagram feed on the home page. You can display one or the other, or both together; in the demo shop we’ve chosen just to show our Instagram feed. Note that if you choose to display both feeds, they will appear side by side in this section rather than having their own rows. Also note that you’ll need an Instagram Access Token in order to get that feed to show up. You can enter this token as well as your Twitter handle in theme settings > Home page - social feeds.
17A - Newsletter section
This built-in section above the footer encourages shoppers to subscribe to your mailing list. You can display a background image in this section (as we have done) or keep it just a solid color. To use a background image, enable and upload it via theme settings > Newsletter > Banner.
17B - Newsletter popup
This optional modal window can be enabled to pop up after a certain length of time in the shop, and with a specified frequency (every few days, weeks, etc.). You can also insert an image here if you wish, along with any text and the email subscribe form. To set this up, go to theme settings > Newsletter > Popup.
18 - Footer
Last, but not least, we have the footer; this will display not only on your homepage but across all pages in your shop. The Turbo theme’s footer supports up to 3 menus + a content page and a logo, as well as copyright text, optional designer credits and payment method icons. You can specify the menus for the footer and configure the other options in theme settings > Footer