Icon Theme: Homepage Section

On this page

Slideshow section

Your Slideshow can contain up to 5 blocks where each block would represent an image or video slide.

Section settings:
The settings here affect the slideshow as a whole, each of it's blocks ( slides ) will inherit these global settings

  • Slideshow speed
    The time that elapses between each slide
  • Navigation style
    Choose between dots or arrows
  • Video audio
    This will dictate whether included audio on any video slides is enabled or disabled
  • 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 4 hero images with text and buttons that bring focus to key areas of your store.

Section settings:

  • Full width
    Allow this section to span the full width of your browser.
  • Heading
    Optionally add a heading to this section.
  • Background color
    Add a full browser width background color to this section to add separation from other content on the page
  • Image headings
    Control the size of text shown for each image in this section

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 column with text

Similar to galleries Image columns with text show images with adjustable container widths that show in a grid format.
The difference is that this section is more simplified with each blocks text content will show below its respective image with globally controlled colors

Section settings:

  • Full width
    Allow this section to span the full width of your browser.
  • Colors & Size
    Choose the color for the background and text within this section along with globally controlled text sizing for headings.
    All other text in this section will inherit it's size from the body text in your theme settings > typography area.

Image settings:

  • Image & Size
    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.
    Choose the alignment for text: Left, Center, or Right.

Image row with text

This section allows you to show an image with text side by side where the width of the image can be adjusted to create a strong visual effect.

Section settings:

  • Full width
    Allow this section to span the full width of your browser.
  • Image, position, and size
    Upload your image, choose its position relative to the accompanying text, and choose the size for this image.
    Your images will scale, but we recommend using the following image widths to ensure good responsive quality:
    •  66% - 75% width: 1200px wide
    •  50% width: 1000px wide
    •  33% width: 800px wide

  • Text and link content
    Text can be aligned to the left or center of it's area.
    Add a heading and text content that goes into greater detail, compliment this area with an optional button leading to other content in your store.

Image with text overlay

This section will display a full browser width image with an optional parallax background scrolling effect that changes the position of the image as you scroll down the page.

Section settings:

  • Image effect, scale overlay, and height
    When adding an image we recommend to use 1920px wide x 1080px tall. This will ensure that you image is large enough to fill the screen and show a high resolution
    Images will show in the background where you can choose to show the Parallax scrolling effect or keep the image static in place.
    When parallax is chosen you can increase or decrease the effect by using the image scale slider.
    To increase the contrast between the image and text slide the overlay to darken the image as needed.
  • 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.

Shop the look

The Shop the look section works similarly to a gallery but with the addition of up to 5 hotspots per image that link to products within your store, creating a shoppable gallery of images.

Section settings:

  • Full width
    Allow this section to span the full width of your browser.
  • Heading
    Optionally add a heading to this section

Image settings:

  • Image width
    Add an image to this section and set it's width in relation to it's space on the page.
    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

  • Products & Hotspots
    Choose a product that will be shown when its hotspot has hovered.
    Set the position of the hotspot and choose a color.

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.
  • Full width
    Allow this section to span the full width of your browser.
  • Heading
    Optionally add a heading for this section.
  • Styles
    Set the background and text colors for this section + choose how many featured collections will show per row.
    On mobile devices, the theme will automatically show 2 per row.

Featured collection

Featured collections will show products chosen from specific collections on your home page. This is a great way to merchandise slow-moving or specific products and get them in front of your customers.

Section settings:

  • Full width
    Allow this section to span the full width of your browser.
  • Heading
    Optionally add a heading for this section.
  • Styles
    Set the background and text colors for this section.
  • Collection
    Choose a collection from within your store, this can be shown in a carousel or in a grid layout where you can assign how many products are shown per row.
    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.

Section settings:

  • 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 optional click to enlarge button.
  • 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.

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.

Newsletter

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

Section settings:

  • Heading & Subheading
    When asking users to provide you with their email for marketing it is important that they understand why and are offered reassurance that you will not be sending spam.
    Explain the benefits of signing up in detail.
  • Styles
    Set the text and background color for this section.

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.

Rich Text

This section allows you to enter a brief text section to your store or alternatively pull content that already exists on a page within your store.
It can serve as an introduction to another section, a short welcome to your store or can be used to improve your store's SEO by adding paragraphs of content that are normally image-heavy.

As with other sections you can style the background of this section, along with the text color to allow this to be distinguished easily from other sections.

Video

Feature video content from your store by dropping a link to any YouTube video

The image will scale proportionally to the size of the screen in use and remain visble on all devices
Optionally add a title to the video section where neeed.