Testament Theme: Homepage sections

On this page:

Slideshow

Your slideshow can contain up to 5 slides images.

Section settings:
These settings affect the slideshow as a whole, each of its blocks ( slides ) will inherit these global settings.

  • Enable full width
    Show the slideshow at full browser width
  • Slideshow speed
    The time that elapses between each slide
  • Navigation style
    Choose between dots or arrows
  • Slideshow caption text
    Set the size of your Slideshow caption text

Slide settings:

  • Desktop image
    Upload a large image, your slideshow will span the full width of the browser, we recommend 1800px x 800 - 1000px
    The height of the slideshow is dictated by the height of the images that you use. Make sure to use images that have the same height to width ratio to ensure best results.
  • Image overlay
    When enabled adds a darkened overlay to your images which can help to contrast between images and text added to the slide caption.
  • Caption alignment and positioning
    Text within a caption can align to the Left, Center or Right, Slide captions also include horizontal and vertical controls allowing you to position your caption with pinpoint accuracy.
  • Mobile image & caption display
    Optionally add a mobile image that will be shown on small devices.
    Because images scale in size for smaller screens you can also choose to position your slideshow caption below the mobile image ensuring that the image is not covered by that content.
  • Caption content
    All a heading, subheading, and up to 2 buttons per slide.
  • Caption styles
    Control the color scheme for each slide independently ensuring the best potential display of your hero content.

The Gallery section allows you to show up to 6 hero images with text and buttons that bring focus to key areas of your store.

Section settings:

  • Enable full width
    Allow this section to span the full width of your browser.

Image settings:

  • Image, size, and visibility
    Upload your image and set the container width for that to dictate how much of the available width of the page each will take.
    Choose from: 25, 33, 50, 66, 75 & 100% for some structured layouts that wow your customers.

    Your images will scale, but we recommend using the following image widths to ensure good responsive quality:
    •  100% width: 1920px wide
    •  66% - 75% width: 1200px wide
    •  50% width: 1000px wide
    •  33% width: 800px wide
    •  25% width: 600px wide
  • Links & text
    Optionally add a link to each image, text, and a button to add that all-important call to action that gets your customers shopping.
  • Style and positioning
    Choose the color scheme and position of your text content on each image including the ability to show the text content below the image.

Image with text Blocks

This section uses an adjustable grid giving you control to make complex layouts containing images and text which switches to a scrolling view on Mobile devices.
Each row of the grid contains 6 blocks, simply choose a content type ( image or text ) and assign it a block size, when the number of blocks taken reaches 6 content will break to a new line.

Section settings:

  • Enable full width
    Allow this section to span the full width of your browser.
  • Remove space between
    Remove gaps and spaces between each piece of content
  • Center align text
    Center align any text blocks
  • Image height
    Optionally Choose from preset image sizes to ensure the best fit for your content

Image Block Settings:

  • Image
    Your images will scale, but we recommend using the following image widths to ensure good responsive quality:
    •   1-2 blocks in size: 800px wide
    •   3-4 blocks in size: 1200px wide
    •  5-6 blocks in size: 1600px wide
  • Link
    Optionally add a link to each image
  • Block size
    Choose how many blocks out of a maximum of 6 this image block will use

Text Block settings:

  • Heading
    Add a Heading to call attention to this block
  • Text
    Add descriptive text, which can be formatted with links, bold & italic text
  • Block size
    Choose how many blocks out of a maximum of 6 this text block will use

Image with text overlay

This section will display a full browser width image with an optional scrolling or fixed position as you scroll down the page.
Note that due to device limitations Mobile browsers will default to scrolling images.

Section settings:

  • Image effect, scale overlay, and height
    When adding an image we recommend using 1800px wide x 800px tall. This will ensure that your image is large enough to fill the screen and show a high resolution without eating too much vertical space.
    Image overlay: - Add an overlay to your image to help contrast between the image and any text added.
    Height controls: Separate Controls allow you to choose the section height for mobile and desktop.
  • Text content
    Optional text can be Left, Center or Right aligned and may include a heading, large text block, and also buttons linking to additional content in your store.
  • Style
    Headings and supporting text can be positioned as needed with additional controls for text size and color scheme.

Add some video content that will bring life to your homepage, as a standalone video or as a background to some featured text

Section settings:

  • Enable full width
    Allow this section to span the full width of your browser.
  • Cover image
    Video can not autoplay on mobile devices, add an image that will show before your customer presses Play
  • Video link
    Add the link (not embed code) to any YouTube video to play in your store.
  • Add Video overlay
    Add an overlay effect to the video which will help your text contrast
  • Background video height
    Set the height of the video on your homepage
  • Heading, text, and buttons
    Optionally add a heading along with text and configure buttons that link to content in your store
  • Styles
    Set the color scheme for your video caption content

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. 

Section settings:

  • Heading
    Add a Heading for this section
  • Collection
    Choose a collection from which products will show
  • Display in Carousel
    Toggle the display of a Carousel or grid layout
  • Product Grid
    Choose how many products fit per row ( Switches to 2 on mobile )
  • Products shown
    Up to 30 products can be displayed in a Featured collection, if you intend to show more than one Featured collection we recommend that you keep the number of products shown in each to a low number as the more products you display on your home page the more this will slow down the page load time.

Showcase a specific product in your store with this section that leverages a similar setup to the Product pages in your store.

  • Product
    Select a product to showcase and optionally add a heading for this section.
  • Product media gallery
    As within your store's product pages, choose the layout options for your product media which will show images and video assigned to the product.
    Slideshow display with various thumbnail layouts or scrolling gallery option is present along with an 
  • Form options
    Choose the background for the form on the right side of the page to differentiate from it's standard body background and optionally display Social sharing images for Facebook, Twitter, and Pinterest.

Blog posts

Add additional content to your stores home page by featuring posts from a Blog within your store.

Section settings:

  • Blog
    Select a blog from which to display articles (posts).
    Providing your article includes a featured image then it will be shown here.
  • Heading & styles
    Optionally add a heading to this section, set the color, and add a background fill that will span the width of the browser behind this section.
  • Layout options
    Show blog posts in a 3 per row grid or allow the natural layout to show one per row with images alternating left / right alignment with text content.
    Choose to display tags and author details on each post.

Collection List

A collection list is a great way to bring focus to key Collections in your store.

Section settings:

  • Collection content
    Add up to 12 Featured collections within this section.
    If the collections that you have chosen to feature have been assigned a Featured image then this will show here. If not then the image from the first product in that collection will be shown in its place.
  • Heading
    Optionally add a heading for this section.
  • Collections per row
    Choose how many collections will show per row
  • Collection title position
    Toggle the position of the title below or floating on the Collection image
  • Show product count
    Toggles display of the number of products in each Collection


Map

Adding a map can help new customers to discover a local business that was previously unknown to them

Section settings:

  • Text, hours, and location
    This section allows you to enter text content that will be shown to the right or left of a map or background image.
    This is a great area to show customers your opening hours and include an address where they can visit your store.
  • Maps & Background images
    Adding a map is as simple as entering the address for it.
    The map section connects to the Google maps API but does require an API key to be obtained from Google.
    Shopify does document the best way to achieve this with these detailed instructions.

Text Columns with Images

Similar to galleries Image columns with text show images that show in a grid format adjusting to the number of blocks chosen. This section is more simplified with each blocks text content will show below its respective image with globally controlled colors

By default, the theme will load 3 blocks which show automatically in a 3 column grid.
When changed to 2 blocks each will take 50% of the available space and show in a 2 column grid.
When changed to 1 block the single image and it's accompanying text will show centered on the page with a reduced width of approximately 65% of the available width.

Section settings:

  • Heading
    Add an optional header to this section
  • Center align text
    Global control which centers text within all blocks of this section

Block settings:

  • Image
    Your images will scale, but we recommend using the following image widths to ensure good responsive quality:
    •  3 columns: 600px x 600px
    •  2 columns: 800px x 800px
    •  1 column: 1200px x 1200px
    Note that you can use different heights than those specified, the width is the important factor.
  • Link
    Add a link to point to any content
  • Heading, text & button
    Add a Heading, text and a button to each block.

Rich Text

Rich text sections in the Testament theme are blocks which allow you to add more than 1 area of text and adjust its size to create a smart grid.

Section settings:

  • Content
    Add multiple text content blocks with configurable widths
  • Section padding
    Choose the spacing between each block
  • Colors
    Set the color scheme for this section

Block settings:

  • Heading & Text
    Add a heading and rich text to each bloc
  • Show content from a page
    Choose to feature content from an existing page in your store within this block
  • Center align & Block width
    Set the width of each block and control the alignment of its text

Newsletter

Adding a Newsletter signup section to your homepage will encourage signups for customers who want to discover more about your store and brand and follow your social channels

Section settings:

  • Heading & text
    Add a title and give customers a reason to signup for emails from you
  • Text styles
    Control the size and of text and color scheme for this section