Homepage sections

For your homepage, Split allows you to have a static section (for the slideshow), then you have total freedom to put as many sections as you wish, with your own content below it. 

Customize the slideshow

More like a "split screen slider", 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 Slideshow tab.
  3. 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.
  4. To add a slide, click the Add slide button. If you wish to edit a slide, just click the slide's tab.
  5. 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.
  6. Paste a Link if you wish to promote a certain product, collection or blog post. This is also optional.
  7. 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).
  8. 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).
  9. You can also reorder slides by dragging them around.
  10. You can also remove slides by clicking the Delete button.
    If you don't want the slider to appear on your homepage, then simply delete all the slides.
  11. When you're done, hit Save.

Adding other sections

After the slideshow, you can add as many sections as you wish on the homepage. Each section can be added multiple times with different options and everything can be rearranged, giving you large freedom over the final look of your website.

To add a section, just click the Add section button, select the desired section, then click the Add 

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.

Featured collection

This section allows you to show up to 14 products from a selected collection.

  1. Write a Heading, which will appear in the left side. It could be the title of your collection or a catchy call to action, like "Check our latest products" or "This month's sales".
  2. From the Collection list, choose one of your collections as a feed for the section.
  3. From the Products number list, choose the number of products that you want to display here.
    Based on the number of products, the design of the section will change. If there are only 4 products, you will see a scrollable list of products, while more than 4 products will trigger a grid design.
  4. When you're done, hit Save.

Images with text overlay

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.

Social feed

This section allows you to pull up to 7 posts from twitter, instagram or both at the same time. 

  1. Write a Heading and a Subtitle (optional).
  2. In the Twitter usename field, write the Twitter username from which you want to pull up posts. 
  3. In the Instagram access token write your Instagram token, which you can generate here.
    You can only display your own Instagram feed.
  4. From the Number of posts list, choose the number of posts you wish to display here. The design of the section will vary based on this.
    If you don't wish to mix up content from both sources, you can add two different sections, one for each source.
  5. When you're done, hit Save.

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

This section allows you to add a promotional video to your homepage.

  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.

UP NEXT: Collection pages