Vantage Theme: Setting up the Homepage

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 ( Block ) 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 Image Gallery section allows you to add images with optional text content and buttons to your front page.

Section settings

  • Enable full width
    Toggle full browser width for this section
  • Heading & Subheading size
    Control the size of text shown on images
  • No space after section
    Remove any bottom margins from this section to bring it closer to others on the page
  • Choose style
    Selected between images with surrounding spaces or images touching one another with no space.

Image 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
  • Image Height
    Choose between the options for image size or allow the image to show at its natural size.
    Selecting small, medium or large for all of the images will ensure that you keep a perfect image alignment but will crop the images in order to do so.
  • Container width
    Set the width of each image
  • Link
    Optionally link your images to other content
  • Captions
    Add optional headings, subheadings and buttons ( where a link is present ) to your images
  • Image caption styles
    Control the position of the text on your images and it's color schemes

Row Break

A row break is used if you want to force images that follow onto a new row.

This section allows you to show an image carousel/slideshow alongside text.

Section settings

  • Enable full width
    Toggle full browser width for this section
  • Remove bottom margin
    Remove any bottom margins from this section to bring it closer to others on the page
  • Layout
    Choose between a left aligned or right aligned image carousel
  • Image size
    Set the side of the image to fill a bigger area, choose between small, medium and large
  • Text alignment
    Left of Center align text
  • Heading, text & button
    Add a Heading, supporting paragraph of text and a button

Block / Image settings

  • Image
    Recommended image sizes:
    •  Small columns: 600px x 600px
    •  Medium columns: 800px x 800px
    •  Large column: 1200px x 1200px
  • Link
    Add a link to the image

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.

Section settings:

  • Enable full width
    Toggle full browser width for this section
  • Image 
    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 height
    Control the height of the image
  • Overlay text: Heading, text, button, & link
    Add a heading along with supporting text and a button
  • Text styles
    Control the size and color scheme of text

Logo List

The Logo list allows up to six images to be shown within a row

Section settings

  • Heading
    Add a heading that will be shown above this section
  • Color
    Set the color of the heading

Block/Image settings

  • Image
    Add an image to be displayed, we recommend 300px wide for optimal quality
  • Link
    Add a link to each image

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.
  • Placeholder image
    Video can not autoplay on mobile devices, add an image that will show before your customer presses Play
  • Video link
    Add the link to any YouTube video to play in your store or upload an MP4 image to your Shopify files area and insert the link
  • Heading, subheading, 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 including the position of any overlay text

Showcase a featured collection on your storefront to give easy access to key products in your store or promote specific inventory.

Section settings:

  • Choose a collection
    Select which of your existing collections to show
    Each featured collection section can contain one collection, multiple featured collections can be used on the homepage
  • Display in Carousel
    Show this collection in a carousel, de-select for a grid layout
  • Products per row 
    How many products visible per row or at one time if using a carousel
  • Products shown
    How many products from this collection will be shown
  • Colors
    Set the color scheme for this section

Showcase a Featured product on the home page of your store

Section settings

  • Choose a product
    Select the product to show in this section.
    Each featured product section can contain one product, multiple featured products can be used on the homepage.
  • Heading 
    Add a heading for this section and set it's color scheme
  • Show portion of the description
    We do not show the full product description on the homepage, but you can optionally include a small snippet of that
  • Media
    Set the display options for your product media including thumbnail positions, click to enlarge and video looping.

Blog posts

Feed recent posts from your blog into your homepage to add updated content.

Section settings

  • Choose Blog
    Select the Blog to show in this section.
    Each featured Blog section can contain one Blog, multiple featured Blogs can be used on the homepage.
  • Section heading
    Add a title to this section and control it's color scheme
  • Posts shown
    Choose how many posts to be shown from the selected blog
  • Posts per row
    Control how many posts to be shown per row
  • Image alignment
    Controls the image alignment: Left, Right, or Alternated if the posts per row is set to 1
  • Text alignment
    Control the alignment of text in the post excerpts

Collection List

Select multiple collections to offer quick access to content within your store

Section settings:

  • Content
    Add Collections which will be shown. If a Collection has been given a featured image then that featured image will show. If not the first product in this collection will be shown instead.
  • Heading
    Add a heading to this section
  • Colors
    Set the colors for this section
  • Collections per row
    Control how many collections will be shown per row
    This will show 2 per row on mobile devices

Map

The Map section can be used to show your store location and business hours, Google maps is integrated into this section but reliant on an API key, more details on that   here  .

Section settings

  • Text
    Multiple text fields are available allowing you to show your hours, location and a heading for this section
  • Map links
    Add links to the map allowing customers to get directions to your location
  • Google maps API key
    Enter the Google maps API key to show the location within your store
  • Background
    In lieu of a map upload a background image that will be shown in it's place

Text Columns with Images

Show 1, 2 or 3 blocks in a row featuring an image followed by text that can link to any content.

Section settings

  • Heading
    Add a heading, shown at the top of this section
  • Alignment
    Control text alignment for all content in this section

Block / Column settings

  • Image
    Add an image:
    For 1 block we recommend 1000px width
    For 2 blocks we recommend 800px width
    For 3 blocks we recommend 600px width
    In all cases the height is up to you, where using more than 1 image make sure to keep your images identically sized.
  • Link
    Add a link to your image ( If button text is added the button will also use this link )
  • Heading
    Add a text heading for this column
  • Text 
    Add text to this column
  • Button
    Add a button to this column ( visible only when a link has been chosen )

Rich Text

The Rich Text section allows you to add text content to your homepage or to optionally pull content from an existing page in your store.

Section settings

  • Heading
    Add a heading to this section
  • Text
    Add text to be used within this section
  • Show content from a page
    Pull in content from an existing page in your store ( this will override any text used in the above setting )

SEO content

The SEO content looks identical to your Rich Text section however the SEO section heading uses the H1 tag which is used as the main title tag for SEO on your pages.
This section can and should be used once only

Newsletter

The Newsletter section allows you to include a subscription form for a newsletter, customers who subscribe will be added to the Customers section of your Shopify admin.

Section settings

  • Heading
    Add a heading to this section
  • Subheading
    Add a subheading giving reasons that it might be beneficial for a merchant to signup.
  • Colors and Styles
    Control the colors and layout styles for this section