Split > Sections list

Image with hotspots (new in 4.0 theme version)

This section allows you to upload images that will include hotspots with links to your product pages.

Scrolling images

A section for small images or logos that you want to present scrolling on the page.

You can set the scroll speed and direction as well as the option that images to pause on mouseover.

Scrolling text

Similar to the scaling images section this section is for text only. It can be used as a promotional banner.

Custom contact form

This section allows you to have more flexibility for the contact form and use individual blocks for the form fields.

Email signup form

This is an individual and flexible section now (starting with 4.0 update) and is a simple form used for newsletter subscription .

Blog posts

This section allows you to show up to 6 articles from a selected blog.

  1. Write a Heading, which will appear in the left side. It could be a simple "Blog" or a call to action, like "Read our latest posts".
  2. If you also want to have a link to your full blog here, write something in the Button field, like "Read more" or "View all articles". This button will act as a link to your blog page.
  3. If you wish to show the article's author, date and comments number, then check Show author and date.
  4. From the Blog list, choose one of your blogs as a feed for the section.
  5. From the Posts number list, choose the maximum number of articles that you want to showcase on your homepage.
  6. When you're done, hit Save.

Collection list

In this section you can add up to 4 collections to feature on your site homepage. The design of this section will also change based on the number of blocks. In order to create different layouts, you can add multiple sections one after the other.

Please insert a title for this section using the Heading option.

The Align text block option is to set your own alignment for the collection title and "shop now" button in this section.

Custom Liquid

A simple option to insert custom liquid code in a dedicated section.

FAQ

Displays your content in toggles using a "split" design (example). 

Countdown banner

This section was previously used in the old "Promotions/sales" page template and is designed to set a timer for your sales/promotions.

Featured collection

This section allows you to show up to 5 rows of products from a selected collection.

Featured collection slider

You can showcase up to 12 products in a vertical slider on desktop screens (and horizontal carousel on mobile).

Featured product

In this section you can select one of our products to showcase on homepage. This will include the "add to cart" option so that your customers will not have to go to the actual product page to purchase it. 

You will find here the similar options from the product page to customize it.

Gallery

A simple image gallery where you can add links for images, captions and also set the image alignment.

Image 

A simple image section where you can upload images that will display without cropping - the section height will adjust with an auto height. 

Image with text

This section allows you to show various promotions or link to other pages from your website. 

  1. From the Text alignment list, choose the alignment which will apply to all of your blocks in this section.
  2. To add a block, click the Add image with text button.
  3. Write a Heading and a Caption (both are optional).
  4. Paste a Link if you wish to promote a certain product, collection or blog post. This is also optional.
  5. If you want the link to be applied to an individual button, labeled "Shop Now", then check Show button.
  6. In the Image field, upload a new image or select one from your library. Again, we suggest uploading large images and let the theme do the resizing.
  7. From the Text color list, choose the variant which will show best over your image.
  8. You can add up to 4 blocks.
    The design of this section will also change based on the number of blocks. In order to create different layouts, you can add multiple sections one after the other.
  9. When you're done, hit Save.

Slideshow

Formally named "split screen slider" now this section has more flexibility (can be used anywhere in the page) and can also be duplicated as all the other sections. 

This section allows you to showcase some of your greatest products or collections in great style.

  1. Navigate to your homepage in the theme editor.
  2. Click the Sections tab.
  3. Select the Split screen slider and then the Add button. 
  4. Under Settings, choose a color for Background and one for Text.

    Try using a slightly different color scheme than the main one, or go even with a bold color, in order to catch the user's attention and visually separate the slider from the rest of your page.
  5. To add a slide, click the Add slide button. If you wish to edit a slide, just click the slide's tab.
  6. Write a Heading, a Caption and a Subheading for your slide. All of these are optional, so if you just want to display an image you can do this, however, the slider's design needs some text in order to look well. 
  7. Paste a Link if you wish to promote a certain product, collection or blog post. This is also optional.
  8. In the Image field, upload a new image or select one from your library. 

    We suggest you to upload images that are 1680 x 1890px, or even 1920 x 2160px.. Make sure that you only upload optimized jpg files (we suggest 90% optimization to make sure that your site will load fast).

  9. You can add up to 4 slides (more than this would mean too much initial scrolling for the user, so it could mean a bad user experience).
  10. You can also reorder slides by dragging them around.
  11. You can also remove slides by clicking the Remove content button.

    If you don't want the slider to appear on your homepage, then simply delete all the slides or use the "hide" Shopify option from theme customizer - screenshot.
  12. When you're done, hit Save.

Shop the look

Displays a list of selected products inside a slider, along a featured image. The number of items per section that you can use here is 8 products. 

Please note that Shopify has a limit of 20 unique handles on the same page, this means that you cannot use more than 20 products if you have multiple "shop the look" sections. 

Newsletter

A simple newsletter form, which allows customers to sign up into your Shopify customers list.

Map

Similar to the contact page map, you can also insert a map section to your homepage. You'll need to register a Google Maps API Key to display the map.

Heading

The heading section was formally the "announcement bar" section and it is a simple section where you can add a text as a header for other sections and also a link if needed.  

Rich text

This section allows you to show up some text content or content from a page. 

  1. Write a Heading, which will appear in the left side. It can be the title of your page, or a call to action message.
  2. If you wish to have a button that links to a certain page, write something in the Button label.
  3. Paste a link to a page on your site in the Link label. This link will be attached to the button.
  4. In the Background image field, upload a new image or select one from your library (this is completely optional, you can also go for a "clean" layout). We suggest an 1680 x 1890px image for this background.
  5. From the Text color list, choose the variant which will show best over your background image.
  6. Under the Content tab, click the Rich text block to edit it's contents. If you want to add the contents from a page, Delete this block and then click Add content. You can now choose to insert a Page.
  7. When you're done, hit Save.

Testimonials

This section allows you to add up to 7 client testimonials.

  1. Write a Heading and a Subtitle (optional).
  2. To add a block, click the Add testimonial with text button.
  3. In the Quote textarea, write your client's testimonial.
  4. Write a Name. You can also use this field for a more complex caption, such as "by John Doe, CEO of Company"
  5. In the Avatar field, upload a new image or select one from your library. This is optional, but attaching a real face to a testimonial, gives it more credibility. We suggest an 150 x 150px image for this field.
  6. When you're done, hit Save.
    The design of this section will also change based on the number of blocks.

Video: background (MP4) - Fullscreen with autoplay 

An autoplaying video background with some text on it. You can customize the video height, text alignment and colors using the included options. 

Please make sure to upload an "fallback image" for mobile devices where the autoplay is disable (depending on the internet connection, phone settings/battery level, mobile browser the video autoplay could be disabled). 

The video file needs to be uploaded in the  Shopify Settings > Files section - screenshot - and use the generated link in the theme customizer video section. 

Video: popup

This section allows you to add a promotional video to your homepage that will open in a lightbox.

  1. Write a Heading and a Caption (completely optional, if you only want to show the play button).
  2. Paste a link to a Vimeo or YouTube video in the Video URL label.
  3. In the Background image field, upload a new image or select one from your library (this is completely optional, you can also go for a "clean" layout). We suggest an 1920 x 1080px image for this background.
  4. From the Text color list, choose the variant which will show best over your background image.
  5. When you're done, hit Save.

With this section you can add a video popup area on your site, where you can showcase a YouTube or Vimeo video of your products.

For the YouTube videos please make sure that you are using the URL in this format example: https://www.youtube.com/watch?v=xcJtL7QggTI&t=6s (and not: https://youtu.be/xcJtL7QggTI or https://www.youtube.com/watch?v=xcJtL7QggTI&t=6s&feature=youtu.be)

UP NEXT: Collection pages
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.