10. Vantage 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 Vantage 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.
Vantage Ver: 7.0 -
The Instagram feed was removed from version 7 onward due to pending changes at the time of release to Instagrams API that inevitably will remove the ability for websites to show this as an external resource from your theme settings.
Here is a list of the available Vantage homepage sections:
- Image Carousel w/Text
- Image w/Text Overlay
- Logo list
- Featured Video
- Featured Collection
- Featured Product
- Blog Posts
- Instagram Feed ( Before Ver: 7.0)
- Collection List
- Text Columns w/Images
- Rich Text
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 width, speed, heading size, heading weight, subheading size, button text size, and button text 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, as mentioned in our Image Sizes article we suggest using the following sizes for your slideshow images; 1920px x 900px for full-width and 1200px x 800px when not full-width. Choose a heading, subheading, button text, link for the button, button text color, button background color, caption alignment, and caption background. Tip: If you do not want to show a button leave the text blank and choose transparent for the button color. Click Save. Now in 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-7 images each with size options ranging from 33% of the container row 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, here are some suggested sizes: 1 image - 1600 x 900px (W x H), 2 images - 900px x 600px (W x H), 3 images or more - 600px x 400px (W x H), or square 1000px x 1000px.
Step 1: Choose Gallery Settings
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 heading, image subheading (shown on hover) and color for the text. Repeat this for the remaining images up to four. In our example above, we made the first row of images 66%, 33%, 33% then added a row break, then the second row 33%, 33%, and 33%. There are so many different combinations of grids you can create.
Image Carousel w/text
The Image Carousel w/text is a very versatile section, you can add a heading, subheading, and button, paired with a slider gallery of images. You have the choice to position the image gallery to the left or right. This section looks really good if you use two of them in a row on your homepage one with the image to the left and one to the right. You can also only upload one image and not use the sliding.
Image with text overlay
The Image with Text Overlay is a full-width background image with overlay text. For each image, you can add a heading and subheading, the subheading shows when you hover the section. You can also link the section.
The Logo list allows up to six images (logos or not) to be uploaded with a header.
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 on your homepage, and choose whether to show the video at full-width or not.
Choose a featured collection of products to show within either a grid layout. You can select how many total products show and how many products per row.
The Featured Product section gives you the perfect opportunity to feature one of your more really important products on your homepage, customers can add the item to the cart directly from the homepage. In the settings choose the product you want to feature along with some basic product form settings.
Choose a blog to pull blog posts from within your store and
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
Collection List is a list of selected collections to feature. First, choose your Collection List settings, choose a grid of 2, 3 or 4 collections. Then, under content select each collection to feature.
The Map section can be used to show your store location and business hours, to use Google Maps you will need to get an API
Text Columns with Images
The Text Columns with Images section allows you to feature 1-3 text columns with or without images. Each column also has an option for a heading and subheading of text.
The Rich Text section allows you to use text content on the homepage. You can use the rich text box to type your message or in content from a Shopify page.
The Newsletter section allows you to include a subscription form for a newsletter, it also shows your social media icons.
That is all the homepage sections for the Vantage 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.