Highlight > Sections list

For your homepage, you can add as many sections as you wish under the Sections tab in theme customizer. Each section can be added multiple times with different options and everything can be rearranged (with a simple drag and drop), 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.  The available sections are:

Blog posts

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

If your blog has images, check the Show post image box. It will show up article featured images. Otherwise, the title and the excerpt will be shown. We are not showing the excerpt if the images are showing up, because this would make the layout too clumpy.

Collection list

In this section you can add a few collections to feature on your site homepage, in a list view. The design of this section differs on desktop / mobile.

Custom Liquid

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

Email signup

A basic newsletter form to allow merchants subscribe to your Shopify newsletter. All emails are saved in your Shopify dashboard, under the Customers section.If you wish to integrate your Newsletter with MailChimp, please read this article: https://shopify-support.krownthemes.com/article/386-mailchimp-integration

This is a section for showcasing a certain collection. You can write a heading and a caption, show a link to the collection page, and choose the Layout. There are two options:

  1. The asymmmetrical layout, which creates an uneven grid, in which product items get random widths and positioning, along with some really cool parallax effect. This grid is good for making certain products stand out on your homepage. 
  2. The regular grid is a basic three columns (on desktop) grid, with products evenly aligned. It could be used for a more longer collection, or if you have more than one collection featured on your homepage, you should use different layouts in order to break the flow a bit and attract customers attention.

Lastly, there is a Promotional Block that you can use to write a short paragraph about your collection, and even have a call to action button.

Featured product

This is a simple section to showcase a specific featured product on the homepage, with all settings taken from the Product Page. The difference is that in this one you won't see any product details, but a link to the actual product where you will see the entire listing.

Gallery

A simple image gallery, with a flexible layout where the images are randomly sized & positioned based on the number of blocks that you have.

Heading

A simple text section which can be used for separating various sections or display a call to action. It also includes the option to add small images that will float behind the text. 

Image

This section is for showing a basic full width / auto height image on your homepage.

Image with text

This section can be used for displaying images with accompanying text. You can choose the Image position (so if you have more than one sections, you might want to alternate the image's position - only for desktop). You can also change the Heading size (larger size for less text and vice-versa).

Images with text overlay

This section allows for up to 4 blocks of images with some text over it. As with the featured collection, you can choose between an asymmetrical layout (elements with different widths and some subtle parallax) or a regular grid (with evenly sized and positioned elements). You can also play with the Text alignment and have custom color options to make sure that the text is well readable over the background image.

Each block has text options and a place for a custom button. You can also change the Image alignment (since the blocks have fixed size, your images will be cropped, so this property is to help you show the best part of the image).

One note on links - if your block has a link but you don't write a button label, the entire block will become the link. Otherwise, the link will only be applied on the button.

A few ideas on how to use this section:

  • Collection list, in which you configure each block to link to a separate collection
  • Product features, in case you have a single product and you want to showcase various features 
  • Alternative gallery, if you don't write any texts and want to break the flow a bit
  • Team members or selected vendors

Images with text slider

This section was designed to showcase specific product features, but you can use it in any way you can think of (team members, brand story, plain image slider, etc.)

Products slider

Another way to showcase a collection is using this slider, in which up to 9 products will be arranged in a draggable slider. Another great way to break the flow of your homepage with selected products in a more traditional layout.

Rich text

Another crazy section, it starts as a simple way to add some text to the homepage, but it ends with a really complex section when you start playing the the text alignment, text size and add images. You can see how we've used this section in our demos, but you're free to use your own imagination with this one. 

A few inspiration ideas:

Slideshow: vertical

This is Highlight's "pièce de résistance", from where the entire concept started a while ago. This vertical slider allows you to display products, collections, brand details, anything you can think of, in a really neat way, making sure that your user's don't miss a thing. It is much better than horizontal sliders, as with these, visitors often don't get past the first slide. So in aligning everything in a vertical layout (even on mobile), all the precious information will be shown to your store's visitors.

So this slideshow also aligns your pictures in an asymmetrical and random layout with great parallax and text blending effects. For the best creative effects, make sure that you use two or three images for each slide in order to maximise the design's potential. 

Here's some inspiration on how you could use this section, but the possibilities are endless:

  • Featured collections
  • Featured product
    • In this case, you could use a single slide that links to a featured product and put more than one image of that product. 
    • This is how we've used the slider in our single demo: https://highlight-theme-single.myshopify.com/
    • Or you can also showcase multiple products where each slide is a featured product
  • Brand story or history timeline

Slideshow: horizontal

This is a new section added in version 3.0 and it is similar with the product page image slider.

Testimonials

A pretty basic text slider for writing user testimonials.

Toggles with icons

Display toggles with icons that you can select directly from the theme customizer - similar to the FAQ page template. 

Video: background (MP4)

An autoplaying video background with some text on it.  Please also 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). 

Video: popup

A simple section with an image and a big play button, that opens a video from YouTube or Vimeo.

For the uploaded videos please make sure that you are using the video complete URL in this format example: https://www.youtube.com/watch?v=xcJtL7QggTI&t=6s .

Please do not use the share link format ( https://youtu.be/xcJtL7QggTI) or any extensions of this type: https://www.youtube.com/watch?v=xcJtL7QggTI&t=6s&feature=youtu.be - the video will not load. 

A quick tip: videos from Vimeo will autoplay (at least at the time of writing this), YouTube doesn't have this feature.

Scrolling images

Starting with theme version 3.0 we've added a new section for images that will scroll. You can adjust the scrolling speed and direction and choose between 2 and 6 columns layout for desktop screens.

Scrolling text

This is a similar section dedicated for texts that will scroll.

Text columns with icons

In older theme versions this was a static section but now you can use it anywhere on the page.

Scrolling images

Starting with theme version 3.0 we've added a new section for images that will scroll. You can adjust the scrolling speed and direction and choose between 2 and 6 columns layout for desktop screens.

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