Please note that these instructions are for pre-section, older versions of our Turbo theme (Turbo 1.2.5 and earlier).
One of the most useful and flexible sections on the Turbo theme’s home page is the “Featured Promotions” section. This highly configurable area can feature up to eight images, each of which can link to any content in your shop, such as a product, blog, contact page, or collection (they can even link to an external site, if you wish!).
STEP 1: Specify a Featured Promotions section on your homepage
Choose where you want to have this section appear on the homepage by going to the theme settings > Home page tab and selecting “Featured Promotions” for one of the drop down menus, in the order in which you want it to appear in relation to other sections:
STEP 2: Configure the style settings
There are 4 main options relating to the Featured Promotions layout/style that you can configure, which will affect the way these images look and behave on your home page. All of these can be found in your theme settings > Home page - featured promotions tab:
A: Promotions per row
You can display 2, 3 or 4 of these promo images per row
B: Promotions grid
Choose “Full-width” if you want the images to touch each other and reach edge-to-edge on your homepage, or choose “Standard” to keep a bit of margin between and around the images.
C: Show title on image
If you enable this option by checking it, any title that you enter for the promotions will display on top of the image; if you leave this option unchecked, then any title for the promo will appear below the image. Note that the color of the title text will adapt according to its position (e.g. when appearing on top of the image, it uses the same color as the banner headlines).
D: Promotional section animation
You can set these images to simply appear on the page (choose the “None” setting) or give them a little extra style by having them fade in (choose “Fade only”). You can also have each image move down (“Fade Down”) or up (“Fade Up”) into place along with the fade in; this animation is subtle but gives this section a little more oomph.
4 promos, full-width, title on top (+ in this image the hover state is shown on “Flash Sale!”)
4 promos, full-width, title below (hover state shown on “Flash Sale!”)
3 promos, standard, title below:
2 promos, standard, title below:
8 promos, full-width, no title/text at all:
STEP 3: Specify the image, text + link for each promo
When a shopper hovers over a featured promo on desktop, the image will darken slightly and any text and/or button will then appear ( *NOTE: On tablet and mobile, the title will automatically display below the image, since the user cannot ‘hover’ over it)
You can specify the text and image for each featured promo in your theme settings > Home page - featured promotions tab as shown below. Note again that all text and/or URLs are optional, but you must click “enable promotion” for each one in order to have it display.
**TIP: Make sure all your featured promo images are the same size; this will help make this section look professional and polished.
The Featured Promotions section in turbo is a great way to catch your visitors’ attention, and direct it towards specific content in your shop that you’d like them to see or explore further. Since they can be configured to achieve a variety of looks, try to experiment with all the options and find the look that suits your needs best!