10. Icon Theme: Setting up the Homepage
In this article, we will go through the process of setting up the editable, re-orderable Sections on the Homepage.
The Icon theme homepage uses Shopify editable, re-orderable sections (theme version 5.1+). This means that instead of having one slideshow or one area for an image gallery you may now add multiple slideshows, multiple image galleries or repeat any content sections on your homepage as part of a much more streamlined and simplified setup.
The homepage slideshow has two style options, background or content style. The content style slideshow features linked images and resizes with the browser width. The background style slideshow will show images at 100% of the browser height; expect some left-right image cropping. Each slideshow can contain up to five images, each with their unique color scheme, title, caption and call to action buttons.
Step 1: Choose Slideshow Settings
To create a slideshow select Homepage from the template picker and go to the Sections tab, choose Slideshow. Below settings, select your preferred slideshow style option, speed, title size, title weight, caption size, button size, and button weight.
Step 2: Choose Slideshow Content
Below Content select the first slide and upload a slide image. We recommended that you use slideshow images with the same image ratio if you're unsure what this means read our Preparing Images article. Choose a title, subheading, button text, link for the button, caption alignment, text, and button color. Click Save. Now n the same way move on to the second slide up to a total of five slides.
The Image gallery consists of blocks which will show between 1-4 images each with size options ranging from 33% of the container width to 100%. Having control over these block widths allows for different block layouts. We recommended that you use the same image ratio for each block.
Step 1: Choose Gallery Settings
To create a Gallery select Homepage from the template picker and go to the Sections tab, choose Gallery. Choose a background color, font weight and text size for the blocks.
Step 2: Choose Gallery Content
Below Content select, the first image, choose an image width, upload an image, choose a link for the image, an image title, and color for the text. Repeat this for the remaining images up to four. In our example, we made the first image 66% and the second two 33%.
Image with text overlay
The Image with Text Overlay is a full-width background image that has parallax scrolling effects. For each image, you can choose to add short text content or show the full content of a static page within your store. You can optionally add a button as well.
By default, the Featured Video section does not show on the homepage, but you can add it by going to Add Section in the sections tab. Click the blue Add button and paste the URL of a video on YouTube or Vimeo into this section to display that video at full screen on your home page.
Choose a featured collection of products to show within either a grid layout or a carousel allowing left and right scrolling. If you choose the carousel option, then you will select how many products to show in the carousel. If you choose the grid layout, you can select how many total products show AND how many products per row (products per row does not apply to the carousel).
Choose a blog to pull blog posts from within your store and show between 2 - 8 of the most recent articles from that blog.
Show the six most recent images from your Instagram feed, add more feeds if you have more than one Instagram account. You will need to retrieve your Instagram access token by generating one here. Then simply paste your access token and click save. By default the Instagram feed will show in black and white and color on hover, if you would like it to show it in color you will need to make a change in the theme code. Follow our quick tutorial on doing so here.
Show a small section of social icons to break up your home page content and bring attention to other methods that your customers can use to follow or interact with you. Optionally, you can choose to show an email signup form below the Social Icons.
Featured Collections List
Feature specific collections in a grid of 2, 3 or 4 collections or a carousel style. First choose your Featured Collections settings then and then select the content.
That is all the homepage sections for the Icon theme, remember you can show each of the above sections more than once with different content within each of them! Time to move on to the All Collections page.