10. Testament 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 Testament 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.
Here is a list of the available Testament homepage sections:
- Image w/Text Overlay
- Featured Video
- Featured Collection
- Featured Product
- Blog Posts
- Instagram Feed
- 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-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, 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).
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 all three images 33% wide.
Here is an example of the first image set to 66% wide and the other two set to 33% wide.
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. 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 on your homepage, and choose whether to show the video at full-width or not.
Choose a featured collection of products to show in a carousel, give it a heading and select how many products to show in the carousel.
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 all the typical product form settings.
Choose a blog to pull blog posts from within your store and show
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
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, choose whether you want the collection name below the image or over the top as an overlay, and choose to show the number of products in the collection. 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 code here.
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 Testament 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.