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.

Homepage Sections

Slideshow

The homepage slideshow comes with a multitude of options to help you control and finetune your slideshow offering a multitude of different options.

Choose Slideshow Settings

Slideshow Speed - This controls the interval of time (in seconds) that it takes to change from one slide to the next. If there is only one slide, this will have no effect.

 Slideshow Caption Settings

Heading text size -  This slider controls the main caption font size (in pixels)

Subheading text size - This slider controls the subheader caption font size (in pixels)

Button text size - This  controls the button caption font size (in pixels)

Heading weight - Allows you to alter the font-weight or Boldness 

Slideshow Image Settings

Slideshow image uploader - Attach the image you wish to use for this slides settings on desktop.

Caption alignment - This allows you to choose the text alignment of your caption from left, center, right.

Caption horizontal position - This slider allow you to adjust the left / right positioning of your caption on the image.

Caption vertical position - This slider allows you to adjust the top/bottom positioning of your caption on the image.

Slideshow Mobile Settings

Mobile Image - This allows you to include a mobile-specific image if you choose to display a different image for mobile-only.

Hide caption background - toggle this on to hide the caption background on mobile.

Image gallery

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.

Choose Gallery Settings

Full width - This option allows you to toggle on/off if you would like the image gallery to be constrained at 1200px or scale to the full width of the browser.

 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.

This feature includes an image effect that allows you to choose if you would like the background image Fixed, Scrolls with content, Parallax scrolling

Slideshow w/Video

The Icon theme currently features a second slideshow functionality which alllows you to integrate the Slideshow and Video into one seamless application for your customers to view both image slides and video. This allows you to integrate a Youtube, Vimeo or link to an mp4 link which can be added to your Shopify Dashboard > Settings > Files.

Video

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.

Featured Collection

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).

Blog posts

Choose a blog to pull blog posts from within your store and show between 2 - 10 of the most recent articles from that blog, this also allows you to show blog tags as well

Instagram Feed

Show the five 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.

Social media

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.