The following is a breakdown of the Turbo theme homepage sections, as seen in our live demo shops for the Portland, Seoul, Florence, Chicago, Dubai, and Tennessee style presets. You can learn more about theme styles here.
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!
-
Portland
The sections below make up the Turbo Portland homepage:
1. Header - Announcement bar
The announcement/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. Header - 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/3b. Header - 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.
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 the image with text overlay settings. Additionally, there are mobile specific settings.
The rich text and image section quickly and easily allows you to add a block of content to the homepage which can be used in many different ways. The 'Rich Text and Image' section includes an image, heading, text, and a button - which are all optional.
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. 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.
The image with text section is perfect is you want to prominently display images. Whether these are product related, company related, or lifestyle shots; this section will show off any big or important images you have along with any applicable text and a call to action button.
8. Featured Collection (grid 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 grid format to showcase the Yoga blocks collection, which then displays as a single row of images. The Inline Quick Shop style is enabled as well, which adds an "Add to cart" button beneath the image.
9. Slideshow
This is a full-width slideshow which is very similar to the banner image sections in that each slide can have both text and buttons; there are also options for the slideshow speed and animation, as well as mobile specific settings.
10/11. Image with Text
Similar to section #7, this is another opportunity to show off any product or important images you have along with any applicable text and a call to action button.
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 grid format to showcase the Yoga blocks collection, which then displays as a single row of images. The Inline Quick Shop style is enabled as well, which adds an "Add to cart" button beneath the image.
13. 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 file) and there are also options for aspect ratio, auto-loop, having text/buttons display over the a static placeholder image, etc.
14. Contact form
This section provides an easy way for shoppers to contact you which can go a long way toward building confidence in your brand and making it easy for customers to find and get in touch with you with any questions or concerns.
15. 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 5 columns (added as content blocks) 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 the Footer section settings.
-
Seoul
The sections below make up the Turbo Seoul homepage:
2. Slideshow
- Text animation - fade down
- Gallery transition - slide
- Change slides every - 5 seconds
Slide 1 - Preheading
- Heading
- Text position - center
- Text Alignment - center
- First button label
- First button link
Slide 2 - Heading
- Subheading
- Text position - right
- Text alignment - center
- First button label
- First button link
- Second button label
- Second button link
- Highlight second button - enabled
- Heading
- Collection layout - slider
- Products per row - 5
- Images per row - 1
- Text alignment - center
- First image position - right
- Image
- Heading
- Text
- Button label
- Button link
- Promotions per row - 2
- Promotions animation - none
- Promotions style - square
Both Promotions - Image
- Link
- Header
- Text
- Button label
- Show product description - enabled
- Description position - above product form
7. Video
- Aspect ratio - 16:9
- Video link - YouTube
- Image
- Preheading
- Heading
- Subheading
- Text position - right
- Text alignment - center
- First button label
8. Gallery
- Gallery style - horizontal masonry
- Wide display - enabled
- Enable lightbox - enabled
- Images per row - 4
- Images per row - 1
- Text alignment - center
- First image position - left
- Image
- Heading
- Text
- Button label
- Button link
10. Search
- Heading
- Text alignment - left
- Placeholder text - enabled
- Background image - enabled
11. Blog Posts
- Heading
- Posts - 3
- Show blog tags - enabled
12. Logo List
- 5 logos
- Heading
- Text alignment - center
- Text position - center
14. Contact Form
- Heading
- Text
- Text position - left
- Text alignment - left
15. Footer
- Show theme designer credits - enabled
- Show payment method icons - enabled
- Column 1 - Logo
- Column 2 - 4 - Menu
- Column 5 - Page
-
Florence
The sections below make up the Turbo Florence homepage:
- Featured Promotions
- Promotions grid: full width
- Promotions animation: none
- Promotions style: square
- Show title on image: enabled
- Search
- Predictive search enabled
- Text columns with image
all 3 columns - Heading: none
- Show image: enabled
- Heading
- Heading Size: regular
- Text
- Text alignment: left
- Featured Collection
- Heading
- Collection layout: Grid
- Products per row: 4
- Limit products: 8
- Image with text
- Images per row: 1
- Text alignment: left
- First image position: right
- Grid style: full width
- Text columns with image Column 1 & 3
- Heading: none
- Show image: enabled
- Button link: linked
- Show image: disabled
- Heading
- Heading size: large
- Text
- Text alignment: left
- Button link: linked
- Social feeds (deprecated)
- Testimonials
- Text animation: none
- Change testimonials every: 4 seconds
all 3 testimonials - Use image: disabled
- Testimonial
- Customer name
- Store name
- Text position: center
- Text alignment: center
- Contact form
- Heading
- Text
- Text position: center
- Text alignment: center
- Newsletter
- Heading
- Subheading
- Text alignment: center
- Upload banner background image: yes
- Footer
-
Chicago
The sections below make up the Turbo Chicago homepage:
Both "Day" and "Night" shops have the same configuration – just different colors!
1. Header
The Header in the Turbo Chicago demo contains three areas: Announcement bar, Top bar and Navigation!
The Announcement bar is a great way to promote discount codes, sales, or important information to your customers. The text can be linked to another page or URL as well.
In the Top bar, we’ve enabled the social media icons, the theme’s built-in currency converter. The cart is enabled and the bag icon has been chosen as the cart icon. If you hover over it, the mini cart will appear!
In the Turbo theme, you can choose the following settings and options for the Top bar:
- Show social media header icons
- Phone number
- Menu (it won’t show drop-down items!)
- Cart & Cart icon (bag/cart)
- Language selector
- Currency selector
For the Navigation area, two menus have been added here. A 'Mega menu' is enabled under the 'Products' menu item. The logo position and logo alignment settings are both set to center, and the menu position is inline with the logo. The ‘sticky’ header setting is also enabled, so the navigation becomes fixed once you start scrolling down the page.
In the Turbo theme, you can choose the following settings and options for the navigation area:
- Logo display width
- Logo, Secondary logo over content, Mobile logo
- Main menu/Secondary menu
- Enable vertical menus
- Open drop-downs on click instead of hover
- Show search
- Fixed (‘sticky’) header
- Logo position (left/center)
- Logo alignment (left/center)
- Menu position (inline with logo/under logo)
- Menu alignment (left/center/right)
2. Image with Text Overlay
The Image with Text Overlay section allows you to add beautiful banner images with optional text and buttons.
Here, we’ve added a tagline for the brand on top of a large banner image that is a mix of product and lifestyle. A button has been included as a call to action to take customers to a new arrivals collection.
In the Turbo theme, you can choose the following settings and options:
- Image (we recommend uploading a 1800 x 1000px size - but feel free to adjust based on your desired look and layout)
- Choose to enable wide display
- Add a preheading, heading, and additional text
- Enable a background for the text with an option to add some transparency
- Include one or two buttons with an option to enable a “highlight” to them (this fills in the button instead of having it display as an outline)
- Choose the text position (left/center/right)
- Choose the text alignment (left/center/right)
- Mobile image cropping – if you'd like to allow a greater display area on mobile, you can enable 'image cropping' which will crop and zoom in on the image (left, center, right).
- Show text below image on mobile
- Mobile specific text color
3. Image with Text
The Image with text is perfect if you want to prominently display images. Whether these are product related, company related, or lifestyle shots; this section will show off any big or important images you have along with any applicable text and a call to action button.
Here, we’ve added two blocks to this section. Images of the product line have been added in both, with accompanying text and buttons.
In the Turbo theme, you can choose the following settings and options:
- Choose to enable wide display
- Choose images per row (1 or 2)
- First image position (left/right) – subsequent images will appear staggered.
- Image (we recommend uploading a 1024 x 1024px size - but feel free to adjust based on your desired look and layout)
- Choose the image position (left/right)
- Add a heading and additional text
- Include a button
- Choose the text alignment (left/center/right)
4. Featured Promotions
The Featured Promotions section is a great way to catch your customer's attention, and direct it towards specific content in your shop that you’d like them to see or explore further!
Here, we’ve added promotions for three of the collections in the shop. Each promotion shows a product image with the collection name on top. On hover, additional text for each promotion displays underneath the collection name.
In the Turbo theme, you can choose the following settings and options:
- Image (we recommend uploading a 840 x 840px size - but feel free to adjust based on your desired look and layout)
- Include a link
- Add a heading and additional text
- Add a button
- Choose to enable wide display
- Choose to show the title on image
- Promotions per row (2-4)
- Promotions animation
- Promotions style (square/circle/rounded)
5. Blog Posts
The Blog Posts section will display up to 4 of your most recent posts. Having a Blog in general is a great way to build a sense of community around your company and share content.
In the Turbo theme, you can choose the following settings and options:
- Select a blog or create a new one specific for the home page
- The number of posts
- Enable/disable the tags, author, date, comment count, estimated read time, and read more link
6. Testimonials
Testimonials build confidence with shoppers and showcase real-life examples of your products in use by satisfied customers, which can be a great source of endorsement.
Here, we’ve included three positive reviews about some of the products in the shop.
In the Turbo theme, you can choose the following settings and options:
- Add a heading and a full testimonial
- Include the customer name with an optional link and additional info
- Text position and text alignment (left/center/right)
- Add a background image (we recommend uploading a 1600 x 1000px size - but feel free to adjust based on your desired look and layout)
- Darken the background image
- Choose to enable wide display
- Text animation
- Adjust the amount of seconds it takes to change slides within your testimonials
7. Footer
Here, we’ve used all 5 available columns in the Footer. One logo block with social media icons enabled, one empty column block, two menu blocks, and one text block. The theme designer credits and Payment method icons have also been enabled.
-
Dubai
The sections below make up the Turbo Dubai homepage:
1. Header
Announcement bar
Top bar- Show social media header icons - enabled
- Cart icon - bag
- Show cart - enabled
Logos
- Logo & Mobile logo - enabled
Search
- Show search - enabled
Layout
- Fixed ('sticky') header - enabled
- Logo position - center
- Logo alignment - center
- Menu position - under logo
- Menu alignment - center
- Logo top padding - 10px
- Main menu top padding - 10px
- Enabled under SHOP
2. Slideshow
- Wide display - enabled
- Text animation - fade in
- Gallery transition - fade
- Change slides every - 6 seconds
Slide 1 - Heading
- Subheading
- Text position - left
- Text alignment - left
- First button label
- First slide link
Slide 2 - Heading
- Text position - center
- Text alignment - center
- First slide link
Slide 3 - Heading
- Subheading
- Text position - center
- Text alignment - left
- First button label
- First slide link
- Promotions per row - 2
- Promotions animation - fade in
- Promotions style - square
- Show title on image - enabled
Both Promotions - Image
- Link
- Header
- Images per row - 1
- Text alignment - left
- First image position - left
Image with Text content block - Image
- Image cropping - none
- Heading
- Text
- Button label
- Button link
- Display star rating on product - enabled
- Show dynamic checkout button - enabled
- Show product description - enabled
- Description position - above product form
- Heading
- Collection layout - grid
- Products per row - 3
- Limit products - 6
7. Testimonials
- Wide display - enabled
- Text animation - fade down
- Change testimonials every - 6 seconds
First & Second testimonial - Image
- Darken background image - enabled
- Testimonial title
- Testimonial
- Text position - center
- Text alignment - center
Third testimonial - Image
- Testimonial title
- Testimonial
- Text position - center
- Text alignment - center
8. Blog Posts
- Heading
- Posts - 4
- Show estimated read time - enabled
9. Footer
- Show theme designer credits - enabled
- Show payment method icons
Column 1 - Logo
- Logo alignment - left
Column 2 & 3 - Menu
Column 4 - Text block
- Heading
- Text
- Show social media footer icons - enabled
Column 5 - Newsletter block
- Heading
- Text
-
Tennessee
The sections below make up the Turbo Tennessee homepage:
1. Header
- Announcement bar enabled
- Cart icon - cart
- Logo display width - 205px
- Fixed ('sticky') header - enabled
- Logo alignment - center
- Menu position - under logo
- Menu alignment - center
- Logo top padding - 10px
- Menu top padding - 0
- Mega Menu - enabled under Shop
- Preheading, Heading, Text - added
- First button label + First button link - added
- Text position - left
- Text alignment - left
- Mobile settings > Show text below image - enabled
- Heading - added
- Collection layout - grid
- Products per row - 4
- Limit products - 4
- One product added
- Show product gallery popup - enabled
- Show product description - enabled
- Description position - above product form
- Show dynamic checkout button - enabled
5. Blog Posts
- Heading - added
- Posts - 2
- Show tags - enabled
- Show author - enabled
- Show estimated read time - enabled
- Show date - enabled
- Show continue reading link - enabled
6. Social Feeds (deprecated)
7. Search
- Heading - added
- Text alignment - center
- Placeholder text - added
8. Footer
- Show theme designer credits - enabled
- Column 1 + 2 - Menu content block
- Column 3 - Text content block
- Column 4 - Logo content block: Alignment - right, Show social media footer icons - enabled